theme-particlex / hexo-theme-particlex

A concise Hexo theme, based on Particle.
MIT License
410 stars 56 forks source link

feat: Supports Dark Mode and Preloaded loading animation #106

Closed ghost closed 5 months ago

ghost commented 7 months ago

新增自动黑暗模式(暂时不支持手动切换)

以及在点击站内链接后预先加载加载动画( main.js )

Demo: https://hexo-theme-particlex-kohl.vercel.app/

YuziO2 commented 7 months ago

有兴趣参考 #87 把手动切换加上去吗? 从演示上来看还是不错的,顶栏的颜色如果黑一点就更好了。

ghost commented 7 months ago

好了,大概上手动切换做好了,依旧在这个demo中 不过实际上存在一个问题,就是评论区我是暂时没办法跟随手动切换(我没想到有什么好方法

至于哪个菜单栏的话...........至少我暂时没找到比这更合适的颜色了(

YuziO2 commented 7 months ago

有首屏闪屏问题,把我趟过的坑重新趟了一遍【悲】建议参考一下我的博文解决一下。另外我还是坚持 #87 我的观点即跟随和手动应当同时存在,理由也在楼里说过了,如果要这样做的话三框选择或许更直观一些,附图: image 这个是Shiro主题所采用的切换方式,我觉得挺好的。


另外捉个虫,有一些拼写错误: image


另外如果能加入一点动画使得切换不那么生硬就好了,我记得我在 #87 里面是做过的,可以参考blog.yuzi.dev,我的博客就是使用了#87的代码。

YuziO2 commented 7 months ago

@argvchs 您觉得Shiro那个切换器如何,我感觉解决了我们上次的分歧:兼顾了功能性,也不会让人摸不着头脑。 image

ghost commented 7 months ago

其实实际上我这个js逻辑经过挺多次修改了(之前几次强制推送就是在改的() 现在的逻辑是,如果用户第一次访问,记录浏览器是否黑暗模式并跟随,并监听浏览器黑暗模式直接跟随,在此基础上允许用户手动修改。 这个逻辑目前我觉得已经不错了,毕竟不会真的有用户手动修改完成之后改切换黑暗模式吧() 理论上这样挺人性化的

YuziO2 commented 7 months ago

其实实际上我这个js逻辑经过挺多次修改了(之前几次强制推送就是在改的() 现在的逻辑是,如果用户第一次访问,记录浏览器是否黑暗模式并跟随,并监听浏览器黑暗模式直接跟随,在此基础上允许用户手动修改。 这个逻辑目前我觉得已经不错了,毕竟不会真的有用户手动修改完成之后改切换黑暗模式吧() 理论上这样挺人性化的

我的意思是闪屏出现在首次进入页面的渲染,默认的是白色,而调黑的逻辑放在了vue里,而vue的下载与启动都会占用一定的时间。而这样的话默认黑暗的用户进入页面时总是回先闪过白色后立即变黑,体验很不好。解决方式就是把第一次变黑逻辑放head里而不是在vue里。

ghost commented 7 months ago

改了(

ghost commented 7 months ago

似乎GitHub把CRLF和LF的区别也算作更改了....... 目前修改范围

/layout/
    |---import.ejs
    |---layout.ejs
    |---menu.ejs
/source/
    /---css/
        |---dark.css
        |---main.css
    /---js/
        /---lib/
            |---darkmode.js
        |---main.js
|README.md
|_config.yml