feat(): 精简样式、适配深色模式

fordes123 · Dec 26, 2024 · 73f86fa · 73f86fa
1 parent 603d625
commit 73f86fa
Show file tree

Hide file tree

Showing 10 changed files with 961 additions and 3,218 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/assets/css/style.min.css b/assets/css/style.min.css
diff --git a/assets/image/guess.png b/assets/image/guess.png
diff --git a/assets/image/quote.png b/assets/image/quote.png
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -141,4 +141,27 @@ jQuery(document).ready(function ($) {
             },
         });
     });
+
+    /** 主题切换 */
+    let themeButtons = {
+        'default': $('#default'),
+        'dark': $('#dark'),
+        'light': $('#light')
+    };
+    let savedTheme = localStorage.getItem("data-bs-theme") || 'default';
+    let target = themeButtons[savedTheme];
+    $('.dropdown-item').removeClass('active');
+    target.addClass('active');
+    $('#theme-toggle').html(target.find("i").prop('outerHTML'));
+
+    $('.dropdown-item').on('click', function() {
+        let $this = $(this);
+        let theme = $this.attr('id');
+
+        localStorage.setItem("data-bs-theme", theme);
+        document.documentElement.setAttribute("data-bs-theme", theme);
+        $('#theme-toggle').html($this.find("i").prop('outerHTML'));
+        $('.dropdown-item').removeClass('active');
+        $this.addClass('active');
+    });
 });
diff --git a/assets/js/script.min.js b/assets/js/script.min.js
diff --git a/header.php b/header.php
@@ -1,7 +1,30 @@
 <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
 <!DOCTYPE html>
-<html lang="zh">
+<html lang="zh" data-bs-theme=night>
 <head>
+<script>
+        let state = localStorage.getItem("data-bs-theme") || "default";
+        switch (state) {
+          case "dark":
+            document.documentElement.setAttribute("data-bs-theme", "dark");
+            break;
+          case "light":
+            document.documentElement.setAttribute("data-bs-theme", "light");
+            break;
+          default:
+            localStorage.setItem("data-bs-theme", "default");
+            state = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
+            document.documentElement.setAttribute("data-bs-theme", state);
+            break;
+        }
+
+        window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', event => {
+            if (localStorage.getItem("data-bs-theme") === "default") {
+                document.documentElement.setAttribute("data-bs-theme", event.matches ? "dark" : "light");
+            }
+        });
+    </script>
+
   <meta charset="<?php $this->options->charset(); ?>">
   <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
   <meta name="author" content="fordes123" />

diff --git a/post.php b/post.php
@@ -65,14 +65,14 @@
                             </div>
                             <div class="post-actions row g-2 mt-4">
                                 <div class="col">
-                                    <a href="#" class="btn btn-light btn-icon btn-block btn-lg disabled">
+                                    <a href="#" class="btn btn-icon btn-block btn-lg disabled">
                                         <span><i class="far fa-eye"></i></span>
                                         <b class="num"><?php pageview($this->cid) ?></b>
                                     </a>
                                 </div>
                                 <div class="col">
                                     <a type="button"
-                                       class="btn btn-light btn-icon btn-block btn-lg <?php echo $agree['recording']?'disabled':''; ?>"
+                                       class="btn btn-icon btn-block btn-lg <?php echo $agree['recording']?'disabled':''; ?>"
                                        id="agree-btn"
                                        data-cid="<?php echo $this->cid; ?>"
                                        data-url="<?php $this->permalink(); ?>">
@@ -81,7 +81,7 @@ class="btn btn-light btn-icon btn-block btn-lg <?php echo $agree['recording']?'d
                                     </a>
                                 </div>
                                 <div class="col">
-                                    <a href="#" class="btn-share-toggler btn btn-light btn-icon btn-block btn-lg disabled">
+                                    <a href="#" class="btn-share-toggler btn btn-icon btn-block btn-lg disabled">
                                         <span><i class="far fa-star"></i></span>
                                     </a>
                                 </div>

diff --git a/sidebar.php b/sidebar.php
@@ -1,4 +1,4 @@
-<aside class="site-aside bg-white">
+<aside class="site-aside">
     <div class="aside-wrapper">
         <a href="<?php $this->options->siteUrl(); ?>" class="aside-brand d-none d-xl-flex" rel="home">
             <img src="<?php empty($this->options->biglogo) ? $this->options->themeUrl('/assets/image/head.png') : $this->options->biglogo(); ?>" class="logo nc-no-lazy" alt="<?php $this->options->title(); ?>">

diff --git a/topbar.php b/topbar.php
@@ -1,4 +1,4 @@
-<header class="site-header bg-white">
+<header class="site-header">
   <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
       <a href="<?php $this->options->siteUrl(); ?>" class="navbar-brand d-xl-none" rel="home"><img src="<?php empty($this->options->biglogo) ? $this->options->themeUrl('/assets/image/head.png') : $this->options->biglogo(); ?>" class="logo nc-no-lazy" alt="<?php $this->options->title(); ?>"></a>
@@ -13,9 +13,20 @@
           <?php endwhile; ?>
         </ul>
       </div>
-      <div class="d-flex align-items-center flex-shrink-0 ms-auto me-lg-4">
-        <a href="https://github.com/fordes123/ITEM" class="btn btn-link btn-icon btn-rounded ms-3 ms-md-4 "><span><i class="fab fa-github"></i></span></a>
-        <a href="javascript:;" class="btn btn-link btn-icon btn-rounded ms-3 ms-md-4 " id="menuCollasped"><span><i class="fas fa-th-large"></i></span></a>
+
+      <div class="d-flex align-items-center flex-shrink-0 ms-auto me-lg-4 gap-3">
+        <a href="https://github.com/fordes123/ITEM" class="btn btn-link btn-icon btn-rounded "><span><i class="fab fa-github"></i></span></a>
+        <div class="dropdown">
+          <a class="btn btn-link btn-icon btn-rounded d-flex align-items-center justify-content-center" type="button" id="theme-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+
+          </a>
+          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="theme-toggle">
+            <li><button id="default" class="dropdown-item" type="button"><i class="fas fa-adjust"></i> 跟随系统</button></li>
+            <li><button id="dark" class="dropdown-item" type="button"><i class="fas fa-moon"></i> 深色模式</button></li>
+            <li><button id="light" class="dropdown-item" type="button"><i class="fas fa-sun"></i> 浅色模式</button></li>
+          </ul>
+        </div>
+        <a href="javascript:;" class="btn btn-link btn-icon btn-rounded " id="menuCollasped"><span><i class="fas fa-th-large"></i></span></a>
       </div>
     </div>
   </nav>