给网站加上暗黑/黑夜模式
废话不多说,直接上代码:
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.4.0/lib/darkmode-js.min.js"></script>
<script>
var now = new Date();
var hour = now.getHours();
if(18 < hour || hour < 6){ // 每天晚上6点到早上6点设置为暗黑模式
var options = {
bottom: '32px', // default: '32px'
time: '0.5s', // default: '0.3s'
mixColor: '#fff', // default: '#fff'
backgroundColor: '#fff', // default: '#fff'
buttonColorDark: '#100f2c', // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: true, // default: true,
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true
};
new Darkmode(options).showWidget();
$(".darkmode-toggle").css("z-index","9999999999");
$(".darkmode-layer").css("position","fixed");
$(".darkmode-layer").css("z-index","9999999999");
}
</script>
参考 typecho 插件源码:
<?php
/**
* 基于darkmode-js的夜间模式插件 晚18点-清晨6点自动启动
*
* @package DrakNight
* @author 术与道
* @version 1.0.0
* @link http://www.shuyudao.top
*
* */
class DrakNight_Plugin implements Typecho_Plugin_Interface{
public static function activate()
{
Typecho_Plugin::factory('Widget_Archive')->header = array("DrakNight_Plugin", 'run');
return _t('启动成功');
}
public static function deactivate(){}
public static function config(Typecho_Widget_Helper_Form $form)
{
}
public static function personalConfig(Typecho_Widget_Helper_Form $form){}
public static function run($foo){
echo "<script src=\"https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/darkmode-js@1.4.0/lib/darkmode-js.min.js\"></script>
<script>
window.onload = function(){
now = new Date(),hour = now.getHours()
if(18<hour||hour<6){
var options = {
bottom: '64px', // default: '32px'
time: '0.5s', // default: '0.3s'
mixColor: '#fff', // default: '#fff'
backgroundColor: '#fff', // default: '#fff'
buttonColorDark: '#100f2c', // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: true, // default: true,
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true
}
new Darkmode(options).showWidget();
$(\".darkmode-toggle\").css(\"z-index\",\"9999999999\");
$(\".darkmode-layer\").css(\"position\",\"fixed\");
$(\".darkmode-layer\").css(\"z-index\",\"9999999999\");
}
}
</script>";
}
}