前端实现夜间模式

同时调整了一些样式以匹配夜间模式下的效果 *稍后会做一个后端切换主题的功能
2024-03-08 15:26:36 +08:00 · 2024-03-08 15:26:36 +08:00 · d1683d4c03
commit d1683d4c03
parent 83c4676184
6 changed files with 67 additions and 15 deletions
--- a/views/layouts/main.php
+++ b/views/layouts/main.php
@ -10,6 +10,7 @@ use yii\bootstrap5\Breadcrumbs;
 use yii\bootstrap5\Html;
 use yii\bootstrap5\Nav;
 use yii\bootstrap5\NavBar;
+use yii\web\View;

 AppAsset::register($this);

@ -19,10 +20,11 @@ $this->registerMetaTag(['name' => 'viewport', 'content' => 'width=device-width,
 $this->registerMetaTag(['name' => 'description', 'content' => $this->params['meta_description'] ?? '']);
 $this->registerMetaTag(['name' => 'keywords', 'content' => $this->params['meta_keywords'] ?? '']);
 $this->registerLinkTag(['rel' => 'icon', 'type' => 'image/x-icon', 'href' => Yii::getAlias('@web/favicon.ico')]);
+$darkMode = Yii::$app->user->isGuest ? 0 : Yii::$app->user->identity->dark_mode;
 ?>
 <?php $this->beginPage() ?>
 <!DOCTYPE html>
-<html lang="<?= Yii::$app->language ?>" class="h-100">
+<html lang="<?= Yii::$app->language ?>" class="h-100" <?= $darkMode===1?'data-bs-theme="dark"':''?> >
 <head>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
@ -45,8 +47,8 @@ $this->registerLinkTag(['rel' => 'icon', 'type' => 'image/x-icon', 'href' => Yii
            ['label' => '分享管理', 'url' => ['/share/index']],
            ['label' => '文件收集', 'url' => ['/collection/index']],
            ['label' => '个人设置', 'url' => ['/user/info']],
-            ['label' => '系统设置', 'url' => ['/site/contact']],
-            ['label' => '应用下载', 'url' => ['/site/contact']],
+//            ['label' => '系统设置', 'url' => ['/site/contact']],
+//            ['label' => '应用下载', 'url' => ['/site/contact']],
            Yii::$app->user->isGuest
                ? ['label' => '登录', 'url' => ['/user/login']]
                : '<li class="nav-item">'
@ -73,7 +75,7 @@ $this->registerLinkTag(['rel' => 'icon', 'type' => 'image/x-icon', 'href' => Yii
    </div>
 </main>

-<footer id="footer" class="mt-auto py-3 bg-light">
+<footer id="footer" class="mt-auto py-3">
    <div class="container">
        <div class="row text-muted">
            <div class="col-md-6 text-center text-md-start"><?php echo '&copy; Created & Design by ' . '<a href="https://blog.chenx221.cyou" rel="external">Chenx221</a> | 2024 - ' . date('Y') ?></div>
@ -88,4 +90,12 @@ $this->registerLinkTag(['rel' => 'icon', 'type' => 'image/x-icon', 'href' => Yii
 <?php $this->endBody() ?>
 </body>
 </html>
+<?php
+if($darkMode===2){
+    $this->registerJsFile('@web/js/darkmode_auto.js', ['position' => View::POS_BEGIN]);
+}else if ($darkMode===1){
+    $this->registerJsFile('@web/js/darkmode.js', ['position' => View::POS_BEGIN]);
+}
+?>
 <?php $this->endPage() ?>
+
--- a/views/user/info.php
+++ b/views/user/info.php
@ -131,7 +131,7 @@ $user = new User();
                            <div class="storage-columns">
                                <div class="storage-usage" style="width: 27%">
                                    <p>当前已使用容量</p>
-                                    <span style="font-weight: 600;font-size: 1.4rem;color: black;padding-left: 2px;"><?= $totalUsed_F ?>
+                                    <span id="current"><?= $totalUsed_F ?>
                                </span>
                                    <span style="font-size: 0.9rem;">/ <?= $storageLimit_F ?></span>
                                </div>
@ -229,7 +229,6 @@ $user = new User();
                <div id="collapseAdvanced"
                     class="accordion-collapse collapse <?= ($focus === 'advanced') ? 'show' : '' ?>">
                    <div class="accordion-body">
-                        <!--TODO:二步验证、passwordless-->
                        <h4>二步验证</h4>
                        <hr>
                        <p>使用除您密码之外的第二种方法来增强您账号的安全性。</p>
@ -260,14 +259,8 @@ $user = new User();
                        </ul>
                        <br>

-                        <h4>无密码认证</h4>
-                        <hr>
-                        <p>遵循 FIDO2 标准为无密码身份验证设置您的账号。</p>
-                        <br>
-
                        <h4>主题</h4>
                        <hr>
-                        <p>可以在</p>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="useDarkTheme">
                            <label class="form-check-label" for="useDarkTheme">启用夜间模式</label>
--- a/web/css/home_style.css
+++ b/web/css/home_style.css
@ -1,10 +1,17 @@
 nav {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");
 }
+
 table a {
    text-decoration-line: none;
    color: black;
 }
+html[data-bs-theme="dark"] table a {
+    color: inherit; /* 或者你想要的任何颜色 */
+}
+/*.table-dark-a {*/
+/*    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));*/
+/*}*/

 .file_icon {
    font-size: xx-large;
@ -24,9 +31,11 @@ table a {
    font-size: large;
    line-height: 2;
 }
-.selector-col{
+
+.selector-col {
    width: 0;
 }
+
 .name-col {
    width: 50%;
 }
@ -83,6 +92,7 @@ table tbody .selected {
 table .selected a {
    color: black !important;
 }
+
 table tr td:first-child, table tr th:first-child {
    display: none;
 }
--- a/web/css/user-info.css
+++ b/web/css/user-info.css
@ -60,7 +60,9 @@
    color: rgb(100, 96, 100);
    font-size: 0.95rem;
 }
-
+html[data-bs-theme="dark"] .login-info-dv .user-login-info-content {
+    color: inherit;
+}
 .accordion-item {
    margin-bottom: 5px;
    border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important;
@ -116,7 +118,9 @@
    font-size: 0.75rem;
    color: rgb(140, 139, 139);
 }
-
+html[data-bs-theme="dark"] .storage-columns span, .storage-columns p {
+    color: inherit;
+}
 .storage-columns p {
    margin-bottom: 0.5rem !important;
 }
@ -149,3 +153,12 @@
    border-radius: 4px;
 }

+#current{
+    font-weight: 600;
+    font-size: 1.4rem;
+    color: black;
+    padding-left: 2px;
+}
+html[data-bs-theme="dark"] #current{
+    color: inherit;
+}
--- a/web/js/darkmode.js
+++ b/web/js/darkmode.js
@ -0,0 +1,10 @@
+window.onload = function () {
+    // 找到所有的outline按钮
+    var buttons = document.querySelectorAll('.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-light, .btn-outline-dark');
+
+    // 遍历所有的outline按钮
+    for (var i = 0; i < buttons.length; i++) {
+        // 替换 'btn-outline-*' 类为 'btn-*' 类
+        buttons[i].className = buttons[i].className.replace('btn-outline-', 'btn-');
+    }
+};
--- a/web/js/darkmode_auto.js
+++ b/web/js/darkmode_auto.js
@ -0,0 +1,16 @@
+window.onload = function() {
+    // 检查设备是否开启了夜间模式
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        // 如果开启了夜间模式，设置 data-bs-theme 属性为 'dark'
+        document.documentElement.setAttribute('data-bs-theme', 'dark');
+
+        // 找到所有的outline按钮
+        var buttons = document.querySelectorAll('.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-light, .btn-outline-dark');
+
+        // 遍历所有的outline按钮
+        for (var i = 0; i < buttons.length; i++) {
+            // 替换 'btn-outline-*' 类为 'btn-*' 类
+            buttons[i].className = buttons[i].className.replace('btn-outline-', 'btn-');
+        }
+    }
+};