Table of Contents  目 录
文章目录

夜间模式

由 四月浅森 发布
8月18日更新:
  1. 适配Bubble 4.0.1版本

dark-for-bubble-4.0.1.css

7月28日更新

这个版本适配 Bubble 3.x (不再建议使用,建议升级到4.0.1版本)

dark.css

  1. 修改了一些看起来眼睛很累的配色

  2. 优化了一些注释、或者描述

开始(废话)

之前写好的文章内容被我误删了(就是下面那个空白的文件),所以这是重发的一篇

经过不懈努力,我给全站上了夜间模式,因为Bubble主题默认没有暗色,作者目前也暂时没有支持的计划,所以我就自己动手了,这是效果

dark2.png

Bubble主题默认只有白色,在夜晚突然切换到白色界面感觉眼睛都睁不开了,说实话这个配色我自己感觉还是非常满意

如果你也正在使用Bubble主题

如果你也正在使用Bubble主题,可以直接将css文件引入,过程非常的简单

  1. 下载4.0.1版本的css文件(dark-for-bubble-4.0.1.css)到电脑上
  2. 将下载的css文件放到themes/Bubble/assets/css目录里
  3. 打开themes/Bubble/header.php
  4. 并在63行左右(其实只要在header标签内都可以)插入下面那行代码,粘贴过去就ok)然后保存

因为html代码总是被解析了所以我只好放在txt文件里了

<link type="text/css" href="<?php $this->options->themeUrl("assets/css/dark-for-bubble-4.0.1.css"); ?>" rel="stylesheet">

图片演示

教程.png


以下写给开发者的内容

夜间模式的切换

夜间模式使用@media(prefers-color-scheme: dark)实现,这个切换完全是由浏览器或者操作系统决定的,说实话我当时也是研究了好久才知道这个

废话

除了本站,还有其他许多网站也支持个特性,我已知的有Mcbbs的移动端和Github的移动端,其它的还有待去发现

接下来以我常用的浏览器Via和Edge为例,其它浏览器操作方式应该是类似的

以安卓平台的Via浏览器为例

点击右下角打开菜单,然后点击夜间模式按钮即可生效(理论上是即使生效的,但有时候需要刷新一下)

to_dark_on_via.jpg

再以Windows平台的Microsoft Edge浏览器为例

点击右上角打开设置后,依次点击外观->默认主题进行切换就好,系统模式可能是参考的Windows的应用颜色,如有错误欢迎指出

to_dark_on_edge.png

如果需要进行调试

这里以Microsoft Edge浏览器为例(Google Chrome操作方式完全一样)

debuging.png


  • 分类: Web