基于 GeneratePress 的子主题以及暗色模式: 开学前的最后维护

作者

前言

开学将至（2022.08.31 开学并举行期初检测），今天是暑假内例行最后一次站点维护。开学后便要面临 CSP-J 初赛，还得复习，几乎没时间维护 Blog，所以先填填坑。

基于 GeneratePress 的子主题

因为想更改 WordPress 的 404 页面，所以研究了一下怎么改，然后就开始研究子主题。
请参考 zh-cn:子主题 « WordPress Codex。

GeneratePress 暗色模式实现

根据 How can I enable Dark mode on theme? - GeneratePress 实现。
分享一下我的暗色模式实现，能自动检测设备上的暗色模式并进行匹配：（直接放入子主题 gpchild 的 style.css 即可）

/*
Theme Name: GP Child
Description: Child theme for GeneratePress 
Author: PixelWine
Template: generatepress
*/
@import url("../generatepress/style.css");
:root {
    --dm-contrast: #eeeee0;
    --dm-contrast-2: #f7f8f9;
    --dm-contrast-3: #f7f8f9;
    --dm-base: #b2b2be;
    --dm-base-2: #575760;
    --dm-base-3: #252127;
    --dm-accent: #3d85c6;
}
@media (prefers-color-scheme: dark) {
    :root {
        --contrast: var(--dm-contrast);
        --contrast-2: var(--dm-contrast-2);
        --contrast-3: var(--dm-contrast-3);
        --base: var(--dm-base);
        --base-2: var(--dm-base-2);
        --base-3: var(--dm-base-3);
        --accent: var(--dm-accent);
    }
}

Thanks

本文部分内容参考自：

  1. zh-cn:子主题 « WordPress Codex
  2. How can I enable Dark mode on theme? - GeneratePress
  3. Color Hex Color Codes

感谢以上网站、博客的内容创作者的贡献。