feat: 黑暗模式 - Githubissues

YuziO2 commented 1 year ago

在menu处增加了主题的切换选项，有浅色、深色和跟随系统三种选项。实现是借鉴tailwind的做法在根元素增加class='dark'来区别的。目前的缺陷：颜色我是比较随心的配的，作者可以根据喜好修改一下，建议把颜色放进:root里面，这样方便维护。另外评论区的颜色切换我只适配了waline一种。

YuziO2 commented 1 year ago

效果可参考：blog.yuzi.dev

YuziO2 commented 1 year ago

效果可参考：blog.yuzi.dev

「打开的时候记得清空缓存」

argvchs commented 1 year ago

@YuziO2

。。。似乎还有一些颜色没有调好（例如归档，代码高亮，滚动条边框，标签分类按钮颜色）

但是我最近每天都要打模拟赛，没有时间，所以您能不能帮我调一下颜色？qwq

还有一些建议：

为什么在 var 外面套一层 rgb？？应该写到变量里面啊
```
:root { --color: rgb(0, 0, 0); }
a { color: var(--color); }
```
所有需要切换的颜色都应该写到 root 里面，在选择器前面加 :root.dark 不好看
切换的时候不需要跟随系统，初始时（还没设置 localStorage 时）设置为系统主题就可以了

另外，似乎其他评论系统都不支持切换黑暗模式（？

YuziO2 commented 1 year ago

@YuziO2

。。。似乎还有一些颜色没有调好（例如归档，代码高亮，滚动条边框，标签分类按钮颜色）

但是我最近每天都要打模拟赛，没有时间，所以您能不能帮我调一下颜色？qwq

还有一些建议：
为什么在 var 外面套一层 rgb？？应该写到变量里面啊
:root { --color: rgb(0, 0, 0); }
a { color: var(--color); }
所有需要切换的颜色都应该写到 root 里面，在选择器前面加 :root.dark 不好看

切换的时候不需要跟随系统，初始时（还没设置 localStorage 时）设置为系统主题就可以了
另外，似乎其他评论系统都不支持切换黑暗模式（？

我不会调色啊，还是大佬您来调罢，不着急。变量这个我之后稍微改改。另外第三点我不是很明白

argvchs commented 1 year ago

@YuziO2 。。。我也不会调色啊（

然后第三个是这样，若 localStorage 没有设置则设置为系统主题

data() {
    return {
        // ...
        theme: localStorage.getItem("theme"),
    };
},
created() {
    // ...
    if (this.theme === null) {
        let media = window.matchMedia("(prefers-color-scheme: dark)");
        this.theme = media.matches ? "dark" : "light";
    }
    document.documentElement.classList.add(this.theme);
    document.addEventListener("beforeunload", () => localStorage.setItem("theme", this.theme));
},
methods: {
    handleThemeSwitch() {
        document.documentElement.classList.remove(this.theme);
        this.theme = this.theme == "light" ? "dark" : "light";
        document.documentElement.classList.add(this.theme);
    },
},

YuziO2 commented 1 year ago

@YuziO2 。。。我也不会调色啊（

然后第三个是这样，若 localStorage 没有设置则设置为系统主题

data() {
    return {
        // ...
        theme: localStorage.getItem("theme"),
    };
},
created() {
    // ...
    if (this.theme === null) {
        let media = window.matchMedia("(prefers-color-scheme: dark)");
        this.theme = media.matches ? "dark" : "light";
    }
    document.documentElement.classList.add(this.theme);
    document.addEventListener("beforeunload", () => localStorage.setItem("theme", this.theme));
},
methods: {
    handleThemeSwitch() {
        document.documentElement.classList.remove(this.theme);
        this.theme = this.theme == "light" ? "dark" : "light";
        document.documentElement.classList.add(this.theme);
    },
},

