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