根据时间切换主题css文件

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

我看大多数网站都是一个开关手动选择，很少数可以自动切；由于本人不太会js，下面的js代码写的比较繁琐

这个php代码，就是根据时间调整当前使用的css样式，变量用于js获取使用

# 根据博客主题调整路径，代码放在header中

<!--根据时间切换配色和logo -->
<?php
date_default_timezone_set('Asia/Shanghai');
//获取当前时间 小时
$hour = date('H');

//获取当前css主题文件名称
$themes = $this->options->css;

//根据当前时间，设定theme变量的值
if ($hour >= 7 && $hour < 19) {
    $theme = $this->options->css;
} 
else{
    $theme = 'black';
};

//指定默认logo图片地址
$logo_path = '/img/logo/'.$theme.'/logo.png';
?>

<!-- 用php输出html和head标签，用于指定class的内容为上面的变量值，方便js获取使用 -->
<?php echo '<html lang="zh-cn" xmlns="//www.w3.org/1999/xhtml" class="'. $theme .'">' ?>
<?php echo '<head class="'. $themes .' ">' ?>

把需要使用暗色的样式拿出来单独写一个css文件，也放到header中加载

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

使用js去获取当前主题绑定的标签的class的值（也就是上面代码中变量值白天/晚上）,通过点击按钮切换不同的样式同时写入到cookie中，在不删除cookie或者超过你设置的cookie有效期，下次访问还是这个样式

<!-- 切换样式按钮,白天隐藏晚上按钮，晚上隐藏白天按钮 -->
<button id="toggle-style">
    <i class="fa fa-moon-o"></i>
    <i class="fa fa-certificate"></i>
</button>

<script>
// 获取HTML元素
var header = document.getElementsByTagName("html")[0];
var headts = document.getElementsByTagName('head')[0];

// 获取当前主题类名
var ts = headts.getAttribute("class").trim();
// 初始当前主题为黑色主题或根据类名获取的主题
var currentTheme = header.classList.contains('black') ? 'black' : ts;

// 获取Logo元素
var Logo = document.querySelector('.intro-logo');

// 获取存储的主题cookie
var cookieTheme = getCookie("theme");

// 如果存在主题cookie，则使用cookie中的主题并设置文档主题
if (cookieTheme) {
    currentTheme = cookieTheme;
    setDocumentTheme(currentTheme);
}

// 监听主题切换按钮的点击事件
document.getElementById("toggle-style").addEventListener("click", function() {
    // 根据当前主题切换主题并更新当前主题
    if (currentTheme === ts) {
        setDocumentTheme("black");
        currentTheme = "black";
    } else if (currentTheme === "black") {
        setDocumentTheme(ts);
        currentTheme = ts;
    }
    // 设置主题cookie
    setCookie("theme", currentTheme);
});

// 设置文档主题
function setDocumentTheme(theme) {
    header.classList.remove(ts, "black"); // 移除之前的主题类
    header.classList.add(theme); // 添加新的主题类
    Logo.src = '/img/logo/' + theme + '/logo.png'; // 更新Logo图像路径
}

// 设置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>

白天 07:00 - 18:59

晚上 19:00 - 06:59

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

留言列表

留言