From 42cb679fed3248d7f3d752ffe7ac097ef7b4c2c5 Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Thu, 16 Jun 2022 17:26:18 -0400
Subject: [PATCH] invert color shades (#13940)

* invert color shades

* Fix input glow

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
---
 app/src/components/v-input/v-input.vue | 19 +++++++++----------
 app/src/utils/get-theme.ts             |  4 +---
 app/src/views/public/public-view.vue   | 13 +++++++++----
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/app/src/components/v-input/v-input.vue b/app/src/components/v-input/v-input.vue
index 266e2da14a..1ed4f1a416 100644
--- a/app/src/components/v-input/v-input.vue
+++ b/app/src/components/v-input/v-input.vue
@@ -252,20 +252,19 @@ function stepDown() {
 }
 </script>
 
-<style>
-body {
+<style lang="scss" scoped>
+:global(body) {
 	--v-input-font-family: var(--family-sans-serif);
 	--v-input-placeholder-color: var(--foreground-subdued);
-}
-</style>
-
-<style lang="scss" scoped>
-.v-input {
-	--arrow-color: var(--border-normal);
-	--v-icon-color: var(--foreground-subdued);
+	--v-input-box-shadow-color-focus: var(--primary);
 	--v-input-color: var(--foreground-normal);
 	--v-input-background-color: var(--background-input);
 	--v-input-border-color-focus: var(--primary);
+}
+
+.v-input {
+	--arrow-color: var(--border-normal);
+	--v-icon-color: var(--foreground-subdued);
 
 	display: flex;
 	align-items: center;
@@ -340,7 +339,7 @@ body {
 			color: var(--v-input-color);
 			background-color: var(--background-input);
 			border-color: var(--v-input-border-color-focus);
-			box-shadow: 0 0 16px -8px var(--primary);
+			box-shadow: 0 0 16px -8px var(--v-input-box-shadow-color-focus);
 		}
 
 		&.disabled {
diff --git a/app/src/utils/get-theme.ts b/app/src/utils/get-theme.ts
index d8d9f54a27..56fdafde6c 100644
--- a/app/src/utils/get-theme.ts
+++ b/app/src/utils/get-theme.ts
@@ -3,9 +3,7 @@ import { useUserStore } from '@/stores';
 export function getTheme(): 'light' | 'dark' {
 	const userStore = useUserStore();
 
-	if (!userStore.currentUser) return 'light';
-
-	if (userStore.currentUser.theme === 'auto') {
+	if (!userStore.currentUser || !('theme' in userStore.currentUser) || userStore.currentUser.theme === 'auto') {
 		if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
 			return 'dark';
 		}
diff --git a/app/src/views/public/public-view.vue b/app/src/views/public/public-view.vue
index 982a785a61..5c21d3e461 100644
--- a/app/src/views/public/public-view.vue
+++ b/app/src/views/public/public-view.vue
@@ -64,6 +64,7 @@ import { getRootPath } from '@/utils/get-root-path';
 import { useI18n } from 'vue-i18n';
 import { cssVar } from '@directus/shared/utils/browser';
 import Color from 'color';
+import { getTheme } from '@/utils/get-theme';
 
 interface Props {
 	wide?: boolean;
@@ -81,7 +82,7 @@ const { info } = storeToRefs(serverStore);
 const colors = computed(() => {
 	const primary = info.value?.project?.project_color || 'var(--primary)';
 	const primaryHex = primary.startsWith('var(--') ? cssVar(primary.substring(4, primary.length - 1)) : primary;
-
+	const isDark = getTheme() === 'dark';
 	const primaryColor = Color(primaryHex);
 
 	const primaryColorHSL = primaryColor.hsl() as unknown as {
@@ -91,15 +92,18 @@ const colors = computed(() => {
 	};
 
 	/**
-	 * The default secondary color is based on the standard difference between Directus purple and pink, which is:
+	 * The default light mode secondary color is based on the standard difference between Directus purple and pink, which is:
 	 * primary = 250.9, 100, 63.3
 	 * secondary = 320, 100, 80
 	 * diff = +69.1, 0, +16.7
+	 *
+	 * For dark mode, we greatly reduce the lightness value to -50
 	 */
+
 	const secondaryColor = Color({
-		h: primaryColorHSL.color[0] + 69.1,
+		h: primaryColorHSL.color[0] + (isDark ? -69.1 : 69.1),
 		s: primaryColorHSL.color[1] + 0,
-		l: primaryColorHSL.color[2] + 16.7,
+		l: primaryColorHSL.color[2] + (isDark ? -50 : 16.7),
 	});
 
 	const shades = [];
@@ -314,6 +318,7 @@ const logoURL = computed<string | null>(() => {
 
 	&.branded :deep(.v-input) {
 		--v-input-border-color-focus: var(--foreground-normal);
+		--v-input-box-shadow-color-focus: var(--foreground-normal);
 	}
 
 	&.branded :deep(.v-input.solid) {