Handsome主题修改夜间模式方法

低调G
2020-05-02 / 3 评论 / 4,362 阅读 / 正在检测是否收录...

最近在7°期盼博客看到了Typecho主题添加夜晚日间模式的文章,于是尝试自己给Handsmoe主题添加夜间模式。
当然如果你不喜欢自己动手可以使用我做的这款[button color="success" icon="glyphicon glyphicon-link" url="https://www.ddg.ink/69.html" type=""]Handsome主题夜间模式插件[/button]
下面把在7°期盼博客看到的修改方法公布:

一、夜间模式js和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
找到

<!--主题核心js-->
    <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>

在下面加入

<!--darkmode.js-->
    <script src="<?php echo STATIC_PATH ?>js/darkmode.js?v=dedediy"></script>

打开
/usr/themes/handsome/component/header.php
找到

<style type="text/css">

<?php echo Content::exportCss($this) ?>

</style>

在下面加入

<!--darkmode.css-->
<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/darkmode.css?v=dedediy" type="text/css" />

打开
/usr/themes/handsome/component/headnav.php
找到

<?php if (!in_array('hideLogin',$this->options->featuresetup)): ?>

在上面加入

<!--darkmode start-->
    <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>
<!--darkmode end-->

完成以上操作,夜间模式和跟随系统深色模式就实现了,小伙伴快去试试看吧。

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

夜间模式的修改
打开
/usr/themes/handsome/assets/css/darkmode.css
找到

/*跟随系统模式*/
@media (prefers-color-scheme: dark) {

在它上面增加或者修改你需要的样式即可

跟随系统模式的修改(其实就是增加@media (prefers-color-scheme: dark)样式)找到

/*跟随系统模式*/
@media (prefers-color-scheme: dark) {

在大括号后面(或者文件最后一个大括号上面)增加或者修改你需要的样式即可,注意每一个样式前面尽量加上body (后面的空格注意,参考我写的样式即可)。

四、怎样修改自动进入夜间模式的时间

打开 darkmode.js 找到

if(new Date().getHours() > 22 || new Date().getHours() < 6){

数字22和6就是表示在晚上22点和早上6点之间为夜间模式,修改为你需要的时间数字即可。

本文转自:7°期盼博客

0

评论 (3)

取消
  1. 头像
    琪季
    Windows 7 · Google Chrome

    请问插件什么时候发布

    回复
    1. 头像
      低调哥 作者
      Android Oreo · UC Browser
      @ 琪季

      已经发布了哦

      回复
    2. 头像
      低调哥 作者
      Windows X64 · UC Browser
      @ 琪季

      出差下班今天才回来,明天发布。

      回复