详解web如何改变主题配色方法示例

目录
  • 正文
  • 一、通过在根元素定义选择器来改变主题
    • 定义class
    • 定义dateset
    • 自定义标签属性
  • 二、通过prefers-color-scheme来改变主题
  • 三、通过颜色反转来改变主题
  • 总结

正文

自从苹果系统支持了暗色主题之后，越来越多的网站开始支持暗色模式，来改善用户夜晚使用网站的舒适度，那么一般都是如何处理的呢.

在开始一个项目时，我们通常会将用到的主题色，和一些全局配置，通过css变量定义在根元素，注意，变量必须以"--"开头

:root {
  --color-primary: white;
}

以下是可以改变主题的几种方式

一、通过在根元素定义选择器来改变主题

定义class

html.dark {
  --docsearch-modal-background: #23272f;
  --docsearch-hit-background: #23272f;
  --docsearch-highlight-color: #149eca;
}

<html class="dark"></html>

定义dateset

:root[data-theme='dark'] {
    --color-primary: #3C7EFF;
}

<html date-theme='dark'></html>

// 设置页面根元素的 dataset
const doc = document.documentElement;
const newTheme = theme === 'light' ? 'dark' : 'light';
doc.dataset.theme = newTheme;

自定义标签属性

:root[arco-theme='dark'] {
    --color-primary: #3C7EFF;
}

<html arco-theme='dark'></html>

// 设置页面根元素的 dataset
const [theme, setTheme] = useStorage('arco-theme', 'light');
const doc = document.documentElement;
doc.setAttribute('arco-theme', 'dark');

样式一般定义在:root中，当然也可以定义在html、body标签中，目的是为了能够在全局使用

二、通过prefers-color-scheme来改变主题

通过媒体查询，获取系统主题，来改变网站主题. scheme有三个可选值，分别是light、dark 和 no-preference，代表着亮色主题、暗色主题和未知，大部分浏览器都支持该特性，可以在这里查看 caniuse.

:root {
      --font-color: black;
}

@media (prefers-color-scheme: dark) {
  :root {
      --font-color: white;
  }
}

获取主题色

const theme = window.matchMedia('(prefers-color-scheme: dark)');
if (theme.matches) { } else { }

通过通知，监听主题色的变化

// handleChange(event) { if (event.matches) {} else {} }
const theme = window.matchMedia('(prefers-color-scheme: dark)');
theme.addListener(handleChange);
theme.removeListener(handleChange);

三、通过颜色反转来改变主题

这种filter方式，就是所谓的一行代码改变主题的方式，加入如下代码即可，不过这种一刀切的方式不够灵活，有些元素不需要颜色反转，还需要再加一层hue-rotate(180deg)反转回来，不推荐使用.

// 颜色反转，色调反转
filter: invert(1) hue-rotate(180deg);

特殊纪念日，网站置灰，也是用filter来实现的

filter: grayscale(1);

总结

