A lightweight utility for switching CSS theme modes
npm install theme-modeTry it out on the Master CSS documentation site.
* β‘οΈ 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
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
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
Dark
Light
Christmas
`Create a theme-switching select
$3
`tsx
import { useThemeMode } from '@master/theme-mode.react'export default function ThemeModeSelect() {
const themeMode = useThemeMode()
return (
)
}
`$3
`vue
`$3
`svelte
{$themeMode.value}
{$themeMode.preference}
`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.tsYou 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 | falseProperties
$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`- 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.