✨ 增加颜色模式自动切换支持 #311

Licoy · Nov 4, 2024 · 88ecf96 · 88ecf96
1 parent c559e0f
commit 88ecf96
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 45 deletions.
diff --git a/assets/dist/js/libs.min.js b/assets/dist/js/libs.min.js
diff --git a/assets/dist/js/puock.min.js b/assets/dist/js/puock.min.js
diff --git a/assets/dist/style/libs.min.css b/assets/dist/style/libs.min.css
diff --git a/assets/js/puock.js b/assets/js/puock.js
@@ -660,25 +660,35 @@ class Puock {
     }
 
     modeInit() {
-        let light = this.localstorageToggle('light');
-        if (light !== undefined) {
-            this.modeChange(light);
-        }
+        this.modeChange();
     }
 
-    modeChange(isLight = null, isSwitch = false) {
+    modeChange(toLight = null, isSwitch = false) {
         const body = $("body");
-        if (typeof (isLight) === "string") {
-            isLight = isLight === 'true';
+        if (typeof (toLight) === "string") {
+            toLight = toLight === 'true';
         }
-        if (isLight === null) {
-            isLight = body.hasClass(this.data.tag + "-light");
+        let mode = Cookies.get('mode') || 'auto'
+        if (toLight === null) {
+            toLight = mode==='light';
+            if(mode==='auto'){
+                toLight = !window.matchMedia('(prefers-color-scheme:dark)').matches
+            }
         }
         if (isSwitch) {
-            isLight = !isLight;
+            if(mode==='light'){
+                mode = 'dark'
+                toLight = !toLight;
+            }else if(mode==='dark'){
+                mode = 'auto'
+                toLight = !window.matchMedia('(prefers-color-scheme:dark)').matches;
+            }else{
+                mode = 'light'
+                toLight = !toLight;
+            }
         }
         let dn = 'd-none';
-        if (isLight) {
+        if (toLight) {
             $("#logo-light").removeClass(dn);
             $("#logo-dark").addClass(dn);
         } else {
@@ -694,17 +704,21 @@ class Puock {
                 target = $(el).find("i");
             }
             if (target) {
-                target.removeClass("fa-sun").removeClass("fa-moon").addClass(isLight ? "fa-sun" : "fa-moon");
+                target.removeClass("fa-sun").removeClass("fa-moon").removeClass('fa-laptop')
+                    .addClass(mode==='auto' ? 'fa-laptop' : (mode==='light' ? "fa-sun" : "fa-moon"));
             }
         })
-        body.removeClass(isLight ? this.data.tag + "-dark" : this.data.tag + "-light");
-        body.addClass(isLight ? this.data.tag + "-light" : this.data.tag + "-dark");
-        this.localstorageToggle('light', isLight)
-        Cookies.set('mode', isLight ? 'light' : 'dark')
+        body.removeClass(this.data.tag + "-auto")
+        body.removeClass(toLight ? this.data.tag + "-dark" : this.data.tag + "-light");
+        body.addClass(toLight ? this.data.tag + "-light" : this.data.tag + "-dark");
+        // this.localstorageToggle('light', toLight)
+        Cookies.set('mode', mode)
     }
 
     modeChangeListener() {
-        this.modeChange(!window.matchMedia('(prefers-color-scheme:dark)').matches);
+        if(Cookies.get('mode')==='auto'){
+            this.modeChange(!window.matchMedia('(prefers-color-scheme:dark)').matches);
+        }
     }
 
     registerModeChangeEvent() {

diff --git a/header.php b/header.php
@@ -14,7 +14,7 @@
         <?php echo pk_get_option('tj_code_header', ''); ?>
     <?php endif; ?>
 </head>
-<body class="puock-<?php echo pk_theme_light() ? 'light' : 'dark';
+<body class="puock-<?php echo pk_theme_mode();
 echo current_theme_supports('custom-background') ? ' custom-background' : ''; ?>">
 <div>
     <?php if (is_single()): ?>
@@ -46,9 +46,9 @@ class="<?php pk_open_box_animated('animated fadeInDown') ?> <?php if (pk_is_chec
                     </div>
                 </div>
                 <div class="mobile-menus d-block d-lg-none p-1 puock-text">
-                    <i class="fa fa-bars t-xl mr-2 mobile-menu-s"></i>
+                    <i class="fa fa-bars t-md mr-2 mobile-menu-s"></i>
                     <?php if (pk_is_checked('theme_mode_s')): ?>
-                        <i class="fa-regular fa-<?php echo(pk_theme_light() ? 'sun' : 'moon'); ?> colorMode t-xl mr-2"></i>
+                        <i class="fa fa-<?php echo((pk_theme_mode() === 'auto' ? 'laptop' : (pk_theme_light() ? 'sun' : 'moon'))); ?> colorMode t-md mr-2"></i>
                     <?php endif; ?>
                     <i class="search-modal-btn fa fa-search t-md"></i>
                 </div>

diff --git a/inc/fun/core.php b/inc/fun/core.php
@@ -597,11 +597,19 @@ function pk_checked_out($name, $out = '', $default = 0)
 function pk_theme_light()
 {
     if (isset($_COOKIE['mode'])) {
-        return $_COOKIE['mode'] == 'light';
+        return ($_COOKIE['mode'] == 'light') || $_COOKIE['mode'] == 'auto';
     }
     return pk_get_option('theme_mode', 'light') == 'light';
 }
 
+function pk_theme_mode()
+{
+    if (isset($_COOKIE['mode'])) {
+        return $_COOKIE['mode'];
+    }
+    return 'auto';
+}
+
 //动画载入
 function pk_open_box_animated($class, $echo = true)
 {
@@ -673,7 +681,7 @@ function pk_get_main_menu($mobile = false)
     }
     if (!$mobile) {
         if (pk_is_checked('theme_mode_s')) {
-            $out .= '<li><a class="colorMode" data-bs-toggle="tooltip" title="模式切换" href="javascript:void(0)"><i class="fa-regular fa-' . (pk_theme_light() ? 'sun' : 'moon') . '"></i></a></li>';
+            $out .= '<li><a class="colorMode" data-bs-toggle="tooltip" title="模式切换" href="javascript:void(0)"><i class="fa fa-' . ((pk_theme_mode() === 'auto' ? 'laptop' : (pk_theme_light() ? 'sun' : 'moon'))) . '"></i></a></li>';
         }
         $out .= '<li><a class="search-modal-btn" data-bs-toggle="tooltip" title="搜索" href="javascript:void(0)"><i class="fa fa-search"></i></a></li>';
     }