Merge pull request #2870 from chakflying/feat/auto-theme-status-page

Feat: Support auto theme in status pages
This commit is contained in:
Louis Lam 2023-04-03 02:38:30 +08:00 committed by GitHub
commit 1be74e2720
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 4 deletions

View File

@ -276,7 +276,7 @@ module.exports.statusPageSocketHandler = (socket) => {
let statusPage = R.dispense("status_page");
statusPage.slug = slug;
statusPage.title = title;
statusPage.theme = "light";
statusPage.theme = "auto";
statusPage.icon = "";
await R.store(statusPage);

View File

@ -39,6 +39,9 @@ export default {
}
if (this.path.startsWith("/status-page") || this.path.startsWith("/status")) {
if (this.statusPageTheme === "auto") {
return this.system;
}
return this.statusPageTheme;
} else {
if (this.userTheme === "auto") {

View File

@ -34,9 +34,13 @@
</div>
</div>
<div class="my-3 form-check form-switch">
<input id="switch-theme" v-model="config.theme" class="form-check-input" type="checkbox" true-value="dark" false-value="light">
<label class="form-check-label" for="switch-theme">{{ $t("Switch to Dark Theme") }}</label>
<div class="my-3">
<label for="switch-theme" class="form-label">{{ $t("Theme") }}</label>
<select id="switch-theme" v-model="config.theme" class="form-select">
<option value="auto">{{ $t("Auto") }}</option>
<option value="light">{{ $t("Light") }}</option>
<option value="dark">{{ $t("Dark") }}</option>
</select>
</div>
<div class="my-3 form-check form-switch">