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

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

晚上 19:00 - 06:59

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


本文最后记录时间 2024-01-25
文章链接地址:
https://me.jinchuang.org/archives/1410.html
本站文章除注明[转载|引用|来源],均为本站原创内容,转载前请注明出处
关于网站搬家后,评论邮件通知发送失败报错的问题(openssl的问题)
Ubuntu 22.04 源码编译安装 PHP7.4 使用OpenSSL1.1.1版本
bin/ld: Dwarf Error: found dwarf version '5', this reader only handles version 2, 3 and 4 information.
Typecho后台样式修改预览

我的 BBK 6S F21 手机三部曲

ubuntu 默认的dash 切换为 bash

留言列表

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

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

    1. Awking
      Windows 10 Google Chrome
      中国上海市宝山区电信

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

留言

顶部