前端判断系统主题
时间:2020-05-28
本文章向大家介绍前端判断系统主题,主要包括前端判断系统主题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
让网页适应系统主题及夜间模式。
1.使用CSS判断
使用媒介查询prefers-color-scheme
,支持dark,light,no-preference三种模式。
/*深色*/ @media (prefers-color-scheme: dark) { body { background: rgb(53, 54, 58); color: rgba(238,238,238,1); } } /*浅色*/ @media (prefers-color-scheme: light) { body { background: rgb(255,255,255); color: rgba(51,51,51,1); } }
2.js判断
/*判断是否支持主题色*/ if (window.matchMedia('(prefers-color-scheme)').media === 'not all') { console.log('Browser doesn\'t support dark mode'); } /*判断是否处于深色模式*/ if(window.matchMedia('(prefers-color-scheme: dark)').matches){ //Do some thing } /*判断是否处于浅色模式*/ if(window.matchMedia('(prefers-color-scheme: light)').matches){ //Do some thing } /*模式切换听器*/ var listeners={ dark: function(mediaQueryList ){ if(mediaQueryList.matches){ alert('您切换到深色模式了!') } }, light: function(mediaQueryList){ if(mediaQueryList.matches){ alert('您切换到浅色模式了!') } } } window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark) window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)
原文地址:https://www.cnblogs.com/ysxq/p/12979525.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法