!theme-mode

Try it out on the Master CSS documentation site.

Features

Vanilla, Next, React, Vue, Svelte, and Master CSS are available:

* ⚡️ Ultra-lightweight ~1.2KB
* 🌈 Switch between light, dark, and system
* 💖 Sync with system theme preferences
* 💾 Store the user's preference in localStorage
* 💫 Access theme preferences and modes through context
* 🧩 Built-in "use client" directive

Why should I use this?

The prefers-color-scheme cannot force override to the specified color mode. Once you want to switch themes, you cannot use @media (prefers-color-scheme: dark).

https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting

How does this work?

This package automatically switches themes using class="" and color-scheme:; that's it.
``html

Hello World

`
To view the source code examples:

- React: https://github.com/master-co/theme-mode/tree/main/examples/react
- Vue: https://github.com/master-co/theme-mode/tree/main/examples/vue
- Svelte: https://github.com/master-co/theme-mode/tree/main/examples/svelte

Getting Started

Install the package depending on your framework.

$3

`bash
npm install theme-mode
`
`js
import ThemeMode from 'theme-mode'

const themeMode = new ThemeMode().init()

// Set preference anywhere to switch theme modes.
themeMode.preference = 'dark'
`

$3


`bash
npm install @master/theme-mode.react
`
`tsx
import ThemeModeProvider from '@master/theme-mode.react'

export default function App({ children }) {
return (

{children}

)
}
`

$3


`bash
npm install @master/theme-mode.vue
`
`vue


`

$3


`bash
npm install @master/theme-mode.svelte
`
`svelte


...

`

Basic usage

$3

You can set the default theme mode when the user has not set a theme preference, such as common light or dark mode.
`tsx
...
`
Rendered as:
`html
…
`

$3

Automatically switches modes based on the user's system preference.
`tsx
...
`
Rendered as:
`html
…

…
`
> Note: CSS only supports light and dark modes for system preferences.

$3

By default options.store is set to 'theme-preference', which uses this key to set local storage when the preference is changed.

In this way, the theme preference set last time will be applied when the user visits or refreshes the website again.

To disable local storage, set it to false.
`tsx
...
`

Apply styles based on theme modes


You can now create selector-driven CSS themes using tools like Master CSS.
`html







`

Create a theme-switching select

$3

`tsx
import { useThemeMode } from '@master/theme-mode.react'

export default function ThemeModeSelect() {
const themeMode = useThemeMode()
return (

{themeMode.value === 'dark' ? '🌜' : '☀️'} {themeMode.preference}
value={themeMode.preference}
onChange={(event) => themeMode.preference = event.target.value}>
☀️ Light
🌜 Dark
System


)
}
`

$3


`vue


`

$3


`svelte

{$themeMode.value}
{$themeMode.preference}

☀️ Light
🌜 Dark
System

`

Avoid FOUC

If you've pre-rendered your CSS styles to the page to improve the page loading and first-render experience, it's crucial to initialize the theme mode in advance.

By default, three modules of minified advanced initial scripts for different default themes are exported:

- theme-mode/pre-init: https://github.com/master-co/theme-mode/tree/main/packages/core/src/pre-init.iife.min.ts
- theme-mode/pre-init-light: https://github.com/master-co/theme-mode/tree/main/packages/core/src/pre-init-light.iife.min.ts
- theme-mode/pre-init-dark: https://github.com/master-co/theme-mode/tree/main/packages/core/src/pre-init-dark.iife.min.ts

You have to use the build tool to inject these original scripts into HTML , taking Next.js as an example:
`tsx
import PRE_INIT_THEME_MODE_SCRIPT from '!!raw-loader!theme-mode/pre-init';

export default async function RootLayout({ children }: {
children: JSX.Element
}) {
return (



...

...

)
}
`

Or copy them directly:
`js
const preference = localStorage.getItem('theme-preference') || 'system';
const value = preference === 'system'
? matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light'
: preference;

document.documentElement.classList.add(value);
if (['dark', 'light'].includes(value)) document.documentElement.style.colorScheme = value;
`

Those JS resources cannot be loaded from external because this is a critical script for the first painting of the page.

Options

$3

Specify the default theme preference.
- Default: undefined
- Value: 'dark' | 'light' | 'system' | string

$3

Enable local storage and specify the key for localStorage.
- Default: 'theme-preference'
- Value: 'theme-preference' | string | false

Properties

$3

Set or get the current theme preference.
- Default: undefined
- Value: 'dark' | 'light' | 'system' | string

$3

Set or get the current theme mode.
- Default: undefined
- Value: 'dark' | 'light' | string

$3

Get the currently stored theme preference.
- Default: undefined
- Value: 'dark' | 'light' | string

$3

Get the theme mode of the current system
- Default: undefined
- Value: 'dark' | 'light' | string`

Methods

$3

Initialize the default theme mode. This is usually performed after the DOM has been initialized.

$3

Destroy the theme mode, including removing media query listeners.

Community

The Master community can be found here:

- Discuss on GitHub - Ask questions, voice ideas, and do any other discussion
- Join our Discord Server - Casually chat with other people using the language ^{_{✓ 中文}}

_{Our 《 Code of Conduct 》 applies to all Master community channels.}

Contributing

Please see our CONTRIBUTING for workflow.