---
category: Getting Started
title: Dark Mode
subTitle: Dark Mode
icon: doc-darkmode
localeCode: en-US
order: 5
---
## Dark mode
🤩 Semi's default theme or custom themes configured through [Semi DSM](/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.
## 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](/en-US/basic/tokens)
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 switching
````css
// css
body {
color: var(--semi-color-text-0);
background-color: var( --semi-color-bg-0);
}
````
## How 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:
```jsx
const body = document.body;
if (body.hasAttribute('theme-mode')) {
body.removeAttribute('theme-mode');
} else {
body.setAttribute('theme-mode', 'dark');
}
```
For instance:
```jsx live=true
import React from 'react';
import { Button } from '@douyinfe/semi-ui';
function Demo() {
const switchMode = () => {
const body = document.body;
if (body.hasAttribute('theme-mode')) {
body.removeAttribute('theme-mode');
// Notify our site to update current mode
window.setMode('light');
} else {
body.setAttribute('theme-mode', 'dark');
// Notify our site to update current mode
window.setMode('dark');
}
};
return (
);
}
```
## 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
](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/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:
```jsx
const mql = window.matchMedia('(prefers-color-scheme: dark)');
function matchMode(e) {
const body = document.body;
if (e.matches) {
if (!body.hasAttribute('theme-mode')) {
body.setAttribute('theme-mode', 'dark');
}
} else {
if (body.hasAttribute('theme-mode')) {
body.removeAttribute('theme-mode');
}
}
}
mql.addListener(matchMode);
```
## 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
```jsx live=true dir="column" hideInDSM
import React from 'react';
import { Layout, Nav, Button, Breadcrumb, Avatar, Steps, Pagination, Row, Badge, Tag, Rating, Tooltip, Timeline, Popover } from '@douyinfe/semi-ui';
import { IconSemiLogo, IconCamera, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting, IconEdit, IconList } from '@douyinfe/semi-icons';
() => {
const { Header, Footer, Sider, Content } = Layout;
const [mode, setMode] = useState('semi-always-dark');
const switchMode = () => {
const newMode = mode === 'semi-always-dark' ? 'semi-always-light' : 'semi-always-dark';
setMode(newMode);
};
const rowStyle = { margin: '16px 10px' };
const badgeStyle = {
width: '42px',
height: '42px',
borderRadius: '4px',
display: 'inline-block',
};
const tagStyle = { marginRight: 8, marginBottom: 8 };
return (
<>