判断系统是否为黑暗主题

最新推荐文章于 2024-06-04 15:00:14 发布

AReTrnA

最新推荐文章于 2024-06-04 15:00:14 发布

阅读量2.7k

点赞数 2

分类专栏： HTML CSS JS 文章标签： css html5 javascript chrome css3

本文链接：https://blog.csdn.net/yenoxin/article/details/119865493

版权

HTML 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

判断系统是否为黑暗主题

介绍
获取
- - CSS 获取
  - JavaScript 获取
设置
- - CSS
  - HTML

介绍

黑暗主题变得越来越流行。随着在 Android 9+ 、Windows 和 iOS 13 中引入深色系统变体，越来越多的应用程序和网站开始提供其界面的深色版本。有些提供了在版本之间切换的选项，但也可以使用 CSS 或 JavaScript 检测主题。在下面的教程中，我将展示如何使用JavaScript 和 CSS 侦测系统黑暗主题并使用 CSS 更改主题色。

获取

CSS 获取

可以使用 @media (prefers-color-scheme: 主题) 来获取。


@media (prefers-color-scheme: light) { /*light : 浅色*/
  /*主题设置为深色。*/
  }
}
@media (prefers-color-scheme: dark) { /*dark : 深色*/
  /*主题设置为浅色。*/
}

JavaScript 获取

可以使用 window.matchMedia("(prefers-color-scheme: 主题)"); 来获取。


const isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)"); // 是深色
if (isDarkTheme.matches) { // 是深色
  // 主题设置为深色。
} else { // 不是深色
  // 主题设置为浅色。
}

设置

CSS

一般我会用 CSS 变量去改颜色比如：


:root { /*正常情况(浅色)*/
    --bgcolor: white;
    --textcolor: black;
}

@media (prefers-color-scheme: dark) { /*dark : 深色*/
	:root {
	    --bgcolor: black;
	    --textcolor: white;
	}
}

@media (prefers-color-scheme: light) { /*light : 浅色*/
	:root { 
	    --bgcolor: white;
	    --textcolor: black;
	}
}

Chrome 可行的HTML 代码：

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
         :root {
            /*正常情况(浅色)*/
            --bgcolor: white;
            --textcolor: black;
        }
        
        @media (prefers-color-scheme: dark) {
            /*dark : 深色*/
             :root {
                --bgcolor: black;
                --textcolor: white;
            }
        }
        
        body {
            background-color: var(--bgcolor);
            color: var(--textcolor);
        }
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>Hi</p>
</body>

</html>

就这，没了。拜。

AReTrnA

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
判断系统是否为黑暗主题

判断系统是否为黑暗主题介绍获取CSS 获取JavaScript 获取设置CSSHTML介绍黑暗主题变得越来越流行。随着在 Android 9+ 、Windows 和 iOS 13 中引入深色系统变体，越来越多的应用程序和网站开始提供其界面的深色版本。有些提供了在版本之间切换的选项，但也可以使用 CSS 或 JavaScript 检测主题。在下面的教程中，我将展示如何使用JavaScript 和 CSS 侦测系统黑暗主题并使用 CSS 更改主题色。获取CSS 获取可以使用 @media
复制链接

扫一扫