fix: handle data attribute in script as well

nuxt-modules · May 31, 2022 · 30b173e · 30b173e
1 parent 2da98d8
commit 30b173e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/playground/components/ColorModePicker.vue b/playground/components/ColorModePicker.vue
@@ -15,7 +15,7 @@
     <p>
       <ColorScheme placeholder="..." tag="span">
         Color mode: <b>{{ $colorMode.preference }}</b>
-        <span v-if="$colorMode.preference === 'system'">(<i>{{ $colorMode.value }}</i> mode detected)</span>
+        <span v-if="$colorMode.preference === 'system'">&nbsp;(<i>{{ $colorMode.value }}</i> mode detected)</span>
       </ColorScheme>
     </p>
   </div>

diff --git a/src/runtime/plugin.client.ts b/src/runtime/plugin.client.ts
@@ -8,8 +8,8 @@ const helper = window[globalName] as unknown as {
   preference: string
   value: string
   getColorScheme: () => string
-  addClass: (className: string) => void
-  removeClass: (className: string) => void
+  addColorScheme: (className: string) => void
+  removeColorScheme: (className: string) => void
 }
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -32,7 +32,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       app.head = function () {
         const head = (typeof originalHead === 'function' ? originalHead.call(this) : originalHead) || {}
         head.htmlAttrs = head.htmlAttrs || {}
-        head.htmlAttrs['data-theme'] = colorMode.value
+        head.htmlAttrs[`data-${dataValue}`] = colorMode.value
         return head
       }
     }
@@ -95,8 +95,8 @@ export default defineNuxtPlugin((nuxtApp) => {
   }, { immediate: true })
 
   watch(() => colorMode.value, (newValue, oldValue) => {
-    helper.removeClass(oldValue)
-    helper.addClass(newValue)
+    helper.removeColorScheme(oldValue)
+    helper.addColorScheme(newValue)
   })
 
   if (colorMode.preference === 'system') {

diff --git a/src/script.ts b/src/script.ts
@@ -14,32 +14,40 @@ if (forcedColorMode) {
   value = forcedColorMode
 }
 
-addClass(value)
+addColorScheme(value)
 
 w['<%= options.globalName %>'] = {
   preference,
   value,
   getColorScheme,
-  addClass,
-  removeClass
+  addColorScheme,
+  removeColorScheme
 }
 
-function addClass (value) {
+function addColorScheme (value) {
   const className = '<%= options.classPrefix %>' + value + '<%= options.classSuffix %>'
+  const dataValue = '<%= options.dataValue %>'
   if (de.classList) {
     de.classList.add(className)
   } else {
     de.className += ' ' + className
   }
+  if (dataValue) {
+    de.setAttribute('data-' + dataValue, value)
+  }
 }
 
-function removeClass (value) {
+function removeColorScheme (value) {
   const className = '<%= options.classPrefix %>' + value + '<%= options.classSuffix %>'
+  const dataValue = '<%= options.dataValue %>'
   if (de.classList) {
     de.classList.remove(className)
   } else {
     de.className = de.className.replace(new RegExp(className, 'g'), '')
   }
+  if (dataValue) {
+    de.removeAttribute('data-' + dataValue)
+  }
 }
 
 function prefersColorScheme (suffix) {