主题换肤——跟随系统

关于如何实现主题换肤呢,之前已经有一篇文章:

juejin.cn/post/731095...

这篇文章是对之前主题换肤的补充,跟随系统实现主题换肤的功能

最简单的方法:

ini 复制代码
<meta name="color-scheme" content="dark light"> 

而dark和light切换时样式的颜色是根据用户代理样式表中规定的颜色来变化的:

用户代理样式表(User agent stylesheet)是浏览器提供的默认样式表,用来给未显式样式化的 HTML 元素提供基本的样式。当你打开网页时,如果 HTML 文档没有指定某些样式或者没有链接到外部CSS文件,浏览器就会采用这些默认的样式来显示网页内容。这些样式可能包括字体大小、颜色、边距等等,确保即使在没有指定样式时,网页也能有一个基本的、通常可接受的外观。

想了解的可以看一下:

developer.mozilla.org/zh-CN/docs/...

drafts.csswg.org/css-color/#...

嫌自带的颜色太丑,那也可以搭配配合媒体查询的prefers-color-scheme属性去改变个别的颜色:

xml 复制代码
<!DOCTYPE html>
<html lang="en">
    <head> 
        <meta name="color-scheme" content="dark light"> 
        <style> 
            fieldset { 
                background-color: wheat; 
            } 
            
            @media (prefers-color-scheme: dark) { 
                fieldset { 
                    background-color: seagreen; 
                } 
                button {
                    background-color: aqua;
                }
            } 
         </style> 
    </head> 
    <body> 
        <form> 
            <fieldset> 
                <legend>换肤------跟随系统</legend> 
                <button type="button">button</button> 
            </fieldset> 
        </form> 
    </body> 
</html>

完完全全想要自己定制,也可以不加<meta name="color-scheme" content="dark light">,就自己写一套样式,然后用媒体查询的prefers-color-scheme属性将它应用到页面

关于图片如何跟随系统进行颜色变化:

xml 复制代码
<!-- 根据 prefers-color-scheme 为不同模式选择不同图片 --> 
<picture> 
    <source srcset="dark.png" media="(prefers-color-scheme: dark)" /> 
    <source srcset="light.png" media="(prefers-color-scheme: light)" /> 
    <img src="light.png" alt="" /> 
</picture> 
相关推荐
庸俗今天不摸鱼30 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下37 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码2 小时前
Spring Task 定时任务
java·前端·spring