feat: auto dark mode

The-NeXT-Project · Jun 21, 2024 · 7882cc9 · 7882cc9
1 parent 844095e
commit 7882cc9
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 9 deletions.
diff --git a/resources/views/tabler/admin/header.tpl b/resources/views/tabler/admin/header.tpl
@@ -1,12 +1,29 @@
 <!doctype html>
-<html lang="{$user->locale}">
+<html lang="{$user->locale}"
+        data-bs-theme="{$user->is_dark_mode === 1 ? 'dark' : ($user->is_dark_mode === 2 ? 'auto' : 'light')}">
 
 <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
     <meta name="format-detection" content="telephone=no"/>
     <title>{$config['appName']}</title>
+    <!-- Auto dark mode -->
+    <script>
+        ;(function () {
+            const htmlElement = document.querySelector("html")
+            const theme = htmlElement.getAttribute("data-bs-theme");
+
+            if(theme === 'dark-auto' || theme === 'auto') {
+                function updateTheme() {
+                    htmlElement.setAttribute("data-bs-theme",
+                        window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+                }
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+                updateTheme()
+            }
+        })()
+    </script>
     <!-- CSS files -->
     <link href="//{$config['jsdelivr_url']}/npm/@tabler/core@latest/dist/css/tabler.min.css" rel="stylesheet"/>
     <link href="//{$config['jsdelivr_url']}/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" rel="stylesheet"/>
@@ -26,8 +43,10 @@
     </style>
 </head>
 
-{if $user->is_dark_mode}
+{if $user->is_dark_mode === 1}
 <body data-bs-theme="dark">
+{elseif $user->is_dark_mode === 2}
+<body data-bs-theme="auto">
 {else}
 <body>
 {/if}

diff --git a/resources/views/tabler/header.tpl b/resources/views/tabler/header.tpl
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{$config['locale']}">
+<html lang="{$config['locale']}" data-bs-theme="auto">
 
 <head>
     <meta charset="utf-8"/>
@@ -8,6 +8,22 @@
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>{$config['appName']}</title>
+    <!-- Auto dark mode -->
+    <script>
+        ;(function () {
+            const htmlElement = document.querySelector("html")
+            const theme = htmlElement.getAttribute("data-bs-theme");
+
+            if(theme === 'dark-auto' || theme === 'auto') {
+                function updateTheme() {
+                    htmlElement.setAttribute("data-bs-theme",
+                        window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+                }
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+                updateTheme()
+            }
+        })()
+    </script>
     <!-- CSS files -->
     <link href="//{$config['jsdelivr_url']}/npm/@tabler/core@latest/dist/css/tabler.min.css" rel="stylesheet"/>
     <link href="//{$config['jsdelivr_url']}/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" rel="stylesheet"/>

diff --git a/resources/views/tabler/user/edit.tpl b/resources/views/tabler/user/edit.tpl
@@ -459,10 +459,13 @@
                                                     <h3 class="card-title">修改主题模式</h3>
                                                     <div class="mb-3">
                                                         <select id="theme-mode" class="form-select">
-                                                            <option value="0" {if ! $user->is_dark_mode}selected{/if}>
+                                                            <option value="2" {if $user->is_dark_mode === 2}selected{/if}>
+                                                                自动
+                                                            </option>
+                                                            <option value="0" {if $user->is_dark_mode === 0}selected{/if}>
                                                                 浅色
                                                             </option>
-                                                            <option value="1" {if $user->is_dark_mode}selected{/if}>
+                                                            <option value="1" {if $user->is_dark_mode === 1}selected{/if}>
                                                                 深色
                                                             </option>
                                                         </select>

diff --git a/resources/views/tabler/user/header.tpl b/resources/views/tabler/user/header.tpl
@@ -1,5 +1,6 @@
 <!doctype html>
-<html lang="{$user->locale}">
+<html lang="{$user->locale}"
+      data-bs-theme="{$user->is_dark_mode === 1 ? 'dark' : ($user->is_dark_mode === 2 ? 'auto' : 'light')}">
 
 <head>
     <meta charset="utf-8"/>
@@ -8,6 +9,22 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <meta name="referrer" content="never">
     <title>{$config['appName']}</title>
+    <!-- Auto dark mode -->
+    <script>
+        ;(function () {
+            const htmlElement = document.querySelector("html")
+            const theme = htmlElement.getAttribute("data-bs-theme");
+
+            if(theme === 'dark-auto' || theme === 'auto') {
+                function updateTheme() {
+                    htmlElement.setAttribute("data-bs-theme",
+                        window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+                }
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
+                updateTheme()
+            }
+        })()
+    </script>
     <!-- CSS files -->
     <link href="//{$config['jsdelivr_url']}/npm/@tabler/core@latest/dist/css/tabler.min.css" rel="stylesheet"/>
     <link href="//{$config['jsdelivr_url']}/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" rel="stylesheet"/>
@@ -38,8 +55,10 @@
     </style>
 </head>
 
-{if $user->is_dark_mode}
+{if $user->is_dark_mode === 1}
 <body data-bs-theme="dark">
+{elseif $user->is_dark_mode === 2}
+<body data-bs-theme="auto">
 {else}
 <body>
 {/if}

diff --git a/resources/views/tabler/user/index.tpl b/resources/views/tabler/user/index.tpl
@@ -110,7 +110,7 @@
                                                 速度限制
                                             </div>
                                             <div class="text-secondary">
-                                                {if $user->node_speedlimit !== 0.0}
+                                                {if $user->node_speedlimit !== 0}
                                                     <code>{$user->node_speedlimit}</code>
                                                     Mbps
                                                 {else}

diff --git a/src/Controllers/User/InfoController.php b/src/Controllers/User/InfoController.php
@@ -289,7 +289,7 @@ public function updateThemeMode(ServerRequest $request, Response $response, arra
         $theme_mode = (int) $this->antiXss->xss_clean($request->getParam('theme_mode'));
         $user = $this->user;
 
-        $user->is_dark_mode = in_array($theme_mode, [0, 1]) ? $theme_mode : 0;
+        $user->is_dark_mode = in_array($theme_mode, [0, 1, 2]) ? $theme_mode : 0;
 
         if (! $user->save()) {
             return ResponseHelper::error($response, '切换失败');