From 2573ca8eab4e741ff0d22d0b4dba6d7545d572f4 Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Mon, 2 Dec 2024 13:56:08 +0400 Subject: [PATCH 1/6] Add a duotone icon to the codebase --- frontend/src/assets/svg/raw/duotone.svg | 9 +++++++++ frontend/src/assets/svg/sprite/icons.svg | 1 + 2 files changed, 10 insertions(+) create mode 100644 frontend/src/assets/svg/raw/duotone.svg diff --git a/frontend/src/assets/svg/raw/duotone.svg b/frontend/src/assets/svg/raw/duotone.svg new file mode 100644 index 00000000000..27249fabbf0 --- /dev/null +++ b/frontend/src/assets/svg/raw/duotone.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/frontend/src/assets/svg/sprite/icons.svg b/frontend/src/assets/svg/sprite/icons.svg index c12476170fe..272499f747b 100644 --- a/frontend/src/assets/svg/sprite/icons.svg +++ b/frontend/src/assets/svg/sprite/icons.svg @@ -37,4 +37,5 @@ + From 4f51e4c44e6e2e61f5651a4f8aec132b2cfd1af3 Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Mon, 2 Dec 2024 13:58:10 +0400 Subject: [PATCH 2/6] Use duotone icon for system theme --- .../src/components/VThemeSelect/VThemeSelect.vue | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/VThemeSelect/VThemeSelect.vue b/frontend/src/components/VThemeSelect/VThemeSelect.vue index 0e5ceb16361..af5018a0daa 100644 --- a/frontend/src/components/VThemeSelect/VThemeSelect.vue +++ b/frontend/src/components/VThemeSelect/VThemeSelect.vue @@ -21,6 +21,7 @@ const uiStore = useUiStore() const THEME_ICON_NAME = Object.freeze({ light: "sun", dark: "moon", + system: "duotone" }) const THEME_TEXT = { @@ -45,10 +46,8 @@ const darkMode = useDarkMode() * The icon always reflects the actual theme applied to the site. * Therefore, it must be based on the value of `effectiveColorMode`. */ -const currentThemeIcon: Ref<"sun" | "moon" | undefined> = ref( - darkMode.effectiveColorMode.value - ? THEME_ICON_NAME[darkMode.effectiveColorMode.value] - : undefined +const currentThemeIcon: Ref<"sun" | "moon" | "duotone"> = ref( + THEME_ICON_NAME[darkMode.colorMode.value] ) /** @@ -64,13 +63,13 @@ const choices: Ref = ref([ const updateRefs = () => { colorMode.value = uiStore.colorMode - currentThemeIcon.value = THEME_ICON_NAME[darkMode.effectiveColorMode.value] + currentThemeIcon.value = THEME_ICON_NAME[darkMode.colorMode.value] choices.value[2].text = `${THEME_TEXT.system} (${THEME_TEXT[darkMode.osColorMode.value]})` } onMounted(updateRefs) watch( - () => [darkMode.effectiveColorMode.value, darkMode.osColorMode.value], + () => [darkMode.colorMode.value, darkMode.osColorMode.value], updateRefs ) @@ -88,7 +87,7 @@ watch( @update:model-value="handleUpdateModelValue" > From 1ccab316ab93db43c556ed21351e191ddf83499d Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Mon, 2 Dec 2024 14:03:15 +0400 Subject: [PATCH 3/6] Update documentation comment --- frontend/src/components/VThemeSelect/VThemeSelect.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/VThemeSelect/VThemeSelect.vue b/frontend/src/components/VThemeSelect/VThemeSelect.vue index af5018a0daa..9436555fdda 100644 --- a/frontend/src/components/VThemeSelect/VThemeSelect.vue +++ b/frontend/src/components/VThemeSelect/VThemeSelect.vue @@ -43,8 +43,8 @@ const setIsDarkModeSeen = () => { const darkMode = useDarkMode() /** - * The icon always reflects the actual theme applied to the site. - * Therefore, it must be based on the value of `effectiveColorMode`. + * The icon always reflects the user's preferred color theme. Therefore, + * it must be based on the value of `colorMode`. */ const currentThemeIcon: Ref<"sun" | "moon" | "duotone"> = ref( THEME_ICON_NAME[darkMode.colorMode.value] From 249d19fb548cb230f8ab1fd34d16ebc9d57937c6 Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Mon, 2 Dec 2024 18:11:59 +0400 Subject: [PATCH 4/6] Remove unnecessary comment --- frontend/src/components/VThemeSelect/VThemeSelect.vue | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/src/components/VThemeSelect/VThemeSelect.vue b/frontend/src/components/VThemeSelect/VThemeSelect.vue index 9436555fdda..a1d4c1a433d 100644 --- a/frontend/src/components/VThemeSelect/VThemeSelect.vue +++ b/frontend/src/components/VThemeSelect/VThemeSelect.vue @@ -42,10 +42,6 @@ const setIsDarkModeSeen = () => { const darkMode = useDarkMode() -/** - * The icon always reflects the user's preferred color theme. Therefore, - * it must be based on the value of `colorMode`. - */ const currentThemeIcon: Ref<"sun" | "moon" | "duotone"> = ref( THEME_ICON_NAME[darkMode.colorMode.value] ) From 09b079bdfa6e7a8186a376ffd4c7de3d5cf42ac9 Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Mon, 2 Dec 2024 18:19:44 +0400 Subject: [PATCH 5/6] Lint files --- frontend/src/components/VThemeSelect/VThemeSelect.vue | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/VThemeSelect/VThemeSelect.vue b/frontend/src/components/VThemeSelect/VThemeSelect.vue index a1d4c1a433d..cbe627a567b 100644 --- a/frontend/src/components/VThemeSelect/VThemeSelect.vue +++ b/frontend/src/components/VThemeSelect/VThemeSelect.vue @@ -21,7 +21,7 @@ const uiStore = useUiStore() const THEME_ICON_NAME = Object.freeze({ light: "sun", dark: "moon", - system: "duotone" + system: "duotone", }) const THEME_TEXT = { @@ -64,10 +64,7 @@ const updateRefs = () => { } onMounted(updateRefs) -watch( - () => [darkMode.colorMode.value, darkMode.osColorMode.value], - updateRefs -) +watch(() => [darkMode.colorMode.value, darkMode.osColorMode.value], updateRefs)