更新深色模式主题并支持 prefers-color-scheme

自己给博客写的主题 Fuji 正在进行大改版,顺手也把夜间模式 (深色模式、黑暗模式?都差不多) 进行了改版以适配 prefers-color-scheme

v1 的旧实现方法

起初写主题的时候深色模式用了最基础的办法,也是兼容性最好的办法。给 body 加上 data-theme 属性,根据属性值是 light 还是 dark 判断主题。CSS 中独立写出两种配色,分别包括在 body[data-theme='light']body[data-theme='light'] 块内。

直接维护两套样式的方法清晰直观,但会造成冗余代码,而且构建一时爽、维护火葬场。

   3 分钟  htmljavascriptcss

Web 基础、HTML 与 CSS 笔记

Web 基础、HTML 与 CSS 笔记,随着自己开发中遇到的各种问题而逐渐更新。

   4 分钟  htmlcss

使用 ProgressBar.js 为页面添加浏览进度条

在给自己博客写主题的时候,计划要加个返回页面顶部的按钮。既然按钮也计划上了,干脆又决定在上面顺便集成一个进度条来显示当前的阅读进度。作为懒人模范的我自然又开始想着 Ctrl+C 了,找了一圈后发现个很不错的轮子 ProgressBar.js

ProgressBar.js 能借助 SVG 生成各种形状的响应式进度条。它本身提供了线形,圆形和半圆形等形状,也可以用 Adobe Illustrator 之类的矢量图形编辑器创建自己想要的自定义图形。

   3 分钟  htmlcssjavascript