Feat: Support auto theme in status pages

This commit is contained in:
Nelson Chan 2023-03-02 07:26:26 +08:00
parent beafbf27ad
commit 150607cc93
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">