From 150607cc93681c46d7c636e65c2ddf6f576912cb Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Thu, 2 Mar 2023 07:26:26 +0800
Subject: [PATCH] Feat: Support auto theme in status pages

---
 server/socket-handlers/status-page-socket-handler.js |  2 +-
 src/mixins/theme.js                                  |  3 +++
 src/pages/StatusPage.vue                             | 10 +++++++---
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/server/socket-handlers/status-page-socket-handler.js b/server/socket-handlers/status-page-socket-handler.js
index 717aba9c4..411bda556 100644
--- a/server/socket-handlers/status-page-socket-handler.js
+++ b/server/socket-handlers/status-page-socket-handler.js
@@ -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);
 
diff --git a/src/mixins/theme.js b/src/mixins/theme.js
index 8d2252670..2f7867df0 100644
--- a/src/mixins/theme.js
+++ b/src/mixins/theme.js
@@ -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") {
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index edf32561b..7c340f8b8 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -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">