求JS大哥帮个忙【继续求助】

超级无敌小马甲

事情是这样的，我想给站点加个白天/黑夜模式切换按钮
按钮的样式现在有了，但我不会JS，我想简单粗暴的直接调用2套css切换达到效果，已知两套css分别定义为：style.css和style_black.css所以求大哥帮个忙。
按钮样式如下：


--------------------------------

楼下有2位大佬帮忙给了答案，但第一种试了无法实现，第二种可以实现，但无法记录当下模式，返回首页又变成了默认的白天。所以只能继续求助。

G.K.D

超级无敌小马甲 发表于 2021-11-12 14:27
感谢大哥帮忙。这个这个对我来说有点难，我用下楼那个实现了，那个我看得懂 哈哈
------------------
那 ...

我这种是大家常用的方案，Github、知乎 等大网站都是这样做的，你看一下他们的源代码就能发现~

当然，这种方案需要做好 CSS 样式才行，以确保可以正确覆盖常规的白天样式。

关于 Cookie 记住主题模式，我给你写了段和我前面配套的代码，既然你没有采用我的方案那就当参考一下吧：

1. // 根据当前 Cookie 中的主题模式来设置网页主题模式
   
2. setTheme(getTheme());
   
3. 
   
4. // 获取 Cookie 中的主题模式
   
5. function getTheme() {
   
6.     let name = 'theme=',
   
7.         ca = document.cookie.split(';');
   
8.     for (let i=0; i<ca.length; i++) {
   
9.         let c = ca[i].trim();
   
10.         if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    
11.     }
    
12.     // 如果不存在 theme 这个 Cookie 值，则返回为白天模式
    
13.     return 'light';
    
14. }
    
15. 
    
16. // 修改 Cookie 中的主题模式
    
17. function setTheme(theme) {
    
18.     switch(theme) {
    
19.         case 'light':
    
20.             // 删除 theme 这个 Cookie，并移除 html 标签的相关属性
    
21.             document.cookie='theme=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
    
22.             document.lastElementChild.removeAttribute('data-theme');
    
23.             break;
    
24.         case 'dark':
    
25.             // 写入 Cookie 并对 html 标签添加相关属性
    
26.             document.cookie='theme=dark; expires=Thu, 18 Dec 2031 12:00:00 GMT; path=/';
    
27.             document.lastElementChild.setAttribute('data-theme', 'dark');
    
28.             break;
    
29.     }
    
30. }

复制代码

518

粗略地写了一下，应该可以满足你的要求

1. <link rel="stylesheet" href="style.css">
   
2.     <link rel="stylesheet" href="style_black.css">

复制代码

1. var black = false;
   
2.     document.styleSheets[0].disabled = false
   
3.     document.styleSheets[1].disabled = true
   
4.     function change() {
   
5.         const idx = black?1:0;
   
6.         document.styleSheets[idx].disabled = true
   
7.         document.styleSheets[1-idx].disabled = false
   
8.         black = !black;
   
9.     }

复制代码

1. <button onclick="change()">Button</button>

复制代码

518

参照大佬@G.K.D 写的，改了一下

1.     function getTheme() {
   
2.         let name = 'theme=',
   
3.             ca = document.cookie.split(';');
   
4.         for (let i = 0; i < ca.length; i++) {
   
5.             let c = ca[i].trim();
   
6.             if (c.indexOf(name) === 0)
   
7.                 return c.substring(name.length, c.length);
   
8.         }
   
9.         return 'light';
   
10.     }
    
11.     function setTheme() {
    
12.         const theme = getTheme()
    
13.         switch (theme) {
    
14.             case 'dark':
    
15.                 document.styleSheets[0].disabled = false
    
16.                 document.styleSheets[1].disabled = true
    
17.                 break;
    
18.             case 'light':
    
19.                 document.styleSheets[0].disabled = true
    
20.                 document.styleSheets[1].disabled = false
    
21.                 break;
    
22.         }
    
23.     }
    
24.     setTheme()
    
25.     function change() {
    
26.         const theme = getTheme()
    
27.         switch (theme) {
    
28.             case 'dark':
    
29.                 document.cookie = 'theme=light; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
    
30.                 break;
    
31.             case 'light':
    
32.                 document.cookie = 'theme=dark; expires=Thu, 18 Dec 2031 12:00:00 GMT; path=/';
    
33.                 break;
    
34.         }
    
35.         setTheme()
    
36.     }

复制代码

reizhi

这挺简单的，js改class就行了

超级无敌小马甲

reizhi 发表于 2021-11-11 18:06
这挺简单的，js改class就行了

奈何就是不会js，所以麻烦大哥们了

G.K.D

你把黑夜模式的 CSS 文件改一改，把所有 .xx {} 改成 html[data-theme="dark"] .xx {}
这样直接加载两个 CSS 样式文件（或者合并到一个 .css 文件中）

要切换到黑夜模式，就只需要给 html 标签添加 data-theme="dark" 属性即可

1. document.getElementById('anniu').addEventListener('click', function () {
   
2.     if (document.lastElementChild.dataset.theme) { // 如果存在该属性即当前为黑夜模式
   
3.         document.lastElementChild.removeAttribute('data-theme');
   
4.     } else { // 不存在该属性则添加（即切换至黑夜模式）
   
5.         document.lastElementChild.setAttribute('data-theme', 'dark');
   
6.     }
   
7. })

复制代码

超级无敌小马甲

G.K.D 发表于 2021-11-11 18:33
你把黑夜模式的 CSS 文件改一改，把所有 .xx {} 改成 html[data-theme="dark"] .xx {}
这样直接加载两个 CS ...

感谢大哥帮忙。这个这个对我来说有点难，我用下楼那个实现了，那个我看得懂 哈哈
------------------
那位大哥的有些许不如意，就是不会在当下记录模式，点击返回首页又变成了白天模式

超级无敌小马甲

518 发表于 2021-11-11 18:41
粗略地写了一下，应该可以满足你的要求

感谢大佬帮忙，用上你这个实现了，非常感谢  好人一生平安，
但是有个问题，就是不会记录当前模式，点击返回后又是白天模式了

萌新酱

打开，学习，https://loc.mjj8.eu.org/thread-916931-1-1.html

超级无敌小马甲

萌新酱 发表于 2021-11-12 14:37
打开，学习，https://loc.mjj8.eu.org/thread-916931-1-1.html

直接好家伙，学习当看小说了

超级无敌小马甲

【继续求助【继续求助