typecho博客根据时间自动切换主题配色
· 技术积累 · PHP 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

css2.png

晚上 19:00 - 06:59

css1.png

本文最后更新时间 2024-01-25
文章链接地址:
https://me.jinchuang.org/archives/1410.html
本站文章除注明[转载|引用|原文]出处外,均为本站原生内容,转载前请注明出处


留言列表

  1. 苏晓晴
    苏晓晴 Windows 10 Microsoft Edge · 中国广西贺州市移动 · 回复

    这种方法不怎么好 普遍的都是通过js来操作css属性来实现夜间模式
    我的这个就可以跟随时间来实现 默认是时间 如果通过按钮开关来切换 下次访问就是夜间模式了

    1. Lazy
      Lazy Windows 10 Google Chrome · 中国上海市宝山区电信 · 回复

      我这也是一时兴起,想实现下按时间切换配色的,主要是菜不会写但可以改改别人写的,先实现了再瞅瞅。不像你们这些大牛,我捣腾起来需要用js的都是找GPT和前端同事😄

留言