1、CSS 变量

使用CSS变量来定义主题相关的颜色、字体、间距等属性，然后在不同主题下修改这些变量的值。这样，只需要修改少数变量，就可以改变整个主题的外观；

html结构

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>CSS Variable Demo</title></head><body><div class="container"><h1>Dynamic Theme Switching</h1><button id="dark-theme">Dark Theme</button><button id="light-theme">Light Theme</button></div></body><script src="script.js"></script></html>

样式表

:root {--bg-color: white;--text-color: black;
}body {background-color: var(--bg-color);color: var(--text-color);
}.container {padding: 20px;border: 2px solid var(--text-color);
}

JavaScript 代码（script.js）

const darkThemeButton = document.getElementById('dark-theme');
const lightThemeButton = document.getElementById('light-theme');darkThemeButton.addEventListener('click', () => {document.documentElement.style.setProperty('--bg-color', 'black');document.documentElement.style.setProperty('--text-color', 'white');
});lightThemeButton.addEventListener('click', () => {document.documentElement.style.setProperty('--bg-color', 'white');document.documentElement.style.setProperty('--text-color', 'black');
});

在这个示例中，我们使用了CSS变量来定义背景色（–bg-color）和文字颜色（–text-color），并将这些变量用于样式表中的各个地方。在按钮点击事件中，动态地改变了这些变量的值，从而实现了主题的切换。

2、样式表切换

（1）准备不同的样式表：首先，准备好你想要切换的不同样式表。每个样式表都包含了对应主题的样式规则。

（2）在HTML中引入默认样式表：在你的HTML文件中，通过标签引入一个默认的样式表，这将是初始加载的主题

<link rel="stylesheet" id="theme-stylesheet" href="default.css">

（3）切换主题的JavaScript代码

// 获取样式表元素
const themeStylesheet = document.getElementById('theme-stylesheet');// 切换主题的函数
function switchTheme(themeName) {// 根据主题名拼接对应的样式表路径const newThemeUrl = themeName + '.css';// 修改样式表的 href 属性themeStylesheet.setAttribute('href', newThemeUrl);
}// 通过事件等方式调用 switchTheme 函数，传入不同的主题名称

(4) 触发切换主题

// 切换主题按钮
const themeSwitchButton = document.getElementById('theme-switch-button');themeSwitchButton.addEventListener('click', () => {// 传入不同的主题名称，如 'dark', 'light', 'colorful' 等switchTheme('dark'); // 切换到暗黑主题
});

3、CSS 预处理器

（1）使用预处理器的功能来定义不同主题的变量，在运行时动态切换主题、切换类名、添加样式或其他JavaScript方法来实现；

这个和切换样式表有点类似；

// 默认主题
$bg-color: white;
$text-color: black;// 暗黑主题
$dark-bg-color: black;
$dark-text-color: white;// 根据变量生成样式
body {background-color: $bg-color;color: $text-color;
}// 暗黑主题样式
.dark-theme {body {background-color: $dark-bg-color;color: $dark-text-color;}
}

按钮点击时给根元素添加对应的类名从而改变样式

document.documentElement.classList.toggle('dark-theme');

可以根据预处理器的特性和功能选择适合项目的方法、比如less和sass中可以使用Mixin来定义不同主题的样式在不同的地方引用它们、选择器嵌套等方法；

4、使用CSS-in-JS库

（1）如使用styled-components库

创建主题文件（themes.js）

// themes.jsexport const lightTheme = {backgroundColor: 'white',textColor: 'black',
};export const darkTheme = {backgroundColor: 'black',textColor: 'white',
};

创建组件（ThemeSwitcher.js）

// ThemeSwitcher.jsimport React, { useState } from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { lightTheme, darkTheme } from './themes';const Container = styled.div`text-align: center;
`;const Button = styled.button`background-color: ${(props) => props.theme.backgroundColor};color: ${(props) => props.theme.textColor};padding: 10px 20px;border: none;cursor: pointer;
`;const ThemeSwitcher = () => {const [currentTheme, setCurrentTheme] = useState(lightTheme);const toggleTheme = () => {setCurrentTheme(currentTheme === lightTheme ? darkTheme : lightTheme);};return (<ThemeProvider theme={currentTheme}><Container><h1>Theme Switcher Demo</h1><Button onClick={toggleTheme}>Toggle Theme</Button></Container></ThemeProvider>);
};export default ThemeSwitcher;