Start · Dark Mode
Dark Mode
Dark mode
🤩 Semi's default theme or custom themes configured through Semi DSM come with both light and dark modes, which can be easily switched.
🌒 Semi also supports the use of dark mode in a partial area of the page.
🌒 Semi also supports the use of dark mode in a partial area of the page.
Recommended settings
Semi will automatically mount the global color palette on the body element. We have built in some commonly used CSS Tokens. For detailed Token details, please refer to Design Variables
We recommend that you configure
color
and background-color
on the body, your business components can automatically inherit the default background color and text color from the body, and adaptive light/dark color switchingHow to switch
To use Dark Mode, you could simply add
[theme-mode='dark']
to body
in any way you prefer. Here is a quick idea:For instance:
Keep Consistency with System Theme
If you want the mode of the site to change with the system setting, you may find this property Prefers-color-scheme
helpful. Please pay attention that this property is experimental. It asks for browser compatibility (Chrome >= 76, Safari >= 12.1) and you may expect behavior to change in the future.
To change system setting in macOS, go to System Preferences -> General -> Appearance
Since we do not recommend modifying the content of the npm theme package directly, you could add a listener for this property using js. Here is another example:
Block Dark/Light Mode
Semi 2.0 natively supports block dark/bright color mode, and you can add
.semi-always-dark
or .semi-always-light
to areas that require block dark or bright colors as needed.Note: this is not work for pop-up layers or components