ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-27 16:54:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Feat: Support auto theme in status pages

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
server/socket-handlers/status-page-socket-handler.js
View file

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

3
src/mixins/theme.js
View file

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

10
src/pages/StatusPage.vue
View file

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