typecho博客程序Handsome主题实现一键切换夜间模式，支持指定时间进入夜间模式和跟随系统深色模式

博主：丁町轩
发布时间：2020 年 04 月 05 日
419 次浏览
暂无评论
392字数
分类：代码片段

> 最近有小伙伴问网页的夜间模式怎么实现，一瞬间又感觉到微信炒热的夜间模式备受大家喜欢，现在分享的夜间模式教程，主要适用于Handsome主题，还支持一键切换模式，支持跟随设备深色模式，其他网页程序也通用，自行修改darkmode.css文件即可。

##  夜间模式效果
## 一、夜间模式js和css文件下载上传
下载上面的文件，js和css分开上传到Handsome主题对应目录下，路径如下：

- /usr/themes/handsome/assets/css/darkmode.css

- /usr/themes/handsome/assets/js/darkmode.js

##  二、Handsome主题需要修改的文件

- 打开/usr/themes/handsome/component/footer.php，找到
```php

    <script src="<?php echo STATIC_PATH ?>js/function.min.js?v=<?php echo Handsome::$version.Handsome_Config::$versionTag
    ?>"></script>
    <script src="<?php echo STATIC_PATH ?>js/core.min.js?v=<?php echo Handsome::$version.Handsome_Config::$versionTag
?>"></script>
```
在下面加入
```php

    <script src="<?php echo STATIC_PATH ?>js/darkmode.js?v=dedediy"></script>
```
- 打开/usr/themes/handsome/component/header.php，找到
```php
    <style type="text/css">
        <?php echo Content::exportCss($this) ?>
    </style>
```
在下面加入
```php
    
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/darkmode.css?v=dedediy" type="text/css" />
```
- 打开/usr/themes/handsome/component/headnav.php，找到（搜索）
```php
            <?php if (!in_array('hideLogin',$this->options->featuresetup)): ?>
```
在上面加入
```php
            
            <li>
                <a class="nav-switch-dark-mode" href="javascript:">
                  <span class="icon-light-mode" data-toggle="tooltip" data-placement="bottom" title="" data-original-title=" 夜晚模式 ">
                      <i data-feather="sun"></i>
                  </span>
                  <span class="icon-dark-mode" data-toggle="tooltip" data-placement="bottom" title="" data-original-title=" 日间模式 ">
                      <i data-feather="moon"></i>
                  </span>
                </a>
            </li>
             
```
完成以上操作，夜间模式和跟随系统深色模式就实现了，小伙伴快去试试看吧。

## 三、怎么修改、增加CSS样式和深色模式

- 夜间模式的修改
打开/usr/themes/handsome/assets/css/darkmode.css文件，找到
```css
/*跟随系统模式*/
@media (prefers-color-scheme: dark) {
```
- 在它上面增加或者修改你需要的样式即可

跟随系统模式的修改（其实就是增加@media (prefers-color-scheme: dark)样式），找到
   ```css
/*跟随系统模式*/
@media (prefers-color-scheme: dark) {
```
在大括号后面(或者文件最后一个大括号上面)增加或者修改你需要的样式即可，注意每一个样式前面尽量加上body （后面的空格注意，参考我写的样式即可）。

## 四、怎样修改自动进入夜间模式的时间
打开darkmode.js,找到
```javascript
        if(new Date().getHours() > 22 || new Date().getHours() < 6){
```
数字22和6就是表示在晚上22点和早上6点之间为夜间模式，修改为你需要的时间数字即可。

## 五、盒子模型下背景不进入夜间模式问题

- 打开/usr/themes/handsome/assets/css/darkmode.css文件，找到
```php
    /*夜间模式*/ 
```
在它下面加入
```php
html.bg.night {
   background: #151617;
}
```
继续找到
```php
/*跟随系统模式*/
@media (prefers-color-scheme: dark) {
```
在它下面加入，即：
```php
/*跟随系统模式*/
@media (prefers-color-scheme: dark) {
html.bg.night {
   background: #151617;
}
```

最后修改：2020 年 04 月 05 日