fix default values for system-theme-overrides (#20464)

directus · Nov 17, 2023 · 091d1a6 · 091d1a6
1 parent d9bd5ad
commit 091d1a6
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/.changeset/moody-pants-smile.md b/.changeset/moody-pants-smile.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Fixed default values for system-theme-overrides interface
diff --git a/api/src/database/system-data/fields/settings.yaml b/api/src/database/system-data/fields/settings.yaml
@@ -120,6 +120,8 @@ fields:
   - field: theme_light_overrides
     width: full
     interface: system-theme-overrides
+    options:
+      appearance: light
     group: theming_group
     special:
       - cast-json
@@ -134,6 +136,8 @@ fields:
   - field: theme_dark_overrides
     width: full
     interface: system-theme-overrides
+    options:
+      appearance: dark
     group: theming_group
     special:
       - cast-json

diff --git a/api/src/database/system-data/fields/users.yaml b/api/src/database/system-data/fields/users.yaml
@@ -124,6 +124,8 @@ fields:
   - field: theme_light_overrides
     width: full
     interface: system-theme-overrides
+    options:
+      appearance: light
     special:
       - cast-json
 
@@ -137,6 +139,8 @@ fields:
   - field: theme_dark_overrides
     width: full
     interface: system-theme-overrides
+    options:
+      appearance: dark
     special:
       - cast-json
 

diff --git a/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides.vue b/app/src/interfaces/_system/system-theme-overrides/system-theme-overrides.vue
@@ -2,6 +2,7 @@
 import { useThemeConfiguration } from '@/composables/use-theme-configuration';
 import { Theme, useTheme } from '@directus/themes';
 import { clone, get, isEmpty, setWith, unset } from 'lodash';
+import { computed } from 'vue';
 import SystemThemeOverridesGroup from './system-theme-overrides-group.vue';
 import type { SetValueFn } from './types.js';
 
@@ -11,6 +12,7 @@ defineOptions({
 
 const props = defineProps<{
 	value: Record<string, unknown> | null;
+	appearance: 'dark' | 'light';
 }>();
 
 const emit = defineEmits<{
@@ -37,7 +39,9 @@ const set: SetValueFn = (path: string[], value: string) => {
 	}
 };
 
-const { darkMode, themeDark, themeLight } = useThemeConfiguration();
+const { themeDark, themeLight } = useThemeConfiguration();
+
+const darkMode = computed(() => props.appearance === 'dark');
 
 const { theme } = useTheme(darkMode, themeLight, themeDark, {}, {});
 </script>