typecho博客根据时间自动切换主题配色

[2023-11-13有更新] 看惯了一个主题配色，但又不想在后台来回切换其他配色，于是就有了此篇文章，也就是当前博客在用的切换样式

以下的内容代码为本博客使用的，不保证适用于其他的php博客系统，仅供参考下吧

首页我用php代码去判断时间，根据时间定义标签对应的class值，好做判断

// 根据时间判断使用主题，代码放在主题的header.php文件中，<head>标签的前面
<?php
    date_default_timezone_set('Asia/Shanghai');
    $hour = date('H');
    if ($hour >= 7 && $hour < 19) {
        $theme = $this->options->css;
    } else {
        $theme = 'black';
    };
?>
<!-- 用php输出<html>标签，用于指定class的内容为上面的变量值，方便js获取使用 -->
<?php echo '<html lang="zh-cn" xmlns="//www.w3.org/1999/xhtml" class="'. $theme .'">' ?>

用于切换主题配色的JS脚本，代码放在主题header.php文件中

<!--放在<head> 与 </head>标签的里面-->
<script>
    var html = document.getElementsByTagName("html")[0];
    var deftheme = html.getAttribute("class");
    // qing 就是正常的主题配色，我这里是css文件名
    var currentTheme = html.classList.contains('black') ? deftheme : 'qing';
    //判断主题的值，设置相反的值
    if (currentTheme === 'qing') {
         newtheme = 'black'
    } else {
         newtheme = 'qing'
    }
    var cookieTheme = getCookie("theme");
    //判断cookie是否存在
    if (cookieTheme) {
        currentTheme = cookieTheme;
        setDocumentTheme(currentTheme);
    }
    //设置使用主题的class
    function setDocumentTheme(theme) {
        html.className = '';
        html.classList.add(theme);
    }
    //设置cookie，每天凌晨失效
    function setCookie(name, value) {
        var expires = new Date();
        expires.setHours(24, 0, 0, 0);
        var timeDiff = expires.getTime() - Date.now();
        document.cookie = name + "=" + value + "; expires=" + new Date(Date.now() + timeDiff) + "; path=/";
    }
    //获取cookie
    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }
</script>

把需要使用深色的样式拿出来单独写一个css文件，比如深色样式表为dark.css

<!--在header.php文件中<head> 与 </head>里面加载-->
<!--深色样式-->
<link rel="stylesheet" href="<?php $this->options->themeUrl('css/dark.css'); ?>">

/* 所有暗色样式前面都加上html.black，通过这个切换使用的样式 */
html.black body{}
html.black .xxxx{}
html.black #xxxx{}

添加一个切换按钮，通过点击按钮切换不同的样式同时写入到cookie中，在不删除cookie或者超过你设置的cookie有效期，下次访问还是这个样式，代码放在主题header.php 或者footer.php文件中都可以

<!-- 代码放在<body> 与 </body>标签里面 -->
<button id="toggle-style">
    <i class="fa fa-moon-o"></i>
    <i class="fa fa-certificate"></i>
</button>
<script>
    //点击按钮切换样式的JS脚本 
    document.getElementById("toggle-style").addEventListener("click", function() {
        if (currentTheme === newtheme) {
            setDocumentTheme(deftheme);
            currentTheme = deftheme;
        } else if (currentTheme === deftheme) {
            setDocumentTheme(newtheme);
            currentTheme = newtheme;
        }
        setCookie("theme", currentTheme);
    });
</script>

白天 07:00 - 18:59

晚上 19:00 - 06:59

本文最后记录时间 2024-01-25
文章链接地址：https://wojc.cn/archives/1410.html
本站文章除注明[转载|引用|来源],均为本站原创内容,转载前请注明出处

留言列表

留言