What's the most reliable way to detect if a user's system/browser is set to dark or light mode using
I want to find out the default theme settings for a browser/system without using any plugins
2 Replies
Hi @Sagar Kapoor. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The most reliable way to detect if a user's system or browser is set to dark or light mode—without using any plugins—is to use the CSS media query
prefers-color-scheme. This is a standard browser feature and works independently of any Nuxt or Vue plugins.
You can check the user's preference in JavaScript like this:
- isDarkMode will be true if the system/browser is set to dark mode.
- isLightMode will be true if set to light mode.
This approach is not Nuxt-specific and does not require any plugins or modules. However, if you want to integrate this with Nuxt's theming system, Nuxt UI and the @nuxtjs/color-mode module use this same mechanism under the hood to determine the system preference when the theme is set to "system" mode, but your question was specifically about not using plugins, so the above is the direct browser-native solution.
The knowledge sources confirm that Nuxt UI and @nuxtjs/color-mode use the system preference for "system" mode, but do not provide additional methods beyond this standard approach Color Mode in Nuxt UI.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@565461230060306432> Kapa.ai is still learning and improving, please let me know how I did by reacting below.