论css咋调节“亮-暗”色彩模式
有脚本。
方法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', '');elsebody.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');elsebody.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');elsebody.setAttribute('href', 'css/light.css');}
</script>
如果还要自动适配设备的颜色模式可以用响应式@media (prefers-color-scheme:……)
。
论css咋调节“亮-暗”色彩模式相关推荐
- 远程查看室内亮暗情况
远程查看室内亮暗情况 前期准备: 物联网平台: 软件准备: 硬件准备: 介绍: 模块介绍 技术规格 注意事项 项目实战: 硬件图 程序 Mind+ 当传感器检测到光线是亮时物联网平台接收到的数据: 情 ...
- python 灰度直方图_python3+opencv 使用灰度直方图来判断图片的亮暗操作
1.如何让计算机自动判断一张图是否偏暗?或是判断一张图是否是处于夜晚?我们可以先把图片转换为灰度图,然后根据灰度值的分布来判断,如: 我们可以从上图看到,晚上的图片的灰度值是集中在前段的,如0~30多 ...
- 算法题:一个圆环上有100个灯泡,灯泡有打开和关闭两种状态,灯泡的状态随机,按一个灯泡的开关,相邻的两个灯泡的状态也发生一次变化。比如暗-亮-暗,按中间灯泡,变化为亮-暗-亮。问设计一道算法,使得所有
算法题:一个圆环上有100个灯泡,灯泡有打开和关闭两种状态,灯泡的状态随机,按一个灯泡的开关,相邻的两个灯泡的状态也发生一次变化.比如暗-亮-暗,按中间灯泡,变化为亮-暗-亮.问设计一道算法,使得所有 ...
- PWM波控制LED灯的亮暗
在做蓝桥杯第九届省赛题的时候,遇到了这样一个题目:实现4个不同等级的LED亮度分布. 这个要求我们可以联想到第七届的省赛题,控制PWM波的输出,我们在这里也可以应用相同的原理,就是通过定时器来达到LE ...
- c51按键控制灯亮汇编语言,用一个按键控制LED灯亮/暗的汇编程序
今天又搞了一个小汇编,是用一个按键控制LED灯亮/暗的汇编程序.程序编好后,开始编译,发现又是通不过,找了好几遍也没找到原因,后来找枫雪大哥看了,才找出原因,原来编写程序时不能在中文环境下编写,不然就 ...
- IDEA亮暗两种风格转换
如题,两种工具有亮暗两种风格,设置步骤如下 步骤: 1.打开IntelliJ IDEA,点击[File] 2.点击[Settings],或者快捷键[Ctrl+Alt+s] 3.点击[Appearanc ...
- STM32使用延时控制LED灯亮暗变换,LED呼吸灯效果
STM32F407ZE 使用延时控制LED灯亮暗变换,实现LED呼吸灯效果 具体代码如下: main.c部分 #include <stm32f4xx.h> #include "s ...
- 光敏电阻控制小灯泡的亮暗代码编写
通过光敏电阻可以控制小灯泡的亮暗.要编写代码来实现这一功能,需要使用基于模拟的ADC(模拟数字转换器),把光敏电阻的输出转换成一个可操作的范围.然后使用PWM(脉宽调制)把ADC的输出转换成数字信号, ...
- android 快速亮暗屏_Android 亮屏,暗屏
1.亮屏和暗屏的控制 PowerManager pm = (PowerManager) getSystemService(Context.POWER_SERVICE); PowerManager.Wa ...
最新文章
- 实时语义分割--ICNet for Real-Time Semantic Segmentation on High-Resolution Images
- (经典)Hibernate多对多关系映射(五)
- java 如何去掉http debug日志_你居然还去服务器上捞日志,搭个日志收集系统难道不香吗?...
- java国家电网面试试题_国家电网笔试面试相关
- 双极型三极管共集电极、共基极放大电路
- 谷歌浏览器中打开IE
- vs连接mysql出错解决方法
- python 全局变量使用报错没有定义_python跨文件使用全局变量的实现
- txtv28pw河南某中学_有一种寒冷叫不穿秋裤!河南一中学班主任让学生列队挨个检查秋裤...
- 有一种爱情,叫沉、重!
- 英特尔核显自定义分辨率_英特尔核芯显卡设置如何操作【图文】
- azure mysql on vnet_Azure Database for MySQL (2) VNET rules
- 华为Android10怎样root,华为手机怎么root?详细的root教程在此
- 发现IGame中又一个大坑
- Google-indexing api使用
- ajax心得体会论文,AJAX重点知识的心得体会
- 山东大学2021算法期末
- 【健康管理师】常用健康监测指标
- 如何安装最新版Docker
- 【SystemC】(二)第一个SystemC程序