From 40e7046ba871540b2d734cb7b44612aeda3cbfb2 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Fri, 3 Nov 2023 15:21:33 -0400
Subject: [PATCH] Use server store for public theme information (#20324)

* from rainbow to lava lamp

* svg paths to divs for performance

* Clean up styles

* Public view themable options

* Make speed themable

* Use server store info for public theming

* Add changeset

---------

Co-authored-by: Ben Haynes <ben@rngr.org>
---
 .changeset/grumpy-pandas-wink.md               |  6 ++++++
 api/src/services/server.ts                     |  4 ++++
 app/src/composables/use-theme-configuration.ts | 13 +++++++------
 app/src/stores/server.ts                       |  4 ++++
 app/src/stores/settings.ts                     |  2 +-
 5 files changed, 22 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/grumpy-pandas-wink.md

diff --git a/.changeset/grumpy-pandas-wink.md b/.changeset/grumpy-pandas-wink.md
new file mode 100644
index 0000000000..6c6ee51a4b
--- /dev/null
+++ b/.changeset/grumpy-pandas-wink.md
@@ -0,0 +1,6 @@
+---
+'@directus/api': minor
+'@directus/app': minor
+---
+
+Return theme information from server project info endpoint
diff --git a/api/src/services/server.ts b/api/src/services/server.ts
index d15100774b..3a8c8ec3a2 100644
--- a/api/src/services/server.ts
+++ b/api/src/services/server.ts
@@ -41,6 +41,10 @@ export class ServerService {
 				'project_logo',
 				'project_color',
 				'default_appearance',
+				'default_theme_light',
+				'default_theme_dark',
+				'theme_light_overrides',
+				'theme_dark_overrides',
 				'default_language',
 				'public_foreground',
 				'public_background',
diff --git a/app/src/composables/use-theme-configuration.ts b/app/src/composables/use-theme-configuration.ts
index ee99680ee3..e5ceb0e951 100644
--- a/app/src/composables/use-theme-configuration.ts
+++ b/app/src/composables/use-theme-configuration.ts
@@ -1,11 +1,12 @@
-import { useSettingsStore } from '@/stores/settings';
+import type { Info } from '@/stores/server';
+import { useServerStore } from '@/stores/server';
 import { useUserStore } from '@/stores/user';
-import type { Settings, User } from '@directus/types';
+import type { User } from '@directus/types';
 import { merge } from 'lodash';
 import { computed, ref } from 'vue';
 
 export const useThemeConfiguration = () => {
-	const settingsStore = useSettingsStore();
+	const serverStore = useServerStore();
 	const userStore = useUserStore();
 
 	const browserAppearance = ref<'dark' | 'light'>(
@@ -17,10 +18,10 @@ export const useThemeConfiguration = () => {
 	});
 
 	const systemSettings = computed(() => {
-		let system: Settings | null = null;
+		let system: Info['project'] | null = null;
 
-		if (settingsStore.settings) {
-			system = settingsStore.settings;
+		if (serverStore.info?.project) {
+			system = serverStore.info.project;
 		}
 
 		return system;
diff --git a/app/src/stores/server.ts b/app/src/stores/server.ts
index 5df0cc8f86..0b06dad639 100644
--- a/app/src/stores/server.ts
+++ b/app/src/stores/server.ts
@@ -23,6 +23,10 @@ export type Info = {
 		project_color: string | null;
 		default_language: string | null;
 		default_appearance: 'light' | 'dark' | 'auto';
+		default_theme_light: string;
+		default_theme_dark: string;
+		theme_light_overrides: Record<string, unknown> | null;
+		theme_dark_overrides: Record<string, unknown> | null;
 		public_foreground: string | null;
 		public_background: string | null;
 		public_favicon: string | null;
diff --git a/app/src/stores/settings.ts b/app/src/stores/settings.ts
index 97162ec7f8..d8ec67cd55 100644
--- a/app/src/stores/settings.ts
+++ b/app/src/stores/settings.ts
@@ -2,9 +2,9 @@ import api from '@/api';
 import { i18n } from '@/lang';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
+import { Settings } from '@directus/types';
 import { merge } from 'lodash';
 import { defineStore } from 'pinia';
-import { Settings } from '@directus/types';
 import { useUserStore } from './user';
 
 export const useSettingsStore = defineStore({