color-mode
color-mode copied to clipboard
nuxt-modules
data-theme and class configuration
I have some questions about the configuration after the latest updates to support data attributes.
1 - Is there a way to use only the class or an data attribute? It seems there is always an data attribute, even if it's not set up in the configuration. I thought I missed something but your own website also has the following HTML-Tag
<html class="dark" data-="dark">
The "data-" part seems to be unnecessary.
2 - If I set a data attribute, is it possible to disable the changes for the regular CSS class?
3 - When I configure a data attribute my HTML-Tag gets an element "data-head-attrs="data-theme"
What is this exactly for? Never seen this before in combination with a theme switch.
The data-="dark" attribute is sth to support daisy-ui theming: pull/144. You can set it like following to have <html data-theme="dark"> tag:
// nuxt.config.js
module.exports = {
...
colorMode: {
dataValue: 'theme'
}
}
The
data-="dark"attribute is sth to support daisy-ui theming: pull/144. You can set it like following to have<html data-theme="dark">tag:// nuxt.config.js module.exports = { ... colorMode: { dataValue: 'theme' } }
Yes, I noticed that but like I said in my original post: What if I don't want to to use the Data Attribute? If you don't set the "dataValue" in the confiig it still outputs this incomplete code part "data-="dark".
I think
data-="dark"is a bug, do you have a small reproduction please?
Hello sir ! Just landed here because the "dark:" prefix in nuxt-tailwindcss doesn't work (for example with dark:bg-slate-700, because of this data-="dark" attribute.
When I modify the HTML code of my page to set data-mode="dark", then it works.
And for a reproduction, you can actually look in the source code of https://color-mode.nuxtjs.org/ and I think in every use of the plugin. On this website, the first line (whether it's light or dark mode) looks like this :
<html class="light" data-="light">
My nuxt.config.ts contained this line :
colorMode: { classSuffix: ''},
and after reading this issue I modified it and now it's this line :
colorMode: { classSuffix: '', dataValue: 'mode' },
and now the dark: prefixes in tailwind classes are correctly parsed.
This is a build/treeshaking issue. In the script:
if (dataValue) {
de.setAttribute('data-' + dataValue, value)
}
is being transformed into:
{
de.setAttribute('data-' + dataValue, value)
}
(See https://unpkg.com/browse/@nuxtjs/[email protected]/dist/script.mjs.)
