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