Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix: handle data attribute in script as well
  • Loading branch information
Atinux committed May 31, 2022
1 parent 2da98d8 commit 30b173e
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 11 deletions.
2 changes: 1 addition & 1 deletion playground/components/ColorModePicker.vue
Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions src/runtime/plugin.client.ts
Expand Up @@ -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) => {
Expand All @@ -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
}
}
Expand Down Expand Up @@ -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') {
Expand Down
18 changes: 13 additions & 5 deletions src/script.ts
Expand Up @@ -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) {
Expand Down

0 comments on commit 30b173e

Please sign in to comment.