nuxt-modules/color-mode

Dark and Light mode with auto detection made easy with Nuxt 🌗

color-mode's Issues

[Question] - how do you write unit tests?

I followed the blog set-up and the color mode is working. However, any unit test I wrote, even the most basis, is failing because of the getClasses method in the component.

Is there something I need to do, to set up the unit test to have the colorMode module exposed to it and or the method(s)?

Ability to change the 'mode' selector

Is your feature request related to a problem? Please describe.

N/A

Describe the solution you'd like

To be able to set the class name of the mode selector. For example: on the add/remove class function, it would be good to be able to set it to theme-dark instead of mode-dark.

Describe alternatives you've considered

N/A

Additional context

Happy to create a PR if needed.

Add @types for better typescript support

Now Vetur throws an error when accessing this.$colorMode:

Property '$colorMode' does not exist on type 'CombinedVueInstance...'

A solution could be to define the $colorMode object in @types

Do not break pre-rendering for SSG

Is your feature request related to a problem? Please describe.

I'm creating a static blog theme using nuxt-content. I used this package to support dark mode and to avoid the white flash I wrapped my default layout in color-scheme component. Because of this, nuxt's crawler stopped working and none of the pages were being pre-rendered (it took me 10+ hours of tweaking and googling to realize this). I'm assuming this has something to do with color-scheme wrapping the slot content in client-only.

Describe the solution you'd like

• Mentioning this caveat in the documentation would be a good start.
• Even better would be to provide a prop to somehow make this work with nuxt-content.

Describe alternatives you've considered

Nothing. I'll take white flash over no pre-rendering. 😄

Additional context

I don't have a reproduction link that's why I'm filing this as a feature request rather than a bug.

Creates duplicate of vueUse colorMode

Hello, im not sure if this is my fault, problem of naming or a bug.

So when this module was installed after vueUse module, the cli shows me this warning:

i have used vueUse colorMode() composable first, but decided to install this module. So i'm not sure how to get rid of the warning, and if its the problem of naming or maybe i've done something wrong? Thanks

Vuetify support

Hey there,

I really like the idea of your plugin but i'm actually working with vuetify. Do you plan on adding vuetify support to your roadmap ?

Gautier

Nuxt app stuck at loading page, console throws TypeError: colorMode is undefined

I've installed the module earlier today, and it seemed to work just fine, by edditing the html class value via Firefox's dev tools. However, after trying to implement a @click="$colorMode.preference = 'dark_mode'", my app just stopped working. It gets stuck with a loading page, and the console throws TypeError: colorMode is undefined, it just stops if I remove '@nuxtjs/color-mode' from the nuxt.config file. I've already tried to delete de node_modules folder, reinstall the module and nothing works.

Version

@nuxtjs/color-mode: "2.0.9"
nuxt: "2.15.6"

Apart from what I've already told above, I don't what are the steps to reproduce this error.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (@nuxtjs)

Hooks for when color scheme changes

I want to be able to apply a css transition when the color mode changes, but there doesn't seem to be an easy way to do that without forking the color mode module. I have already considered doing the css transitions in the button that changes the color mode, but then it will not transition if the system theme changes.

I think it would be nice if there was some way of running code before the color scheme changes.

Cannot find name '$colorMode'.ts(2304)

The error still occurs under nuxt 3 & "@nuxtjs/color-mode": "^3.0.1"

Cannot find name '$colorMode'.ts(2304)

I have installed it under dev

Regression: Syncing dark mode across tabs and windows is broken

Version

@nuxtjs/color-mode: v2.1.1
nuxt: v2.15.8

Reproduction Link

https://github.com/nuxt-community/color-mode-module

The example in this repository is sufficient for reproducing the bug. Don't use the demo link, since it is outdated.

Steps to reproduce

• Run yarn dev.
• Open two windows, both pointing to http://localhost:3000/.
• Switch to different dark/light modes using the button.

What is Expected?

The dark mode is synchronized with the other window.

What is actually happening?

