chenx221/yii2-netdisk
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

前端实现夜间模式

Browse Source 
同时调整了一些样式以匹配夜间模式下的效果
*稍后会做一个后端切换主题的功能
This commit is contained in:
Chenx221 2024-03-08 15:26:36 +08:00
parent 83c4676184
commit d1683d4c03
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
6 changed files with 67 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
views/layouts/main.php
View File

@ -10,6 +10,7 @@ use yii\bootstrap5\Breadcrumbs;
use yii\bootstrap5\Html; use yii\bootstrap5\Html;
use yii\bootstrap5\Nav; use yii\bootstrap5\Nav;
use yii\bootstrap5\NavBar; use yii\bootstrap5\NavBar;
use yii\web\View;
AppAsset::register($this); 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' => 'description', 'content' => $this->params['meta_description'] ?? '']);
$this->registerMetaTag(['name' => 'keywords', 'content' => $this->params['meta_keywords'] ?? '']); $this->registerMetaTag(['name' => 'keywords', 'content' => $this->params['meta_keywords'] ?? '']);
$this->registerLinkTag(['rel' => 'icon', 'type' => 'image/x-icon', 'href' => Yii::getAlias('@web/favicon.ico')]); $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() ?> <?php $this->beginPage() ?>
<!DOCTYPE html> <!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> <head>
<title><?= Html::encode($this->title) ?></title> <title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?> <?php $this->head() ?>
@ -45,8 +47,8 @@ $this->registerLinkTag(['rel' => 'icon', 'type' => 'image/x-icon', 'href' => Yii
['label' => '分享管理', 'url' => ['/share/index']], ['label' => '分享管理', 'url' => ['/share/index']],
['label' => '文件收集', 'url' => ['/collection/index']], ['label' => '文件收集', 'url' => ['/collection/index']],
['label' => '个人设置', 'url' => ['/user/info']], ['label' => '个人设置', 'url' => ['/user/info']],
['label' => '系统设置', 'url' => ['/site/contact']], // ['label' => '系统设置', 'url' => ['/site/contact']],
['label' => '应用下载', 'url' => ['/site/contact']], // ['label' => '应用下载', 'url' => ['/site/contact']],
Yii::$app->user->isGuest Yii::$app->user->isGuest
? ['label' => '登录', 'url' => ['/user/login']] ? ['label' => '登录', 'url' => ['/user/login']]
: '<li class="nav-item">' : '<li class="nav-item">'
@ -73,7 +75,7 @@ $this->registerLinkTag(['rel' => 'icon', 'type' => 'image/x-icon', 'href' => Yii
</div> </div>
</main> </main>
<footer id="footer" class="mt-auto py-3 bg-light"> <footer id="footer" class="mt-auto py-3">
<div class="container"> <div class="container">
<div class="row text-muted"> <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> <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() ?> <?php $this->endBody() ?>
</body> </body>
</html> </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() ?> <?php $this->endPage() ?>

9
views/user/info.php
View File

@ -131,7 +131,7 @@ $user = new User();
<div class="storage-columns"> <div class="storage-columns">
<div class="storage-usage" style="width: 27%"> <div class="storage-usage" style="width: 27%">
<p>当前已使用容量</p> <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>
<span style="font-size: 0.9rem;">/ <?= $storageLimit_F ?></span> <span style="font-size: 0.9rem;">/ <?= $storageLimit_F ?></span>
</div> </div>
@ -229,7 +229,6 @@ $user = new User();
<div id="collapseAdvanced" <div id="collapseAdvanced"
class="accordion-collapse collapse <?= ($focus === 'advanced') ? 'show' : '' ?>"> class="accordion-collapse collapse <?= ($focus === 'advanced') ? 'show' : '' ?>">
<div class="accordion-body"> <div class="accordion-body">
<!--TODO:二步验证、passwordless-->
<h4>二步验证</h4> <h4>二步验证</h4>
<hr> <hr>
<p>使用除您密码之外的第二种方法来增强您账号的安全性。</p> <p>使用除您密码之外的第二种方法来增强您账号的安全性。</p>
@ -260,14 +259,8 @@ $user = new User();
</ul> </ul>
<br> <br>
<h4>无密码认证</h4>
<hr>
<p>遵循 FIDO2 标准为无密码身份验证设置您的账号。</p>
<br>
<h4>主题</h4> <h4>主题</h4>
<hr> <hr>
<p>可以在</p>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="useDarkTheme"> <input class="form-check-input" type="checkbox" role="switch" id="useDarkTheme">
<label class="form-check-label" for="useDarkTheme">启用夜间模式</label> <label class="form-check-label" for="useDarkTheme">启用夜间模式</label>

10
web/css/home_style.css
View File

@ -1,10 +1,17 @@
nav { 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"); --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 { table a {
text-decoration-line: none; text-decoration-line: none;
color: black; 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 { .file_icon {
font-size: xx-large; font-size: xx-large;
@ -24,9 +31,11 @@ table a {
font-size: large; font-size: large;
line-height: 2; line-height: 2;
} }
.selector-col { .selector-col {
width: 0; width: 0;
} }
.name-col { .name-col {
width: 50%; width: 50%;
} }
@ -83,6 +92,7 @@ table tbody .selected {
table .selected a { table .selected a {
color: black !important; color: black !important;
} }
table tr td:first-child, table tr th:first-child { table tr td:first-child, table tr th:first-child {
display: none; display: none;
} }

17
web/css/user-info.css
View File

@ -60,7 +60,9 @@
color: rgb(100, 96, 100); color: rgb(100, 96, 100);
font-size: 0.95rem; font-size: 0.95rem;
} }
html[data-bs-theme="dark"] .login-info-dv .user-login-info-content {
color: inherit;
}
.accordion-item { .accordion-item {
margin-bottom: 5px; margin-bottom: 5px;
border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important; border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important;
@ -116,7 +118,9 @@
font-size: 0.75rem; font-size: 0.75rem;
color: rgb(140, 139, 139); color: rgb(140, 139, 139);
} }
html[data-bs-theme="dark"] .storage-columns span, .storage-columns p {
color: inherit;
}
.storage-columns p { .storage-columns p {
margin-bottom: 0.5rem !important; margin-bottom: 0.5rem !important;
} }
@ -149,3 +153,12 @@
border-radius: 4px; border-radius: 4px;
} }
#current{
font-weight: 600;
font-size: 1.4rem;
color: black;
padding-left: 2px;
}
html[data-bs-theme="dark"] #current{
color: inherit;
}

10
web/js/darkmode.js Normal file
View File

@ -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-');
}
};

16
web/js/darkmode_auto.js Normal file
View File

@ -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-');
}
}
};