[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://me.jinchuang.org/archives/1410.html
本站文章除注明[转载|引用|来源],均为本站原创内容,转载前请注明出处
文章链接地址:https://me.jinchuang.org/archives/1410.html
本站文章除注明[转载|引用|来源],均为本站原创内容,转载前请注明出处
这种方法不怎么好 普遍的都是通过js来操作css属性来实现夜间模式
我的这个就可以跟随时间来实现 默认是时间 如果通过按钮开关来切换 下次访问就是夜间模式了
我这也是一时兴起,想实现下按时间切换配色的,主要是菜不会写但可以改改别人写的,先实现了再瞅瞅。不像你们这些大牛,我捣腾起来需要用js的都是找GPT和前端同事😄