The other window shows no changes in dark mode.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@commitlint/cli, @commitlint/config-conventional, @nuxt/eslint-config, @typescript-eslint/parser, @vitest/coverage-v8, pnpm, vitest)
• chore(deps): update devdependency @nuxt/test-utils to ^3.12.1
• chore(deps): update pnpm to v9
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/setup-node v4
• actions/checkout v4
• actions/cache v4
• codecov/codecov-action v4

npm

docs/package.json

• @nuxt-themes/docus ^1.15.0
• @nuxtjs/plausible ^1.0.0
• nuxt ^3.11.2

package.json

• @nuxt/kit ^3.11.2
• pathe ^1.1.2
• pkg-types ^1.0.3
• semver ^7.6.0
• @commitlint/cli ^19.2.1
• @commitlint/config-conventional ^19.1.0
• @nuxt/module-builder ^0.5.5
• @nuxt/schema ^3.11.2
• @nuxt/test-utils ^3.12.0
• @types/lodash.template ^4.5.3
• @typescript-eslint/parser ^7.6.0
• @vitest/coverage-v8 ^1.4.0
• eslint ^9.0.0
• husky 9.0.11
• nuxt ^3.11.2
• standard-version ^9.5.0
• typescript ^5.4.5
• vitest ^1.4.0
• @nuxt/eslint-config ^0.3.6
• pnpm 8.15.6

playground/package.json

• @nuxtjs/tailwindcss ^6.11.4
• nuxt ^3.11.2

---

• Check this box to trigger a request for Renovate to run again on this repository

Module doesn't work without Vue Router

Version

@nuxtjs/color-mode: 3.0.0
nuxt: 3.0.0-27418641.56aabd6

Reproduction Link

Stackblitz demo

Steps to reproduce

1 - Create a Nuxt 3 app without a pages/ folder (just app.vue), so Vue Router isn't bundled
2- npm run dev -o
3 - Get a __vite_ssr_import_2__.useRouter is not a function HTTP 500 error.

Full stacktrace:

