有脚本。
方法1
弄一个.dark{}，放在body上(或者加一个别的标签反正把整个页面的其他东西全装进去)，所有样式都写一亮一暗，暗色写成后代选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
background-color: #f8f8f8;
color: #181818;
}
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.title {
font-size: 30pt;
font-weight: 600;
padding: 10pt 0;
text-align: center;
}
.subtitle {
text-align: center;
font-size: 14pt;
}
p {
font-size: 20pt;
line-height: 24pt;
}
p::before {
content: "";
width: 2em;
display: inline-block;
}
.dark {
background-color: #222;
color: #d0d0d0;
}
.dark .title{
background-color: inherit;
color: #fff;
}
.dark .subtitle{
background-color: inherit;
color: #c0c0c0;
}
.dark p{
background-color: inherit;
color: inherit;
}
</style>
</head>
<body>
<div class="title">
蜀道难
</div>
<div class="subtitle">李白</div>
<p>
噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。
</p>
<p>
问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！
</p>
<p>
剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
</p>
<button onclick="change()">切换色彩模式</button>
</body>
</html>
<script>
function change() {
var body = document.body;
if (body.getAttribute('class'))
body.setAttribute('class', '');
else
body.setAttribute('class', 'dark');
}
</script>
方法2
当然，也可以只写两个.light{}，.dark{}，其他全继承。不过不是很灵活，如果元素样式很花的话不应该用这个方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
color: inherit;
background-color: inherit;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.title {
font-size: 30pt;
font-weight: 600;
padding: 10pt 0;
text-align: center;
}
.subtitle {
text-align: center;
font-size: 14pt;
}
p {
font-size: 20pt;
line-height: 24pt;
}
p::before {
content: "";
width: 2em;
display: inline-block;
}
.light {
background-color: #f8f8f8;
color: #181818;
}
.dark {
background-color: #222;
color: #d0d0d0;
}
</style>
</head>
<body class="light">
<div class="title">
蜀道难
</div>
<div class="subtitle">李白</div>
<p>
噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。
</p>
<p>
问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！
</p>
<p>
剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
</p>
<button onclick="change()">切换色彩模式</button>
</body>
</html>
<script>
function change() {
var body = document.getElementsByTagName('body')[0];
if (body.getAttribute('class') == 'light')
body.setAttribute('class', 'dark');
else
body.setAttribute('class', 'light');
}
</script>
方法3
直接改样式表路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link id="color" href="css/light.css" rel="stylesheet" type="text/css">
<link href="css/app.css" rel="stylesheet" type="text/css">
</head>
<body class="light">
<div class="title">
蜀道难
</div>
<div class="subtitle">李白</div>
<p>
噫吁嚱，危乎高哉！蜀道之难，难于上天！！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。
</p>
<p>
问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！
</p>
<p>
剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
</p>
<button onclick="change()">切换色彩模式</button>
</body>
</html>
<script>
function change() {
var body = document.getElementById('color');
if (body.getAttribute('href') == 'css/light.css')
body.setAttribute('href', 'css/dark.css');
else
body.setAttribute('href', 'css/light.css');
}
</script>
如果还要自动适配设备的颜色模式可以用响应式@media (prefers-color-scheme:……)。