实现开关夜间模式功能

This commit is contained in:
Chenx221 2024-03-08 16:20:22 +08:00
parent d1683d4c03
commit 4a5f4201af
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
3 changed files with 40 additions and 8 deletions

View File

@ -45,7 +45,7 @@ class UserController extends Controller
], ],
[ [
'allow' => true, 'allow' => true,
'actions' => ['logout', 'setup-two-factor', 'change-password', 'download-recovery-codes', 'remove-two-factor'], 'actions' => ['logout', 'setup-two-factor', 'change-password', 'download-recovery-codes', 'remove-two-factor', 'set-theme'],
'roles' => ['@'], // only logged-in user can do these 'roles' => ['@'], // only logged-in user can do these
] ]
], ],
@ -63,6 +63,7 @@ class UserController extends Controller
'download-recovery-codes' => ['GET'], 'download-recovery-codes' => ['GET'],
'remove-two-factor' => ['POST'], 'remove-two-factor' => ['POST'],
'verify-two-factor' => ['GET', 'POST'], 'verify-two-factor' => ['GET', 'POST'],
'set-theme' => ['POST'],
], ],
], ],
] ]
@ -488,4 +489,17 @@ class UserController extends Controller
return $this->redirect(['user/info']); return $this->redirect(['user/info']);
} }
} }
/**
* 更改用户主题
* @return Response
*/
public function actionSetTheme(): Response
{
$darkMode = Yii::$app->request->post('dark_mode', 0);
$user = Yii::$app->user->identity;
$user->dark_mode = $darkMode;
$user->save();
return $this->asJson(['success' => true]);
}
} }

View File

@ -62,6 +62,9 @@ if (!is_null($totp_secret)) {
// totp // totp
$user = new User(); $user = new User();
// Dark Mode
$darkMode = Yii::$app->user->identity->dark_mode;
?> ?>
<div class="user-info"> <div class="user-info">
@ -262,12 +265,14 @@ $user = new User();
<h4>主题</h4> <h4>主题</h4>
<hr> <hr>
<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" <?= $darkMode === 0 ? '' : ($darkMode === 1 ? 'checked' : 'disabled') ?>>
<label class="form-check-label" for="useDarkTheme">启用夜间模式</label> <label class="form-check-label" for="useDarkTheme">启用夜间模式</label>
</div> </div>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="autoTheme"> <input class="form-check-input" type="checkbox" role="switch"
<label class="form-check-label" for="autoTheme">Auto</label> id="followSystemTheme" <?= $darkMode === 2 ? 'checked' : '' ?>>
<label class="form-check-label" for="autoTheme">跟随设备主题</label>
</div> </div>
<br> <br>

View File

@ -18,5 +18,18 @@ $(document).ready(function () {
$('#totpSetupModal').on('hidden.bs.modal', function () { $('#totpSetupModal').on('hidden.bs.modal', function () {
$('#totp-enabled').prop('checked', false); $('#totp-enabled').prop('checked', false);
}); });
$('#useDarkTheme').change(function() {
var darkMode = this.checked ? 1 : 0;
$.post('index.php?r=user%2Fset-theme', {dark_mode: darkMode}, function() {
location.reload();
});
});
$('#followSystemTheme').change(function() {
$('#useDarkTheme').prop('checked', false);
var darkMode = this.checked ? 2 : 0;
$.post('index.php?r=user%2Fset-theme', {dark_mode: darkMode}, function() {
location.reload();
});
});
}); });