求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就行了

超级无敌小马甲

518 发表于 2021-11-12 17:02
参照大佬@G.K.D 写的，改了一下

啊 果然都是牛人  这一波就非常完美了  感谢2位大佬  
此贴继续供后续他人学习围观。

超级无敌小马甲

G.K.D 发表于 2021-11-12 16:16
我这种是大家常用的方案，Github、知乎 等大网站都是这样做的，你看一下他们的源代码就能发现~

当然，这 ...

非常感谢大佬，我个人感觉是合并在一起的确高大上点，但奈何自己尝试过大佬给的方法，但好像不成功，实在是有愧于大佬。是我知识储备不够的问题。 再次感谢

超级无敌小马甲

屮喵 发表于 2021-11-12 15:42
切换模式记录到cookie？

是的  应该是这个原理吧
是不是很难

屮喵

切换模式记录到cookie？

超级无敌小马甲

【继续求助【继续求助

超级无敌小马甲

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

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

萌新酱

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