使用 Gatsby.js 搭建静态博客黑暗模式

2024-01-16 07:58

本文主要是介绍使用 Gatsby.js 搭建静态博客黑暗模式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

来源 | https://ssshooter.com/2020-06-25-gatsby-blog-8/

没想到久违的 Gatsby 系列还能继续写,最近为博客更新了黑暗模式和手动切换功能,顺便记录下来。当然下面的实现方案不限于 Gatsby 使用,对于其他框架,思路都大同小异。

方案 1

最初实现的方案是直接使用媒体查询和 css 变量。关键是把区分两个模式的变量抽离出来,分别配置两组变量,核心代码如下:

@media screen and (prefers-color-scheme: dark) {  :root {    --linkColor: #ec9bab;    --fontColor: #ecc3cb;    --codeBlock: #3c495b;    --code: #c3c7cb;    --divider: #3e4b5e;  }}@media screen and (prefers-color-scheme: light) {  :root {    --linkColor: #683741;    --fontColor: hsl(284, 20%, 30%);    --codeBlock: #3c495b;    --code: #c3c7cb;    --divider: #eee;  }}body {  background-color: var(--backgroundColor);  color: var(--fontColor);  transition: all 0.5s ease-in-out;}

(prism 用户还要自己整理一下两个模式的 prism 样式)

css 变量除了在 IE 不能用之外其他浏览器的适应性还算不错,如果必须适配 IE 的话需要另外写一份不用变量的样式保底。

方案 2

按上面的写法其实已经可以实现根据系统配置转换明亮和黑暗模式,但是要做到直接在网页通过一个切换按钮手动修改还是远远不够,方案 2 登场。

因为现在 JavaScript 不能改变系统级的明暗模式,只能获取和监听模式变化,所以手动操作铁定不能靠 prefers-color-scheme 了。

我们需要反过来通过 JavaScript 获取 color-scheme 然后告诉 CSS 明暗模式发生变化,这样的变化包括系统级的改变和用户在网页选择改变。

首先把两组变量的作用范围改为 class:

.light-theme {  --linkColor: #ec9bab;  --fontColor: #ecc3cb;  --codeBlock: #3c495b;  --code: #c3c7cb;  --divider: #3e4b5e;}.dark-theme {  --linkColor: #683741;  --fontColor: hsl(284, 20%, 30%);  --codeBlock: #3c495b;  --code: #c3c7cb;  --divider: #eee;}

下面这一段代码我写在 Layout.js 的 componentDidMount 中,只有这里才是服务器渲染的范围之外。

// setTheme 的实现setTheme = themeName => {  localStorage.setItem('theme', themeName)  document.documentElement.className = themeName + '-theme'  this.setState({    theme: themeName,  })}// 第一部分let localTheme = localStorage.getItem('theme')if (localTheme) {  if (localTheme === 'dark') {    this.setTheme('dark')  } else {    this.setTheme('light')  }} else if (window.matchMedia) {  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {    this.setTheme('dark')  } else {    this.setTheme('light')  }} else {  // default light  this.setTheme('light')}// 第二部分const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')darkModeMediaQuery.addListener(e => {  const darkModeOn = e.matches  if (darkModeOn) {    this.setTheme('dark')  } else {    this.setTheme('light')  }})

先讲 setTheme 的实现:

数据持久化

实现设置整个文档的 class,然后 CSS 根据 class 配置变量(而不是方案 1 的媒体查询)

修改组件状态

第一部分是页面初始化时处理页面主题的逻辑:

首先查询有无被保存到 localstorage 的主题,有的话直接使用

没有的话使用 JavaScript 查询系统明暗方案,然后按系统配置设定

上面两种都不可行的情况下默认使用 light

第二部分是 JavaScript 监听系统明暗方案修改,响应式地改变页面的明暗方案(意味着不需要刷新页面)

剩下的切换按钮就没什么特别的,所以不放代码了。

hack

最后附带一个处理画面闪烁的方法。

虽然已经在样式添加 transition 属性,但是从 JavaScript 程序知道用户需要的明暗模式前仍然有一段空挡。如果用户选择了黑暗模式,就会造成画面先是明亮模式,然后几百毫秒后变为黑暗模式的尴尬局面。

我的解决方案是先把页面 display 设为 none,在判断并设置完页面 class 之后再将页面设为可见,这样就避免了画面闪烁,但是页面展示时间会慢一点点点点。

document.documentElement.style.display = 'none'// 同步的判断程序document.documentElement.style.display = 'block'

本文完〜

这篇关于使用 Gatsby.js 搭建静态博客黑暗模式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/611830

相关文章

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

Windows下C++使用SQLitede的操作过程

《Windows下C++使用SQLitede的操作过程》本文介绍了Windows下C++使用SQLite的安装配置、CppSQLite库封装优势、核心功能(如数据库连接、事务管理)、跨平台支持及性能优... 目录Windows下C++使用SQLite1、安装2、代码示例CppSQLite:C++轻松操作SQ

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,:本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

《Python并行处理实战之如何使用ProcessPoolExecutor加速计算》Python提供了多种并行处理的方式,其中concurrent.futures模块的ProcessPoolExecu... 目录简介完整代码示例代码解释1. 导入必要的模块2. 定义处理函数3. 主函数4. 生成数字列表5.

Redis Cluster模式配置

《RedisCluster模式配置》:本文主要介绍RedisCluster模式配置,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录分片 一、分片的本质与核心价值二、分片实现方案对比 ‌三、分片算法详解1. ‌范围分片(顺序分片)‌2. ‌哈希分片3. ‌虚

Python中help()和dir()函数的使用

《Python中help()和dir()函数的使用》我们经常需要查看某个对象(如模块、类、函数等)的属性和方法,Python提供了两个内置函数help()和dir(),它们可以帮助我们快速了解代... 目录1. 引言2. help() 函数2.1 作用2.2 使用方法2.3 示例(1) 查看内置函数的帮助(

Linux脚本(shell)的使用方式

《Linux脚本(shell)的使用方式》:本文主要介绍Linux脚本(shell)的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录概述语法详解数学运算表达式Shell变量变量分类环境变量Shell内部变量自定义变量:定义、赋值自定义变量:引用、修改、删

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,:本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点:二、安装uv1. 通过pip安装2. 通过脚本安装验证安装:配置镜像源(可