根据您的建议重构了一下，您的实现如果切换了主题就没法变回跟随系统了，我稍微修改了下。另外捉个虫，是window.addEventListener("beforeunload", () =>{ /*...*/ }不是document。

argvchs commented 1 year ago

@YuziO2 ……不是，为什么要有一个“跟随系统主题”

这样会让人点切换按钮的时候感到奇怪（为什么点两次才能切换？）

只有在创建 localStorage 的时候查询一下系统主题，或者直接默认 light 就可以了啊

argvchs commented 1 year ago

其实还有另外一种方案，在没有手动切换时跟随系统，否则使用手动切换的主题

vuejs.org 也是这样实现的

data() {
    return {
        // ...
        theme: localStorage.getItem("theme"),
    };
},
created() {
    // ...
    if (this.theme === null) {
        let media = window.matchMedia("(prefers-color-scheme: dark)");
        this.theme = media.matches ? "dark" : "light";
    }
    document.documentElement.classList.add(this.theme);
},
methods: {
    handleThemeSwitch() {
        document.documentElement.classList.remove(this.theme);
        this.theme = this.theme == "light" ? "dark" : "light";
        localStorage.setItem("theme", this.theme);
        document.documentElement.classList.add(this.theme);
    },
},

YuziO2 commented 1 year ago

@YuziO2 ……不是，为什么要有一个“跟随系统主题”

这样会让人点切换按钮的时候感到奇怪（为什么点两次才能切换？）

只有在创建 localStorage 的时候查询一下系统主题，或者直接默认 light 就可以了啊

因为系统主题可能会变呀，我可以设置晚上是黑暗模式，白天是浅色模式，我肯定希望网站也有跟随系统的选项啊。

YuziO2 commented 1 year ago

通过设定link的disabled属性来适配hljs的黑暗模式

argvchs commented 1 year ago

@YuziO2 终于考完初赛了（

YuziO2#1 简化了一下代码，if-else 并不总是比 ?: 更可读，有时反而越压行越有可读性，长的代码却会显得复杂

。。但是还有很多颜色没有调好，看着这一坨 main.css 真的不知道从哪里开始调了

YuziO2 commented 1 year ago

@YuziO2 终于考完初赛了（

YuziO2#1 简化了一下代码，if-else 并不总是比 ?: 更可读，有时反而越压行越有可读性，长的代码却会显得复杂

。。但是还有很多颜色没有调好，看着这一坨 main.css 真的不知道从哪里开始调了

感觉还差archive里面的必须改之外，其它的还暂时能读？😳

argvchs commented 1 year ago

@YuziO2 具体的，这些似乎还需要调一下：代码块边框，categories tags 按钮背景和边框，blockquote 背景，table 背景，图片预览背景，搜索框背景，滚动条颜色和边框，密码框背景和边框，导航栏背景，阅读全文背景和颜色，archives 背景，archives 左上角的点的背景……

LynxCatTheThird commented 1 year ago

另外，似乎其他评论系统都不支持切换黑暗模式（？

不仅不支持暗色模式，包括字号、布局等都不对。像 Butterfly 那样的大主题可能还会有评论的适配，其它的就只能自力更生……

此外，提交下我当时为自己整的“暗色模式”适配 Twikoo 的 CSS

YuziO2 commented 1 year ago

另外，似乎其他评论系统都不支持切换黑暗模式（？

不仅不支持暗色模式，包括字号、布局等都不对。像 Butterfly 那样的大主题可能还会有评论的适配，其它的就只能自力更生……

此外，提交下我当时为自己整的“暗色模式”适配 Twikoo 的 CSS

所以还是waline香「被打飞」

YuziO2 commented 1 year ago

另外，似乎其他评论系统都不支持切换黑暗模式（？

不仅不支持暗色模式，包括字号、布局等都不对。像 Butterfly 那样的大主题可能还会有评论的适配，其它的就只能自力更生……

此外，提交下我当时为自己整的“暗色模式”适配 Twikoo 的 CSS

这个让 @argvchs 来合吧，为啥这文件里会有Vue编译后产生的选择器呢😕

YuziO2 commented 1 year ago

@YuziO2 具体的，这些似乎还需要调一下：代码块边框，categories tags 按钮背景和边框，blockquote 背景，table 背景，图片预览背景，搜索框背景，滚动条颜色和边框，密码框背景和边框，导航栏背景，阅读全文背景和颜色，archives 背景，archives 左上角的点的背景……

已修复：代码块边框，图片预览背景，搜索框背景，滚动条颜色和边框，archives 背景，archives 左上角的点的背景还剩：categories tags 按钮背景和边框，blockquote 背景，table 背景，密码框背景和边框，导航栏背景（？这个不是最早就改了吗），阅读全文背景和颜色

LynxCatTheThird commented 1 year ago

所以还是waline香「被打飞」

确实，我现在换了新主题，苦*地给主题提 Pr。

还有就是，把 CSS 换成 Stylus 然后定义一堆颜色会不会好维护一点……？不太麻烦，stylus --css xxx.css xxx.styl似乎就行了。

YuziO2 commented 1 year ago

所以还是waline香「被打飞」

确实，我现在换了新主题，苦*地给主题提 Pr。

还有就是，把 CSS 换成 Stylus 然后定义一堆颜色会不会好维护一点……？不太麻烦，stylus --css xxx.css xxx.styl似乎就行了。

没玩过，感觉css变量就够了吧🤔

argvchs commented 1 year ago

@YuziO2 。。感觉导航栏背景太黑了

argvchs commented 1 year ago

@YuziO2 。。不是，你改完之后怎么 archives 全黑了

argvchs commented 1 year ago

@YuziO2

stylus 相比纯 css 可能会方便一点因为可以直接 rgba，而 css var 必须用三个数表示才能透明认为还是先改成 stylus 再改颜色吧，具体可以参考 particle（啊啊当初我是怎么想的把 stylus 改成 css

然后颜色。。感觉您调的颜色太黑了啊（于是我找到一个 chrome experiments 可以自动暗色： chrome://flags/#enable-force-dark 感觉这个自动暗色除了导航栏以外颜色都很好看，可以参考一下

LynxCatTheThird commented 1 year ago

然后颜色。。感觉您调的颜色太黑了啊（于是我找到一个 chrome experiments 可以自动暗色： chrome://flags/#enable-force-dark 感觉这个自动暗色除了导航栏以外颜色都很好看，可以参考一下

我当时自己搞的 CSS 就是用 chrome://flags/#enable-force-dark 调的色，感觉有点浅了，不太好看啊……

argvchs commented 1 year ago

@LynxCatTheThird 我感觉还可以吧。。

argvchs commented 1 year ago

写了个 extractor 用于提取 stylus 的颜色，这样应该方便进行颜色替换了

const fs = require("fs");

const reg = /(?!^)#[0-9a-f]{3,8}/g;
const str = fs.readFileSync("input.styl").toString();
const col = str.match(reg).filter((a, b, c) => c.indexOf(a) === b);
col.sort((a, b) => b.length - a.length);
const ret1 = col.reduce((a, b, c) => a + "color" + c + " = " + b + "\n", "");
const ret2 = col.reduce((a, b, c) => a.replaceAll(b, "color" + c), str);
fs.writeFileSync("output.styl", ret1 + ret2);

提取之后的 stylus 样式

```stylus color0 = #ffffff80 color1 = #ea4a5a4d color2 = #d9d9d980 color3 = #ffbbf47a color4 = #9abbf77a color5 = #9e9e9e4d color6 = #0969da4d color7 = #ed6ea14d color8 = #00000017 color9 = #3392ff2a color10 = #d9e8ff6b color11 = #bddcf76b color12 = #fff13360 color13 = #0000001a color14 = #c7e0fb4d color15 = #d9e8ff4d color16 = #ffffffa6 color17 = #a5c2f5 color18 = #5c6b72 color19 = #ea4a5a color20 = #34d058 color21 = #66afef color22 = #f1f1f1 color23 = #cdcdcd color24 = #da0a51 color25 = #9abbf7 color26 = #ffbbf4 color27 = #d9d9d9 color28 = #a3ddfb color29 = #92cafa color30 = #8ab5ff color31 = #e6efff color32 = #d0d7de color33 = #f6f8fa color34 = #0969da color35 = #ed6ea0 color36 = #ec8c69 color37 = #1e3e3f color38 = #ebeef5 color39 = #0003 color40 = #fffc color41 = #0002 color42 = #fff6 color43 = #fff color44 = #aaa color45 = #999 color46 = #555 color47 = #ccc color48 = #000 #archives margin auto margin-top 100px padding 20px #archives .categories-tags margin auto margin-bottom 50px max-width 900px width 100% text-align center #archives .categories-tags span display inline-block margin 10px #archives .categories-tags span .icon margin-right 10px margin-left 0 color color43 #archives .categories-tags span a padding 10px 15px border color0 1px solid border-radius 10px color color43 transition background 0.25s, border 0.25s, color 0.25s #archives .categories-tags span a:hover border color17 1px solid background color43 !important color color18 #archives .category #archives .tags .tag .article .info .category .article .info .tags .article .info .tags .tag display inline-block margin-right 10px #archives h3 margin 10px 0 #crypto margin 50px 0 #crypto.failure border-color color19 color color19 #crypto.failure:focus box-shadow 0 0 0 3px color1 #crypto.success border-color color20 color color20 #footer margin-top 150px padding-bottom 20px width 100% text-align center font-size 14px #footer #footer-icon display inline-block margin 0 10px color color21 font-size 18px #footer #footer-wrap margin auto width 900px border-top 1px solid color44 color color18 #footer #footer-wrap div margin 15px #home-card width 300px #home-card #card-style position sticky top 10vh display flex flex-direction column justify-content center overflow auto max-height 80vh width 300px border none border-radius 10px background color43 box-shadow 0 0 20px color2 text-align center #home-card #card-div overflow auto padding 25px 0 #home-card #card-div .avatar margin auto width 140px height 140px border color22 solid 3px border-radius 50% text-align center #home-card #card-div .avatar img width 100% height 100% border-radius 50% #home-card #card-div .avatar:hover img transform rotate(360deg) #home-card #card-div .description margin 20px auto width 85% #home-card #card-div .friend-links .friend-link margin-bottom 5px #home-card #card-div .friend-links a display block padding 8px 0 border-radius 5px color color18 #home-card #card-div .icon-links .icon-link margin 5px #home-card #card-div .icon-links a padding 5px border-radius 5px color color18 font-size 18px #home-card #card-div .icon-links a:hover #home-card #card-div .friend-links a:hover #home-posts .page-current .page-num:hover background color21 color color43 #home-card #card-div .icon-links #home-card #card-div .friend-links margin 10px auto padding-top 10px width 85% border-top color23 solid 1px #home-card #card-div .name margin 20px auto font-weight bold font-size 16px #home-head display flex width 100vw height 100vh #home-head #home-background position absolute top 0 left 0 z-index -1 width 100vw height 100vh background-position center background-size cover background-repeat no-repeat #home-head #home-info .info display flex justify-content center align-items center border-radius 50% text-align center #home-head #home-info .loop:nth-child(1) border-radius 38% 62% 63% 37% / 41% 44% 56% 59% background color43 opacity 0.3 transform rotate(30deg) animation loop1 10s linear infinite #home-head #home-info .loop:nth-child(2) border-radius 38% 62% 63% 37% / 41% 44% 56% 59% background color43 opacity 0.45 transform rotate(60deg) animation loop2 15s linear infinite #home-head #home-info .loop:nth-child(3) border-radius 38% 62% 63% 37% / 41% 44% 56% 59% background color43 opacity 0.3 transform rotate(90deg) animation loop3 10s linear infinite #home-head #home-info .loop:nth-child(4) border-radius 38% 62% 63% 37% / 41% 44% 56% 59% background color43 opacity 0.45 transform rotate(120deg) animation loop4 15s linear infinite #home-head #home-info #home-posts margin auto #home-posts .page-current display flex justify-content center align-items center margin-top 50px width 100% text-align center font-weight bold #home-posts .page-current .current display inline-block margin 0 7px padding 5px width 35px height 35px border-radius 5px color color24 line-height 35px #home-posts .page-current .page-num #home-posts .page-current .page-omit display inline-block margin 0 7px padding 5px width 35px height 35px border-radius 5px line-height 35px #home-posts .page-current a color color45 #home-posts .post border-radius 20px background color43 box-shadow 0 0 20px color2 transition box-shadow 0.25s, transform 0.25s #home-posts .post .category-and-date margin-top 15px width 100% color color18 text-align center #home-posts .post .category-and-date .category display inline-block margin-right 25px #home-posts .post .category-and-date .category a #archives a #archives .tag-icon #archives .item-time #archives .categories-tags span a:hover .icon .article .info a color color18 #home-posts .post .category-and-date .date #archives .tags #menu #desktop-menu a span display inline-block #home-posts .post .category-and-date .special display inline-block margin-left 25px #home-posts .post .go-post position absolute right -5px bottom -5px padding 10px 24px border 0 border-radius 20px 0 background linear-gradient(120deg, color25 0%, color26 100%) box-shadow 2px 2px 10px 0 color3 color color43 font-weight bold font-size 14px transition box-shadow 0.25s ease-out, right 0.25s ease-out #home-posts .post .go-post:hover right -7px box-shadow -2px -2px 10px 0 color4 #home-posts .post .post-tags .tag display inline-block margin-right 10px font-weight bold #home-posts .post .post-tags a font-size 14px #home-posts .post .post-tags #archives .info .article .info line-height 1.7 #home-posts .post-title color color21 text-align center #home-posts .post:hover box-shadow 0 0 5px color27 transform translate(-5px, -5px) #home-posts-wrap display flex margin auto padding 20px border-radius 10px background transparent #home-posts-wrap #archives .article #footer #footer-wrap box-sizing border-box #loading position fixed top 0 left 0 z-index 2147483647 display flex flex-direction column justify-content center align-items center width 100vw height 100vh background color43 word-break keep-all #loading h2 #loading p #loading img margin 10px #loading img height 50px border-radius 0 #loading-circle display flex flex-direction column justify-content center align-items center padding 50px width 50vmin height 50vmin border 10px solid color28 border-radius 50% text-align center #main margin-right calc(100% - 100vw) #menu position fixed top 0 z-index 1004 width 100vw background color29 box-shadow 0 -1px 10px 0 color5 font-weight bold line-height 50px transition background 0.25s ease-out, top 0.25s ease-out #menu #desktop-menu height 50px #menu #desktop-menu .title display inline-block margin-right 5px margin-left 60px color color46 #menu #desktop-menu a display inline-block margin-left 30px color color46 #menu #mobile-menu min-height 50px text-align center #menu #mobile-menu .items z-index 1002 padding 10px 0 20px #menu #mobile-menu .items .item display flex justify-content center margin auto min-width 200px width 80% #menu #mobile-menu .items a color color46 #menu #mobile-menu .title z-index 1003 color color46 cursor pointer #menu-curtain position fixed top 0 left 0 z-index 1001 width 100% height 100% background color39 #menu.hidden top -50px #menu.menu-color background color39 #menu.menu-color #desktop-menu a #menu.menu-color #mobile-menu a #menu.menu-color #mobile-menu .title color color43 #preview position fixed top 0 left 0 z-index 1005 display flex justify-content center align-items center width 100vw height 100vh background-color color40 #preview-content margin auto max-width 95% max-height 95% box-shadow 0 0 50px 10px color2 #search-bar z-index 1000 margin-bottom 50px #timeline-wrap display flex flex-direction column-reverse * position relative margin 0 padding 0 word-wrap break-word scrollbar-color color30 color31 scrollbar-width thin .article margin auto margin-top 100px padding 20px font-size 15px .article .content margin 50px 0 .article .info .date display inline-block margin-right 10px color color18 .code-content overflow auto padding 50px 30px 20px white-space pre font-size 13px line-height 2 .comment iframe body::-webkit-scrollbar-track border-radius 0 .content transition opacity 0.25s .content img .content video .content audio .content iframe display block margin 15px auto max-width 75% .copycode position absolute top 0 right 0 color color18 .copycode i position absolute top 0 right 0 padding 15px transition transform 0.25s .copycode.copied i transform scale(1.25) .copycode.copied i:first-child .copycode:not(.copied) i:last-child opacity 0 .fade-enter-active .fade-leave-active transition opacity 0.3s .fade-enter-from .fade-leave-to opacity 0 .hljs-ln-code padding-left 20px !important .hljs-ln-numbers padding-right 10px !important border-right 1px solid color47 color color47 vertical-align top text-align right .icon margin-right 5px color color18 .input display block box-sizing border-box width 100% height 50px border 1px solid color32 border-radius 50px background color33 color color48 text-indent 20px font-size 15px transition background 0.25s, border 0.25s, box-shadow 0.25s .input:focus outline none border-color color34 background color43 box-shadow 0 0 0 3px color6 .input:hover background color43 .into-enter-active transition opacity 0.5s, transform 0.5s .into-enter-from opacity 0 transform scale(1.1) .katex white-space normal !important .language position absolute top 0 left 30px padding 10px 15px border-radius 0 0 10px 10px background linear-gradient(to right, color35 0%, color36 100%) box-shadow 1px 1px 0.75rem color7 color color43 font-weight bold font-size 12px .page-num .icon-link a .friend-link a transition background 0.25s, color 0.25s .page-num:hover .icon-link a:hover .friend-link a:hover .categories-tags a:hover .go-post:hover opacity 1 .slide-enter-active .slide-leave-active transition margin-top 0.3s, opacity 0.3s .slide-enter-from .slide-leave-to margin-top -300px opacity 0 .timeline margin-bottom 30px transition margin-top 0.5s, opacity 0.3s, visibility 0.3s .timeline-content margin-left 17.5px padding 24px border 1px solid color41 border-radius 3px background color43 transition box-shadow 0.5s .timeline-content:hover box-shadow 0 2px 8px color8 .timeline-tail position absolute width 7px height 7px border 2px solid color17 border-radius 50% background color43 ::-webkit-scrollbar width 12px height 12px ::-webkit-scrollbar-thumb background color30 linear-gradient(45deg, color42 25%, transparent 25%, transparent 50%, color42 50%, color42 75%, transparent 75%, transparent) border 3px solid color31 border-radius 100px ::-webkit-scrollbar-track border-radius 100px background color31 ::selection background-color color9 color unset a color color21 text-decoration none a:hover .content .copycode:hover opacity 0.8 audio button iframe img video #home-head #menu .categories-tags a .copycode .friend-link a .go-post .hljs-ln-numbers .icon-link a .katex .language .page-current user-select none b strong font-weight bold line-height 2.5 blockquote overflow auto margin 15px 0 padding 0 15px border-left 3px solid color37 border-radius 3px background color10 body overflow-x hidden width 100% background color33 color color37 font 500 14px Lexend, "Noto Sans SC", sans-serif code padding 4px 8px border-radius 4px background color11 line-height 2.5 h1 h2 h3 h4 h5 h6 margin 15px 0 color color37 word-break keep-all font-weight bold h1 font-size 30px h2 font-size 27px h3 font-size 24px h4 font-size 21px h5 font-size 18px h6 font-size 15px hr border-width 1.5px border-style dashed none none img video audio iframe border-radius 10px mark padding 4px 8px border-radius 4px background color12 color unset line-height 2.5 p ul ol margin 15px 0 line-height 1.7 pre overflow hidden margin 25px 0 border 1px solid color38 border-radius 15px box-shadow 0 2px 12px 0 color13 white-space normal pre code .hljs .input .language font-family "Fira Code", "Noto Sans SC", monospace table:not(.hljs-ln) margin 15px 0 table:not(.hljs-ln) td:nth-child(even) background color14 table:not(.hljs-ln) td:nth-child(odd) background color15 table:not(.hljs-ln) th background color28 table:not(.hljs-ln) tr th table:not(.hljs-ln) tr td padding 10px 20px border-radius 3px ul li ol li margin 8px 0 @keyframes loop1 from transform rotate(30deg) to transform rotate(390deg) @keyframes loop2 from transform rotate(60deg) to transform rotate(420deg) @keyframes loop3 from transform rotate(90deg) to transform rotate(450deg) @keyframes loop4 from transform rotate(120deg) to transform rotate(480deg) @media (min-width 900px) #home-head #home-info .info .wrap padding 25px #home-head #home-info .info .wrap h1 margin-bottom 10px font-weight bold font-size 52px #home-head #home-info .info .wrap h3 margin 10px 0 font-size 24px #home-head #home-info .info .wrap h5 margin 20px 0 font-size 16px #home-head #home-info .loop position absolute display inline-block width 500px height 500px #home-head #home-info #home-head #home-info .info width 500px height 500px #home-posts margin-right 50px width 850px #home-posts .post margin-bottom 25px padding 50px #home-posts .post .description padding 20px 0 #home-posts-wrap max-width 1200px #menu #desktop-menu display block #menu #mobile-menu display none .article #archives #footer #footer-wrap width 900px .home-posts-wrap-no-card #home-posts margin auto ul ol padding-left 40px @media (min-width 900px) and (max-width 1200px) #home-card display none #home-posts width 100% #home-posts-wrap #archives width 800px @media (max-width 900px) #home-head #home-info width 350px height 350px #home-head #home-info .info display flex justify-content center align-items center margin auto width 350px height 350px background color16 #home-head #home-info .info .wrap padding 50px #home-head #home-info .info .wrap h1 margin-bottom 10px font-size 46px #home-head #home-info .info .wrap h3 margin 10px 0 font-size 20px #home-head #home-info .info .wrap h5 margin 20px 0 font-size 14px #home-head #home-info .loop position absolute display none width 350px height 350px #home-posts margin auto width 100% #home-posts .post margin-bottom 30px padding 20px 30px #home-posts .post .description padding 20px 0 #home-posts .post .post-tags padding-right 69px #home-posts-wrap .article #archives #footer #footer-wrap width 100% #menu #desktop-menu #home-card display none #menu #mobile-menu display block ul ol padding-left 20px ```

其实切换颜色只要用两个文件然后像切换 hljs 的样式一样切换就可以了吧

argvchs commented 8 months ago

由于一些原因我已经没有时间来维护 particlex 了。。

@YuziO2 你现在已经是 owner 了可以自行处理这个 pr 或者添加新的 member

另外这个 pr 要合并到的 dev branch 已经被删除了我不能 reopen（

YuziO2 commented 7 months ago

由于一些原因我已经没有时间来维护 particlex 了。。

@YuziO2 你现在已经是 owner 了可以自行处理这个 pr 或者添加新的 member

另外这个 pr 要合并到的 dev branch 已经被删除了我不能 reopen（

现在才看到…… 我我我觉得我也没多少动力维护了啊毕竟现在已经我转去Shiro了不过我尽力罢

theme-particlex / hexo-theme-particlex

feat: 黑暗模式 #87