---
category: Getting Started
title: Dark Mode
subTitle: Dark Mode
icon: doc-darkmode
localeCode: en-US
order: 4
---
## Dark mode
Semi's default theme and custom themes configured through Theme Store 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.
## 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, Skeleton, Avatar } from '@douyinfe/semi-ui';
import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting } 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 (
<>