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

GibbsAlyce30

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


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

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

灌水王

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

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

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

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

复制代码

灌水王

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

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

复制代码

1. var black = false;    document.styleSheets[0].disabled = false    document.styleSheets[1].disabled = true    function change() {        const idx = black?1:0;        document.styleSheets[idx].disabled = true        document.styleSheets[1-idx].disabled = false        black = !black;    }

复制代码

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

复制代码

灌水王

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

1.     function getTheme() {        let name = 'theme=',            ca = document.cookie.split(';');        for (let i = 0; i < ca.length; i++) {            let c = ca[i].trim();            if (c.indexOf(name) === 0)                return c.substring(name.length, c.length);        }        return 'light';    }    function setTheme() {        const theme = getTheme()        switch (theme) {            case 'dark':                document.styleSheets[0].disabled = false                document.styleSheets[1].disabled = true                break;            case 'light':                document.styleSheets[0].disabled = true                document.styleSheets[1].disabled = false                break;        }    }    setTheme()    function change() {        const theme = getTheme()        switch (theme) {            case 'dark':                document.cookie = 'theme=light; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';                break;            case 'light':                document.cookie = 'theme=dark; expires=Thu, 18 Dec 2031 12:00:00 GMT; path=/';                break;        }        setTheme()    }

复制代码

灌水王

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

灌水王

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

灌水王

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

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

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

复制代码

灌水王

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

灌水王

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

noise

打开，学习，https://hostloc.com/thread-916931-1-1.html

lefiiiblai29

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

灌水王

【继续求助【继续求助