chore(ui): add option for editor theme to sync with system (#5669)

kestra-io · Oct 28, 2024 · c20e105 · c20e105
1 parent 10374a1
commit c20e105
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/ui/src/components/inputs/Editor.vue b/ui/src/components/inputs/Editor.vue
@@ -117,9 +117,10 @@
             ...mapGetters("core", ["guidedProperties"]),
             ...mapGetters("flow", ["flowValidation"]),
             themeComputed() {
-                const darkTheme = document.getElementsByTagName("html")[0].className.indexOf("dark") >= 0;
-
-                return this.theme ? this.theme : (localStorage.getItem("editorTheme") || (darkTheme ? "dark" : "vs"))
+                const savedEditorTheme = localStorage.getItem("editorTheme");
+                return savedEditorTheme === "syncWithSystem"
+                    ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+                    : (savedEditorTheme === "light" ? "light" : "dark");
             },
             containerClass() {
                 return [

diff --git a/ui/src/components/settings/BasicSettings.vue b/ui/src/components/settings/BasicSettings.vue
@@ -277,14 +277,13 @@
             };
         },
         created() {
-            const darkTheme = document.getElementsByTagName("html")[0].className.indexOf("dark") >= 0;
             const store = useStore();
 
             this.pendingSettings.defaultNamespace = localStorage.getItem("defaultNamespace") || "";
             this.pendingSettings.defaultLogLevel = localStorage.getItem("defaultLogLevel") || "INFO";
             this.pendingSettings.lang = Utils.getLang();
             this.pendingSettings.theme = localStorage.getItem("theme") || "light";
-            this.pendingSettings.editorTheme = localStorage.getItem("editorTheme") || (darkTheme ? "dark" : "vs");
+            this.pendingSettings.editorTheme = localStorage.getItem("editorTheme") || "dark";
             this.pendingSettings.chartColor = localStorage.getItem("scheme") || "default";
             this.pendingSettings.dateFormat = localStorage.getItem(DATE_FORMAT_STORAGE_KEY) || "llll";
             this.pendingSettings.timezone = localStorage.getItem(TIMEZONE_STORAGE_KEY) || this.$moment.tz.guess();
@@ -440,8 +439,9 @@
             },
             editorThemesOptions() {
                 return  [
-                    {value: "vs", text: "Light"},
-                    {value: "dark", text: "Dark"}
+                    {value: "light", text: "Light"},
+                    {value: "dark", text: "Dark"},
+                    {value: "syncWithSystem", text: "Sync With System"}
                 ]
             },
             dateFormats() {

diff --git a/ui/src/utils/scheme.js b/ui/src/utils/scheme.js
@@ -110,5 +110,5 @@ export const getScheme = (state, type = "executions") => {
     const scheme = localStorage.getItem(SCHEME) ?? "classic";
     const theme = localStorage.getItem("theme") ?? "light";
 
-    return OPTIONS[scheme][theme][type][state];
+    return OPTIONS[scheme]?.[theme]?.[type]?.[state];
 };