主题

通过CSS定制化主题可以很方便的改变页面的外观和样式，以实现不同的视觉效果和用户体验。通过定制主题，可以使网站、应用或界面适应不同的设计需求、品牌标识或用户偏好。

定义css主题变量

目前业界比较流行的主题切换方案是使用CSS变量，通过设置不同的CSS变量值来改变主题。

首先，你需要在global.css中定义CSS变量，并设置默认值,

global.css

:root {
    /* 全局主色、次要色 */
    --m-color-secondary: #e6f7ff; /* primary-1 */
    --m-color-primary: #1890ff; /* primary-6 */

    /* 基于主色衍生出的其他颜色 */
    --m-color-select: #e6f7ff; /* primary-1 */
    --m-color-hover: #40a9ff; /* primary-5 */
    --m-color-click: #096dd9; /* primary-7 */

    /* 功能色 */
    --m-color-link: #1890ff;
    --m-color-success: #1890ff;
    --m-color-waring: #faad14;
    --m-color-error: #ff4d4f;

    /* 中性色，一般用在文字上 */
    --m-color-title: rgb(0 0 0 / 0.9);
    --m-color-text-primary: rgb(0 0 0 / 0.9);
    --m-color-text-secondary: rgb(0 0 0 / 0.7);
    --m-color-disable: rgb(0 0 0 / 0.3);
    --m-color-border: rgb(0 0 0 / 0.2);
    --m-color-divider: rgb(0 0 0 / 0.1);
    --m-color-bg-primary: rgb(0 0 0 / 0.06);
    --m-color-bg-secondary: rgb(0 0 0 / 0.03);
}

.dark {
    --m-color-title: rgb(255 255 255 / 0.9);
    --m-color-text-primary: rgb(255 255 255 / 0.9);
    --m-color-text-secondary: rgb(255 255 255 / 0.7);
    --m-color-disable: rgb(255 255 255 / 0.3);
    --m-color-border: rgb(255 255 255 / 0.2);
    --m-color-divider: rgb(255 255 255 / 0.1);
    --m-color-bg-primary: rgb(255 255 255 / 0.08);
    --m-color-bg-secondary: rgb(255 255 255 / 0.04);
}

其实在切换主题色的时候，最主要的其实就是中性色的变化，因为中性色是页面中占据着很大比重的一块区域。 而主色其实再切换的时候，差距不是特别大，可以手动微调。

切换主题

切换主题其实很简单，只需要在页面中添加一个按钮，用来动态添加.dark类，就可以实现切换主题的功能。

app/header.jsx

export default function Header() {
    function switchTheme() {
        document.body.classList.toggle('dark')
    }
    return (
        <button onclick={switchTheme}>toggle</button>
    )
}