at eval (file://./.nuxt/dist/server/server.mjs:1789:25)
at callWithNuxt (file://./.nuxt/dist/server/server.mjs:266:20)
at applyPlugin (file://./.nuxt/dist/server/server.mjs:217:29)
at Module.applyPlugins (file://./.nuxt/dist/server/server.mjs:227:11)
at async createNuxtAppServer (file://./.nuxt/dist/server/server.mjs:60:5)
at async renderToString (file://./node_modules/vue-bundle-renderer/dist/index.mjs:257:19)
at async renderMiddleware (file://./.nuxt/nitro/index.mjs:213:20)
at async handle (file://./node_modules/h3/dist/index.mjs:635:19)

nuxt app instance unavailable in storybook for v3

Version

@nuxtjs/color-mode: v3.0.0
@nuxt/bridge: npm:@nuxt/bridge-edge

Reproduction Link

https://github.com/maevsi/maevsi/tree/renovate/nuxtjs-color-mode-3.x

Steps to reproduce

Start Storybook (with yarn storybook in the linked repo)

What is Expected?

Storybook shows stories.

What is actually happening?

Storybook shows

Also, the website shows without the system color mode first, then switches to the correct color mode when fully loaded, which wasn't the case in v2. <- this was fixed in v3.0.1

Force color mode for layout

What the best way to force the use of a certain color mode for layout? Not for the page.

Can't infer correct NuxtApp property type after registering @nuxtjs/color-mode

Originally posted in nuxt/nuxt#13787

---

Environment

• Operating System: Windows_NT
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.1
• Package Manager: [email protected]
• Builder: vite
• User Config: modules
• Runtime Modules: @nuxtjs/[email protected]
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-yq4qz8

Describe the bug

When using a property provided by a custom plugin, it can't infer correct NuxtApp property type that always shows any after registering @nuxtjs/color-mode.

But it works when the property used in template alone.

Please try the demo in VS Code.

Additional context

No response

Logs

No response

Alert error CJS

Version

"@nuxtjs/color-mode": "^2.1.1"
"nuxt-edge": "latest"

Steps to reproduce

• Install Nuxt Bridge
• Install Color Mode
• Using Vite

What is actually happening?

WARN @nuxtjs/color-mode doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

Handle wrong state

See #87

Build fails on production environment

I am not able to build on Netlify. The module works in development environment, but it fails on Netlify when NODE_ENV is set to production:

✖ Nuxt Fatal Error │ │

Error: Cannot find module '@nuxtjs/color-mode' │
Require stack: │
/opt/build/repo/node_modules/@nuxt/core/dist/core.js

"devDependencies": {
    "@nuxtjs/color-mode": "^2.1.1",
}

On Netlify my NODE_VERSION is 14.

How to set colorMode without flash based on data fetched in asyncData()?

We use storyblok as our CMS where we've added a field to set the desired colorMode for any given "story" (blog post, page, etc.) – All these stories get funneled into one Vue component orchestrating the different story types, so forcing the colorMode with colorMode: 'black' in this component is not an option, because the colorMode needs to be fetched first.

This is how I imagine it could work, if the colorMode property would support a function as value.

export default {
  async asyncData() {
    // some fetching ...

    return {
      colorMode: fetchedColorMode,
    };
  },
  
  // would be nice being able to do this
  colorMode() {
    return this.colorMode;
  },
};

Setting the colorMode directly in asyncData() did not work. And doing it in mounted() results in a flash.

Any ideas on how to accomplish this?

Color-mode throws error in a static storybook build

Version

• @nuxtjs/color-mode: 2.1.1
• @nuxtjs/storybook: 4.2.0
• nuxt: 2.15.8

Reproduction Link

GitHub repository that can reproduce the bug: https://github.com/wetendorff/nuxt-storybook-colormode-bug

Steps to reproduce

npm install
npm run storybook:build
npx http-server storybook-static/

What is Expected?

Same result as:

npm run storybook

What is actually happening?

Fails with error:

colorMode is undefined

plugin_client@http://127.0.0.1:8080/main.ad4abd53.iframe.bundle.js:1:55263
_callee2$@http://127.0.0.1:8080/main.ad4abd53.iframe.bundle.js:1:62178
tryCatch@http://127.0.0.1:8080/vendors~main.a248c2cf.iframe.bundle.js:2:484186
invoke@http://127.0.0.1:8080/vendors~main.a248c2cf.iframe.bundle.js:2:483817
defineIteratorMethods/</<@http://127.0.0.1:8080/vendors~main.a248c2cf.iframe.bundle.js:2:484961
asyncGeneratorStep@http://127.0.0.1:8080/vendors~main.a248c2cf.iframe.bundle.js:2:405102
_next@http://127.0.0.1:8080/vendors~main.a248c2cf.iframe.bundle.js:2:405422

Doesn't update properly

I am using it to update the logo image src path based on the color mode.

It looks like this:

<img
        :src="$colorMode.value === 'dark' ? '/img/logo/logo-dark.svg' : '/img/logo/logo-light.svg'" />

If my selection is saved in cookies it works properly and displays the correct logo. But if it relies on the system preference only then it loads the logo for the light version, because the initial result of $colorMode.value is system and then it changes to dark (as this is my preference on Mac OS) but the logo doesn't update accordingly.

It seems that $colorMode.value is system as long as the page is still loading, after the page is fully loaded, the value is then either light or dark.

If I switch from nuxt universal mode to SPA it seems to load correctly and show the actual color mode immediately (though I'm not sure if it's because it loads faster and I can't notice it).

Any ideas?

lib is ignoring initial "colorMode/preference" and switches to "system"

Version

@nuxtjs/color-mode: 2.1.11
nuxt: 2.15.7

is there any reason for the lib to automatically switch always to 'system' preferences although non regarding the initial config in nuxt.config.js?

colorMode: {
    preference: 'light', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    classSuffix: "", // removing -mode suffix for Tailwind Dark mode support
    hid: 'nuxt-color-mode-script',
    storageKey: 'nuxt-color-mode'
  },

I check this on main component mounted:

    console.log('value:', this.$colorMode.value);
    console.log('forced:', this.$colorMode.forced);
    console.log('preference:', this.$colorMode.preference);

    setTimeout(() => {
      console.log('value:', this.$colorMode.value);
      console.log('forced:', this.$colorMode.forced);
      console.log('preference:', this.$colorMode.preference);
    }, 10);

and the result is:

I expect it to stay in my initial 'light' mode - instead of switching to system's dark

Does this module support SCSS styling as well?

Hi,

I am currently following this blog post/github repo.
https://github.com/bdrtsky/nuxt-dev-to-clone

I am trying to apply Dark mode toggle, but I am kind of stuck as in how to use this module on scss styling.

I am guessing I should make some changes here in this file
https://github.com/bdrtsky/nuxt-dev-to-clone/blob/master/assets/styles/tokens.scss

Am I correct?

Cannot read property 'preference' of undefined

Version

@nuxtjs/color-mode: v1.0.3
nuxt: v2.14.3

Reproduction Link

Steps to reproduce

I just created a new project, and installed last version of this module. After that i faced with next error:

TypeError: Cannot read property 'preference' of undefined at he (app.2637907.js:1) at app.2637907.js:1 at h (app.6209d6e.js:2) at Generator._invoke (app.6209d6e.js:2) at Generator.next (app.6209d6e.js:2) at r (app.6209d6e.js:2) at l (app.6209d6e.js:2)

mode: 'spa'.
That error is only if i tried to run nuxt start

The same issue closed https://github.com/nuxt-community/color-mode-module/issues/21, but nothing changed.

What is Expected?

No error, and correctly work)

Updating to 1.02 throws console error

Version

@nuxtjs/color-mode: 1.0.2
nuxt: 2.13.3

Reproduction Link

Steps to reproduce

I just updated to 1.0.2, with no other change and my app now throws

[Vue warn]: data functions should return an object:
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
(found in <Root>)

What is Expected?

No error ;)

Side note:
Using 1.0.0 with nuxjs 2.13.3 in SPA mode, when generating and starting, I get the following error

TypeError: Cannot read property 'preference' of undefined
    at be (app.460976a.js:1)
    at app.460976a.js:1
    at f (vendors~app.23ddfa9.js:2)
    at Generator._invoke (vendors~app.23ddfa9.js:2)
    at Generator.O.forEach.e.<computed> [as next] (vendors~app.23ddfa9.js:2)
    at r (app.c57ce17.js:2)
    at l (app.c57ce17.js:2)

Doesn't seem to working with Nuxt 2 + bridge

Version

@nuxtjs/color-mode: 3.0.2
nuxt: Newest Nuxt 2 bridge

Steps to reproduce

npm install --save-dev @nuxtjs/color-mode

add "'@nuxtjs/color-mode'" to nuxt config

modules: [
    // https://color-mode.nuxtjs.org/
    '@nuxtjs/color-mode',
    // https://bootstrap-vue.org/docs#nuxtjs-module
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    // https://www.npmjs.com/package/cookie-universal-nuxt
    'cookie-universal-nuxt'
  ],

What is Expected?

Code compiles and runs normally, can use plugin following instructions

What is actually happening?

I get the following build error, this is only happening with the color mode to nuxt config

 FATAL  The requested module '@nuxt/kit' does not provide an export named 'addAutoImport'                     12:29:40

  import { defineNuxtModule, createResolver, addTemplate, addPlugin, addComponent, isNuxt2, addAutoImport } from '@nuxt/kit';
  ^^^^^^^^^^^^^
  SyntaxError: The requested module '@nuxt/kit' does not provide an export named 'addAutoImport'
  at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
  at async Promise.all (index 0)
  at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
  at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
  at async ModuleContainer.addModule (node_modules\@nuxt\core-edge\dist\core.js:174:20)
  at async ModuleContainer.ready (node_modules\@nuxt\core-edge\dist\core.js:47:5)
  at async Nuxt._init (node_modules\@nuxt\core-edge\dist\core.js:346:5)


 ERROR  Cannot start nuxt:  The requested module '@nuxt/kit' does not provide an export named 'addAutoImport' 12:29:40

  import { defineNuxtModule, createResolver, addTemplate, addPlugin, addComponent, isNuxt2, addAutoImport } from '@nuxt/kit';
  ^^^^^^^^^^^^^
  SyntaxError: The requested module '@nuxt/kit' does not provide an export named 'addAutoImport'
  at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
  at async Promise.all (index 0)
  at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
  at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
  at async ModuleContainer.addModule (node_modules\@nuxt\core-edge\dist\core.js:174:20)
  at async ModuleContainer.ready (node_modules\@nuxt\core-edge\dist\core.js:47:5)
  at async Nuxt._init (node_modules\@nuxt\core-edge\dist\core.js:346:5)

Cannot read property 'preference' of undefined inside Storybook

Version

@nuxtjs/color-mode: ^2.0.3
nuxt: ^2.14.12
@nuxtjs/storybook: ^3.3.1

Steps to reproduce

Install nuxt with @nuxtjs/color-mode and @nuxtjs/storybook.

What is actually happening?

I run nuxt as target: static. Everything works fine with yarn dev.
I can launch Storybook and got it at localhost:3003, but inside the main frame of Storybook, there is this error:
Cannot read property 'preference' of undefined.

I tried everything related in #21 and #25 without success...

Hydration error with example project with ColorScheme placeholder

update: this is issue with auto-import from @nuxt/components (cc: @pi0)

Reproduction: https://codesandbox.io/s/green-frost-uwbcx?file=/components/ColorModePicker.vue

prefer color settings from cookie on iPhone

Version

@nuxtjs/color-mode: v1.1.1
nuxt: 2.14.6

Reproduction Link

Official demo color-mode page.

Steps to reproduce

On iphone with IOS 14.0.1 it don't respect the color settings from cookie.

• Open page in Firefox, Chrome, Safari and change to color to the opposed system color
• close the browser completely, also from background running
• open the browser again, with the open pages on top
• the color mode use the system color

What is Expected?

it should always respect the settings from cookie, not only from system.

What is actually happening?

Nuxt color-mode-module is using the the givien color as long as the browser is open, but as soon as the browser is closed and reopen it uses the system color again.

Is this module supposed to autodetect the preferences and change styling accordingly?

I have the following set in assets/main.css

@layer base {
  .dark-mode body {
    background-color: #091a28;
    color: #ebf4f1;
  }
  .sepia-mode body {
    background-color: #f1e7d0;
    color: #433422;
  }
}

(Am using tailwind)

But when the page loads even though it detects the user using system detection it doesnt apply the dark color scheme (If the users system setting is dark). Is there additional work needed to understand WHAT the users system setting is?

[bug] demo doesn't work in IE11

Demo app doesn't work in IE11, guess same goes for IE9+
(as far as i understood you use css-variables and they are not supported by IE)

Using Bulma variables changes accordint to color-mode

Hey guys 👋

I have the problem of changing bulma variables according to each color mode. Example:

| assets
-- | scss
-- -- | override
-- -- -- | bulma.scss
-- -- | themes
-- -- -- | dark.scss
-- -- -- | light.scss

On my bulma file i have this:

@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/functions';

// Here nothing happens. Any solutions for this?

html {
	&.light-mode {
		@import '../themes/light';
	}

	&.dark-mode {
		@import '../themes/dark';
	}
}

// here i can change any variable i want;

$navbar-item-img-max-height: $size-2;
$navbar-background-color: transparent;

@import '~bulma';

the dark.scss and light.scss have bulma variables inside (assuming they are the opposite) for example:

$primary: $secondary-color;

// customize styles
$body-color: $secondary-color;

I already try the solution with prefers-color-scheme but nothing happens as well. Any solution?

Thanks!

Using htmlAttrs on a page breaks this module

Version

"@nuxtjs/color-mode": "^2.0.0", installed at version: '2.0.0'
"nuxt": "^2.14.6", installed at version: '2.14.7'

Reproduction Link

Here is a link to the sandbox found in the examples section, I've replaced the light page with a page that breaks it.

Sandbox

Change mode to dark and then click through to that inner page, you can also inspect the markup.

Steps to reproduce

Add the htmlAttrs to any page like so

head: {
    htmlAttrs: {
      class: 'test'
    }
}

What is Expected?

That the light or dark class is still added to the HTML element when changing pages.

What is actually happening?

The light or dark class is not added, only the "test" class. If the htmlAttrs is removed, then the module works again.

Color mode value change reset on component swap

hi all I am using the color module and creating a manual toggle:

this.$nuxt.$colorMode.value = this.checked ? "dark" : "light";

whenever nuxt loads a new page component however this value is reset. Why is that?

Color-Mode appears to clash with `vue-meta` when setting `htmlAttrs` in `Nuxt.config.js`

Version

@nuxtjs/color-mode: v1.0.3
nuxt: v2.14.1

Reproduction Link

I have been unable to configure CodeSandbox to use a package.json file.
Apologies if I am not able to provide a minimal working example,
but here's the small change required to reproduce the bug:

https://codesandbox.io/s/agitated-river-rgdqc?file=/nuxt.config.js

Steps to reproduce

Not sure exactly how to reproduce, since I'm not too familiar with vue-meta, so here are the approximate steps:

• set a random htmlAttrs in Nuxt.config.js, in the head attribute
• use Color-mode
• set to dark-mode (through system or cookie)
• switch Nuxt layout (?) or do something that makes Nuxt reload the root HTML element (besides refreshing the page)

What is Expected?

The dark-mode attribute should be present on the root HTML element

What is actually happening?

The dark-mode attribute is not present, only the attributes set in htmlAttrs are

The Nuxt documentation mentions that changing HTML attributes could be done using an app.html file template. Is this the way to go in place of htmlAttrs?

Android Chrome showing $colorMode.value as system instead of the real value(light or dark)

Version

@nuxtjs/color-mode: v2.0.3
nuxt: v2.15.1
Android version: 10
Chrome version: 88.0.4324.181

Reproduction Link

Just put it in a vue file.

<script>
export default {
  fetch() {
    console.log("$colorMode.value",this.$nuxt.$colorMode.value);
    console.log("$colorMode.preference",this.$nuxt.$colorMode.preference);
    console.log("window.matchMedia('(prefers-color-scheme:dark)').matches", window.matchMedia('(prefers-color-scheme:dark)').matches);
    console.log("window.matchMedia('(prefers-color-scheme:light)').matches", window.matchMedia('(prefers-color-scheme:light)').matches);
  }
};
</script>

Steps to reproduce

• Run npm run start on your nuxt application.
• go to your page with the code snippet on the browser.
• read the console messages.

What is Expected?

It should print $colorMode.value with a valid value of light or dark.

What is actually happening?

it prints

$colorMode.value system
$colorMode.preference system
window.matchMedia('(prefers-color-scheme:dark)').matches true
window.matchMedia('(prefers-color-scheme:light)').matches false

It prints true for (prefers-color-scheme:dark) as my phone is enabled with dark mode.

Fade Transitions

Currently, when in Dark Mode, fades fade out into white and then back to dark. Would be great if it could attend to this and properly switch to "black" when fading in and out.

Cookies - "When the browsing sessions ends"

I don't know if this is a bug but so far I haven't found a way of changing this but It feels a bit stupid selecting a color mode and have it get deleted then you close you browser. Is there a way to change how long the color mode cookies last?

Thanks :)

Module not working with nuxt3

Version

@nuxtjs/color-mode: v2.1.1
nuxt: 3.0.0-27238235.a1bcc53

Reproduction Link

https://stackblitz.com/edit/nuxt3-color-mode-aehgts?file=nuxt.config.js

Steps to reproduce

Just add color-mode as buildModule

What is Expected?

For the module to load

What is actually happening?

Crashes the whole build, seems like it is related to not using @nuxt/kit

TailwindCSS psuedo classes stop working after adding this

I tried adding this to my nuxt project along with Tailwindcss, the dark mode selectors were working fine, but default tailwind psuedo selectors like hover, focus etc stopped working.

Any idea how to fix this?

Here is a demo -https://github.com/fayazara/tailwind-nuxt-darkmode
Here is the git repo - https://github.com/fayazara/tailwind-nuxt-darkmode

TypeError: Cannot read property 'preference' of undefined

Version

@nuxtjs/color-mode: 2.0.5
nuxt: 2.14.12

Reproduction Link

I shared the repo privately with @Atinux

Steps to reproduce

Im serving the app as a vscode extension. It would be hard to me to isolate the problem and explain to you the steps. Could we have a meeting and I can show it to you?

What is Expected?

When loading app.js from CDN it should not throw this error

What is actually happening?

The app.js run without any problem when using nuxt start and ssr = false when serving locally. When the app.js is loaded from CDN, this exception happens.

Another thing, from vscode when I serve the app I don't use nuxt start. I just pass a html and that is it. Could it be related to the problem?

Support `data-theme`

Is your feature request related to a problem? Please describe.

In order to work with daisyUI, we need to add data-theme="dark" into the <html> tag, see https://daisyui.com/docs/themes/

Describe the solution you'd like

The module could automatically set it, same as the class.

Additional context

Demo to reproduce, made with Next: https://stackblitz.com/edit/daisyui-nextjs-ftqupt?file=pages%2Findex.js

change $colorMode.preference only work after vue mounted?

when i change $colorMode.preference in store, don't work。
i test change in created ,don't work。
when i test in beforeMount ,it work。

feat: link script in head for CSP 'self' compliance

Is your feature request related to a problem? Please describe.

This plugin does not work with CSP being enabled without including unsafe-inline under script-src.

Describe the solution you'd like

Instead of pushing the script directly into the head (https://github.com/nuxt-community/color-mode-module/blob/449b51e74e3a9bc0cd2d39921ddb2b41e3af5edd/lib/module.js#L34), link a script file instead.

Describe alternatives you've considered

One could also inject a hash or nonce into the CSP rules.

using `useMeta` in nuxt3 conflicts with color mode classes

Setting html classes with useMeta overwrites the color mode classes added by the helper.

edit: even if we set color mode classes with useMeta, we face this issue: vueuse/head#55

Cannot read property 'push' of undefined

Version

@nuxtjs/color-mode: v2.0.7 or newer (currently: v2.0.9)
nuxt: v2.15.6

Since https://github.com/nuxt-community/color-mode-module/pull/85/files#diff-c3a1f4f22d1c26a96e0e94646ca95379288ce182d579bc813c2b3d591a8dbfe8R14 I receive the error "Cannot read property 'push' of undefined" as ctx.app.head is a function (at least in my configuration) and thus has no property script.

How to use it with SCSS?

Currently I'm using Nuxt.js with SCSS. In my general SCSS I'm using a map function for declaring the background colors based on the classname:

$colors:(
    lightgrey: #EBEDEE
);

@each $name, $hex in $colors {
    .has-background-#{"" + $name} {
        background-color: $hex;
    }
}

Now I'm very interested in using Nuxt Color Mode, but I tried everything but still doesn't work. I tried to declare the variables like nuxt-color-mode showed in the tutorial:

.light-mode {
    --primary: #196b69;
    --accent: #e69496;
}
.dark-mode {
    --primary: red;
    --accent: blue;
}

$colors:(
    primary: var(--primary);
    accent: var(--accent);
);

@each $name, $hex in $colors {
    .has-background-#{"" + $name} {
        background-color: $hex;
    }
}

But also that didn't work. Is it possible to use nuxt-color-mode with SCSS and how?
Thanks in advance.

Change theme without saving a cookie

Hey there, using this module and it works great so far.

Due to GDPR I am not allowed to save things in the user's browser, without receiving their consent first. But, when using:

this.$colorMode.preference = this.currentTheme

a cookie is automatically set. While I understand that the user experience is not exactly great when I can not save the theme selection for the next visit of the user, I still don't want to prevent users that didn't give me their consent (yet!) from trying out the alternative theme.

Is there a way to change the current theme without saving a cookie?

Trying to detect what is the users system preference

I am using the following line to set the users color mode preference:
this.$nuxt.$colorMode.preference = this.checked ? "dark" : "light";

As I understand it this should set the default preference of the user. When requesting the preference of the user I am then getting
this.$nuxt.$colorMode.preference = 'system'

I assume that here system is representing that this module will check for the stored cookie on the users browser and take the literal string value from there.

When trying to check what that value is I am still getting system (However when printing the entire ColorMode object I am actually getting 'dark'.

What is the correct way to understand what is the VALUE of the system preference?