以上就是三种改变主题的方法，不过通常我们做法是使用dateset + media(prefers-color-scheme)结合的方式来处理. 优先使用dateset，如果用户没有设置dateset，就使用media来获取系统主题，然后设置即可，更多关于web改变主题配色的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • js 交互在Flutter 中使用 webview_flutter

    js 交互在Flutter 中使用 webview_flutter

    目录 正文 环境准备 最简示例 WebView 的小大 网页自己报告高度 无法修改页面 在网页中调用 Flutter 页面 拦截 url js 调用 JavaScriptChannel 定义的方法 总结 正文 已经有很多关于 Flutter WebView 的文章了,为什么还要写一篇.两个原因: Flutter WebView 是 Flutter 开发的必备技能 现有的文章都是关于老版本的,新版本 4.x 有了重要变化,基于 3.x 的代码很多要重写. WebView 的文章分两篇 在 Flut

  • 2023年了该了解下WebComponent使用教程

    目录 正文 三项主要技术 1.Custom elements (自定义元素) 生命周期函数 2.HTML templates(HTML 模板) 3.Shadow DOM(影子 DOM) 动态创建 webComponent 组件例子 正文 WebComponent 是官方定义的自定义组件实现方式,它可以让开发者不依赖任何第三方框架(如Vue,React)来实现自定义页面组件:达到组件复用效果 一个简单例子,让页面显示 hello world: <body> <!-- 使用组件的方式 --&

  • WebAssembly增强前端应用技巧详解

    目录 准备 开始 创建项目 打包 wasm 前端调用 使用 console.log 总结 准备 此篇文章我们主要使用 Rust 来编写我们的 WebAssembly 工具库然后在 React 应用进行使用.所以需要准备好下列的环境 Rust 开发环境(rustup.rustc.cargo 这些) 前端开发环境(node.npm 这些) wasm-pack (cargo install wasm-pack) 开始 开始前我们先要准备一个前端应用,这里我们使用 create-react-app 来创

  • webpack5新特性Asset Modules资源模块详解

    目录 正文 图片打包(asset/resource) publicPath asset/inline 模块 asset 模块 asset/source 模块 正文 webpack 可以将很多类型的文件写入最后打包的js文件,写入的方法有两种,一个是 Asset Modules 另一个是 Loaders 这一篇我们就来讨论 Asset Modules.Asset Modules(资源模块)是webpack5的新特性,它允许使用资源文件(字体,图标等)而无需配置额外 loader, webpack低

  • vue+webpack 更换主题N种方案优劣分析

    需求:由于业务需要,我们需要做多套皮肤 调研了下当前行业的实现方案,五花八门良莠不齐,在此总结下各种方案有优劣及复杂度,供大家快速定位到符合自己业务的方案,以vue 单页应用为业务场景 方式一:class切换方式 实现: 在每个需要更换的页面定义多个class,根据运行时标识动态的切换class名称实现加载不同的样式,这种方式较为简单 优点: 不需要修改构建工具相关 业务开发过程可以实现,没有限制 支持动态切换 缺点: 逻辑分散耦合在各个页面,一旦需要修改,涉及修改的页面较多 代码需要预先内置,

  • electron 中 webview的使用示例解析

    目录 正文 获取webview的dom webview 页面 webview页面的代码 新建public/preload.js文件 监听页面对否显示 禁止打开新窗口 刷新页面 上一页 下一页 正文 webview 想必都有所了解,比如:微信小程序嵌套H5 那么我们在electron中怎么使用webview呢? 我们先跟着官方文档展示一下,看是否能有效果: 若要在应用程序中嵌入网页, 请将 webview 标签添加到应用程序的被嵌入页面中 (这是将显示外来内容的应用程序页). 在最简单的例子中,

  • 详解web如何改变主题配色方法示例

    目录 正文 一.通过在根元素定义选择器来改变主题 定义class 定义dateset 自定义标签属性 二.通过prefers-color-scheme来改变主题 三.通过颜色反转来改变主题 总结 正文 自从苹果系统支持了暗色主题之后,越来越多的网站开始支持暗色模式,来改善用户夜晚使用网站的舒适度,那么一般都是如何处理的呢. 在开始一个项目时,我们通常会将用到的主题色,和一些全局配置,通过css变量定义在根元素,注意,变量必须以"--"开头 :root { --color-primary

  • 详解maven配置多仓库的方法示例

    刚接触maven就是在公司里配置好的,所以一直以来使用都没毛病,所以一直没有去动这些固有的东西. 但是,后来把公司的电脑拿回家之后,发现有的东西就搞不起来了.原因也看一下就明白了,因为在公司的时候用的是公司的maven私服,所以回家后,用不了也是正常. 但是,真的脱离了公司,自己就不能工作了吗?不可能吧. 难道一下开源工具都必须要依赖于公司的网络? 这明显是不合理的. 那么,就扯出本次文章的意义了,在家里,自然是要公有的maven仓库了,那么,怎样配置maven仓库才能让自己用起来顺心呢? 1.

  • 详解Matlab绘制3D玫瑰花的方法(内附旋转版本)

    详解Matlab绘制3D玫瑰花的方法(内附旋转版本)

    目录 1.玫瑰花绘制 绘制效果 完整代码 2.月季花绘制 绘制效果 完整代码 3.玫瑰配色 4.旋转版本 1.玫瑰花绘制 绘制效果 完整代码 function drawrose grid on [x,t]=meshgrid((0:24)./24,(0:0.5:575)./575.*20.*pi+4*pi); p=(pi/2)*exp(-t./(8*pi)); change=sin(15*t)/150; u=1-(1-mod(3.6*t,2*pi)./pi).^4./2+change; y=2*(

  • 详解Vue项目引入CreateJS的方法（亲测可用）

    1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS

  • 详解Tomcat出现404的解决方法

    Tomcat测试出现404问题出现的问题如下: HTTP状态 404 - 未找到 类型 状态报告 消息 请求的资源[/chapter06/IndexServlet]不可用 描述 源服务器未能找到目标资源的表示或者是不愿公开一个已经存在的资源表示. Apache Tomcat/9.0.37 问题原因,浏览器不能直接访问Java文件 问题的解决方法 1.提交表单时遇到此问题 <form name = "reg" action="/login" method=&qu

  • 详解java.lang.reflect.Modifier.isInterface()方法

    详解java.lang.reflect.Modifier.isInterface()方法 java.lang.reflect.Modifier.isInterface(int mod)方法判断如果给定mod参数包含final修饰符,则返回true,否则返回false. 声明 以下是java.lang.reflect.Modifier.isInterface()方法的声明. public static boolean isInterface(int mod) 参数 mod - 一组修饰符. 返回值

  • 详解Kotlin中的变量和方法

    详解Kotlin中的变量和方法 变量 Kotlin 有两个关键字定义变量:var 和 val, 变量的类型在后面. var 定义的是可变变量,变量可以被重复赋值.val 定义的是只读变量,相当于java的final变量. 变量的类型,如果可以根据赋值推测,可以省略. var name: String = "jason" name = "jame" val max = 10 常量 Java 定义常量用关键字 static final, Kotlin 没有static,

  • ThinkPHP函数详解之M方法和R方法

    首先给大家介绍ThinkPHP函数详解:M方法 M方法用于实例化一个基础模型类,和D方法的区别在于: 1.不需要自定义模型类,减少IO加载,性能较好: 2.实例化后只能调用基础模型类(默认是Model类)中的方法: 3.可以在实例化的时候指定表前缀.数据库和数据库的连接信息: D方法的强大则体现在你封装的自定义模型类有多强,不过随着新版ThinkPHP框架的基础模型类的功能越来越强大,M方法也比D方法越来越实用了. M方法的调用格式: M('[基础模型名:]模型名','数据表前缀','数据库连接

  • 对Django中static(静态)文件详解以及{% static %}标签的使用方法

    在一个网页中,不仅仅只有一个html骨架,还需要css样式文件,js执行文件以及一些图片等.因此在DTL中加载静态文件是一个必须要解决的问题.在DTL中,使用static标签来加载静态文件.要使用static标签,首先需要{% load static %}. 加载静态文件的步骤如下: 首先确保django.contrib.staticfiles已经添加到settings.INSTALLED_APPS中. 确保在settings.py中设置了STATIC_URL. 注意: 上面两条都是在创建Dja

  • 详解maven依赖冲突以及解决方法

    什么是依赖冲突 依赖冲突是指项目依赖的某一个jar包,有多个不同的版本,因而造成类包版本冲突 依赖冲突的原因 依赖冲突很经常是类包之间的间接依赖引起的.每个显式声明的类包都会依赖于一些其它的隐式类包,这些隐式的类包会被maven间接引入进来,从而造成类包冲突 如何解决依赖冲突 首先查看产生依赖冲突的类jar,其次找出我们不想要的依赖类jar,手工将其排除在外就可以了.具体执行步骤如下 1.查看依赖冲突 a.通过dependency:tree是命令来检查版本冲突 mvn -Dverbose dep

随机推荐