From 3711b60c1e5ef4d04a13c02e2342b1a6b0807269 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <hi@dhruvkb.dev>
Date: Thu, 5 Sep 2024 17:30:33 +0530
Subject: [PATCH] Add the UI toggle for changing theme (#4840)

Co-authored-by: zackdotcat <git@zack.cat>
Co-authored-by: zack <6351754+zackkrida@users.noreply.github.com>
---
 frontend/feat/feature-flags.json              |  9 ---
 frontend/src/assets/svg/raw/moon.svg          |  8 ++
 frontend/src/assets/svg/raw/sun.svg           | 13 ++++
 frontend/src/assets/svg/sprite/icons.svg      |  2 +
 frontend/src/components/VFooter/VFooter.vue   | 31 ++++++--
 .../components/VSelectField/VSelectField.vue  | 11 ++-
 .../components/VThemeSelect/VThemeSelect.vue  | 76 +++++++++++++++++++
 frontend/src/composables/use-dark-mode.ts     | 46 +++++++++--
 frontend/src/locales/scripts/en.json5         |  8 ++
 .../specs/composables/use-dark-mode.spec.ts   | 47 ++++++++----
 10 files changed, 213 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/assets/svg/raw/moon.svg
 create mode 100644 frontend/src/assets/svg/raw/sun.svg
 create mode 100644 frontend/src/components/VThemeSelect/VThemeSelect.vue

diff --git a/frontend/feat/feature-flags.json b/frontend/feat/feature-flags.json
index 5d8c5fe4b48..74c70dd3e75 100644
--- a/frontend/feat/feature-flags.json
+++ b/frontend/feat/feature-flags.json
@@ -31,15 +31,6 @@
       "supportsQuery": false,
       "storage": "session"
     },
-    "force_dark_mode": {
-      "status": {
-        "staging": "switchable",
-        "production": "disabled"
-      },
-      "defaultState": "off",
-      "description": "Force the site to render in dark mode.",
-      "storage": "session"
-    },
     "dark_mode_ui_toggle": {
       "status": {
         "staging": "switchable",
diff --git a/frontend/src/assets/svg/raw/moon.svg b/frontend/src/assets/svg/raw/moon.svg
new file mode 100644
index 00000000000..0d13e051cac
--- /dev/null
+++ b/frontend/src/assets/svg/raw/moon.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g id="icon">
+    <path
+      d="M16 13.75C17.1886 13.75 18.293 13.389 19.2094 12.7715C18.8243 16.4128 15.7435 19.25 12 19.25C7.99594 19.25 4.75 16.0041 4.75 12C4.75 8.25654 7.58716 5.17574 11.2285 4.79057C10.611 5.70697 10.25 6.81141 10.25 8C10.25 11.1756 12.8244 13.75 16 13.75Z"
+      stroke="currentColor"
+      stroke-width="1.5"/>
+  </g>
+</svg>
diff --git a/frontend/src/assets/svg/raw/sun.svg b/frontend/src/assets/svg/raw/sun.svg
new file mode 100644
index 00000000000..00f4ae1d09d
--- /dev/null
+++ b/frontend/src/assets/svg/raw/sun.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g id="icon" fill="currentColor" fill-rule="evenodd">
+    <path d="M12.7499 2.5H11.2499V5.5H12.7499V2.5Z"/>
+    <path d="M12.7499 18.5H11.2499V21.5H12.7499V18.5Z"/>
+    <path d="M18.187 4.75216L19.2477 5.81282L17.1263 7.93414L16.0657 6.87348L18.187 4.75216Z"/>
+    <path d="M7.93396 17.1265L6.8733 16.0659L4.75198 18.1872L5.81264 19.2478L7.93396 17.1265Z"/>
+    <path d="M18.5 11.25H21.5V12.75H18.5V11.25Z"/>
+    <path d="M5.5 12.75V11.25H2.5V12.75H5.5Z"/>
+    <path d="M19.2478 18.1872L18.1872 19.2478L16.0659 17.1265L17.1265 16.0659L19.2478 18.1872Z"/>
+    <path d="M6.87348 7.93414L7.93414 6.87348L5.81282 4.75215L4.75216 5.81281L6.87348 7.93414Z"/>
+    <path d="M16.5 12C16.5 14.4853 14.4853 16.5 12 16.5C9.51472 16.5 7.5 14.4853 7.5 12C7.5 9.51472 9.51472 7.5 12 7.5C14.4853 7.5 16.5 9.51472 16.5 12ZM15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"/>
+  </g>
+</svg>
diff --git a/frontend/src/assets/svg/sprite/icons.svg b/frontend/src/assets/svg/sprite/icons.svg
index 54d9127acc8..615db5de8ae 100644
--- a/frontend/src/assets/svg/sprite/icons.svg
+++ b/frontend/src/assets/svg/sprite/icons.svg
@@ -35,4 +35,6 @@
 <symbol id="warning" fill="none" viewBox="0 0 24 24"><g fill="currentColor"><path fill-rule="evenodd" d="M12 4.75a7.25 7.25 0 1 0 0 14.5 7.25 7.25 0 0 0 0-14.5M3.25 12a8.75 8.75 0 1 1 17.5 0 8.75 8.75 0 0 1-17.5 0" clip-rule="evenodd"/><path d="M13 7h-2v6h2zM13 15h-2v2h2z"/></g></symbol>
 <symbol id="source" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M7.114 8.5H4V7h3.114a2.501 2.501 0 0 1 4.772 0H20v1.5h-8.114a2.501 2.501 0 0 1-4.772 0M4 17h8.114a2.501 2.501 0 0 0 4.771 0H20v-1.5h-3.114a2.501 2.501 0 0 0-4.771 0H4z" clip-rule="evenodd"/></symbol>
 <symbol id="success" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M20.75 12a8.75 8.75 0 1 1-17.5 0 8.75 8.75 0 0 1 17.5 0M12 19.25a7.25 7.25 0 1 0 0-14.5 7.25 7.25 0 0 0 0 14.5" clip-rule="evenodd"/><path fill="none" stroke="currentColor" stroke-width="1.5" d="m8 12.929 2.953 2.215L15.75 8.5"/></symbol>
+<symbol id="sun" viewBox="0 0 24 24"><g fill="currentColor" fill-rule="evenodd"><path d="M12.7499 2.5H11.2499V5.5H12.7499V2.5Z"/><path d="M12.7499 18.5H11.2499V21.5H12.7499V18.5Z"/><path d="M18.187 4.75216L19.2477 5.81282L17.1263 7.93414L16.0657 6.87348L18.187 4.75216Z"/><path d="M7.93396 17.1265L6.8733 16.0659L4.75198 18.1872L5.81264 19.2478L7.93396 17.1265Z"/><path d="M18.5 11.25H21.5V12.75H18.5V11.25Z"/><path d="M5.5 12.75V11.25H2.5V12.75H5.5Z"/><path d="M19.2478 18.1872L18.1872 19.2478L16.0659 17.1265L17.1265 16.0659L19.2478 18.1872Z"/><path d="M6.87348 7.93414L7.93414 6.87348L5.81282 4.75215L4.75216 5.81281L6.87348 7.93414Z"/><path d="M16.5 12C16.5 14.4853 14.4853 16.5 12 16.5C9.51472 16.5 7.5 14.4853 7.5 12C7.5 9.51472 9.51472 7.5 12 7.5C14.4853 7.5 16.5 9.51472 16.5 12ZM15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"/></g></symbol>
+<symbol id="moon" viewBox="0 0 24 24"><path d="M16 13.75C17.1886 13.75 18.293 13.389 19.2094 12.7715C18.8243 16.4128 15.7435 19.25 12 19.25C7.99594 19.25 4.75 16.0041 4.75 12C4.75 8.25654 7.58716 5.17574 11.2285 4.79057C10.611 5.70697 10.25 6.81141 10.25 8C10.25 11.1756 12.8244 13.75 16 13.75Z" fill="none" stroke="currentColor" stroke-width="1.5"/></symbol>
 </svg>
diff --git a/frontend/src/components/VFooter/VFooter.vue b/frontend/src/components/VFooter/VFooter.vue
index 87880908dcb..330422e22fe 100644
--- a/frontend/src/components/VFooter/VFooter.vue
+++ b/frontend/src/components/VFooter/VFooter.vue
@@ -11,11 +11,13 @@ import useResizeObserver from "~/composables/use-resize-observer"
 import { SCREEN_SIZES } from "~/constants/screens"
 
 import { useUiStore } from "~/stores/ui"
+import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 import type { SelectFieldProps } from "~/components/VSelectField/VSelectField.vue"
 import VLink from "~/components/VLink.vue"
 import VBrand from "~/components/VBrand/VBrand.vue"
 import VLanguageSelect from "~/components/VLanguageSelect/VLanguageSelect.vue"
+import VThemeSelect from "~/components/VThemeSelect/VThemeSelect.vue"
 import VPageLinks from "~/components/VHeader/VPageLinks.vue"
 import VWordPressLink from "~/components/VHeader/VWordPressLink.vue"
 
@@ -42,6 +44,11 @@ const { all: allPages } = usePages()
 
 const isContentMode = computed(() => props.mode === "content")
 
+const featureFlagStore = useFeatureFlagStore()
+const showThemeSwitcher = computed(() =>
+  featureFlagStore.isOn("dark_mode_ui_toggle")
+)
+
 /** JS-based responsiveness */
 const footerEl = ref<HTMLElement | null>(null)
 const initialWidth = SCREEN_SIZES[uiStore.breakpoint]
@@ -90,11 +97,25 @@ const linkColumnHeight = computed(() => ({
 
     <!-- Locale chooser and WordPress affiliation graphic -->
     <div class="locale-and-wp flex flex-col justify-between">
-      <VLanguageSelect
-        v-bind="languageProps"
-        class="language max-w-full border-secondary"
-      />
-      <VWordPressLink mode="light" />
+      <template v-if="showThemeSwitcher">
+        <VWordPressLink mode="light" />
+        <div class="flex flex-row items-center gap-6">
+          <VLanguageSelect
+            v-bind="languageProps"
+            class="language max-w-full border-secondary"
+          />
+          <ClientOnly>
+            <VThemeSelect class="border-secondary" />
+          </ClientOnly>
+        </div>
+      </template>
+      <template v-else>
+        <VLanguageSelect
+          v-bind="languageProps"
+          class="language max-w-full border-secondary"
+        />
+        <VWordPressLink mode="light" />
+      </template>
     </div>
   </footer>
 </template>
diff --git a/frontend/src/components/VSelectField/VSelectField.vue b/frontend/src/components/VSelectField/VSelectField.vue
index dd89bcb7ec5..390895c72ab 100644
--- a/frontend/src/components/VSelectField/VSelectField.vue
+++ b/frontend/src/components/VSelectField/VSelectField.vue
@@ -33,10 +33,12 @@ const props = withDefaults(
     fieldId: string
     labelText: string
     choices: Choice[]
+    showSelected?: boolean
   }>(),
   {
     modelValue: "",
     blankText: "",
+    showSelected: true,
   }
 )
 
@@ -70,7 +72,7 @@ const splitAttrs = computed(() => {
 
 <template>
   <div
-    class="relative m-0.5px box-content block w-fit overflow-hidden rounded-sm border border-default text-sm focus-within:m-0 focus-within:border-1.5 focus-within:border-focus hover:border-hover focus-within:hover:border-focus"
+    class="relative m-0.5px box-content block w-fit rounded-sm border border-default text-sm focus-within:m-0 focus-within:border-1.5 focus-within:border-focus hover:border-hover focus-within:hover:border-focus"
     :class="splitAttrs.classAttrs"
   >
     <div class="pointer-events-none absolute inset-y-0 start-2 my-auto h-fit">
@@ -82,8 +84,11 @@ const splitAttrs = computed(() => {
     <select
       :id="fieldId"
       v-model="selectValue"
-      class="flex h-[calc(theme(spacing.10)_-_2_*_theme(borderWidth.DEFAULT))] w-full appearance-none truncate bg-tx pe-10"
-      :class="hasStartContent ? 'ps-10' : 'ps-2'"
+      class="flex h-[calc(theme(spacing.10)_-_2_*_theme(borderWidth.DEFAULT))] appearance-none truncate bg-tx pe-10"
+      :class="[
+        showSelected ? 'w-full' : 'w-0 max-w-0',
+        hasStartContent ? 'ps-10' : 'ps-2',
+      ]"
       :name="fieldName"
       v-bind="splitAttrs.nonClassAttrs"
       :aria-label="labelText"
diff --git a/frontend/src/components/VThemeSelect/VThemeSelect.vue b/frontend/src/components/VThemeSelect/VThemeSelect.vue
new file mode 100644
index 00000000000..6cc4320aba6
--- /dev/null
+++ b/frontend/src/components/VThemeSelect/VThemeSelect.vue
@@ -0,0 +1,76 @@
+<!--
+Present users with a way to change the app theme between three options:
+light, dark and system.
+-->
+
+<script setup lang="ts">
+import { useI18n, useDarkMode } from "#imports"
+
+import { computed, type ComputedRef } from "vue"
+
+import { useUiStore } from "~/stores/ui"
+
+import VIcon from "~/components/VIcon/VIcon.vue"
+import VSelectField, {
+  type Choice,
+} from "~/components/VSelectField/VSelectField.vue"
+
+const i18n = useI18n({ useScope: "global" })
+const uiStore = useUiStore()
+
+const THEME_ICON_NAME = Object.freeze({
+  light: "sun",
+  dark: "moon",
+})
+
+const THEME_TEXT = {
+  light: i18n.t(`theme.choices.light`),
+  dark: i18n.t(`theme.choices.dark`),
+}
+
+const colorMode = computed({
+  get: () => uiStore.colorMode,
+  set: (value) => {
+    uiStore.setColorMode(value)
+  },
+})
+
+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 = computed(
+  () => THEME_ICON_NAME[darkMode.effectiveColorMode.value]
+)
+
+/**
+ * The choices are computed because the text for the color mode choice
+ * "system" is dynamic and reflects the user's preferred color scheme at
+ * the OS-level.
+ */
+const choices: ComputedRef<Choice[]> = computed(() => {
+  const systemText = `${i18n.t(`theme.choices.system`)} (${THEME_TEXT[darkMode.osColorMode.value]})`
+  return [
+    { key: "light", text: THEME_TEXT.light },
+    { key: "dark", text: THEME_TEXT.dark },
+    { key: "system", text: systemText },
+  ]
+})
+</script>
+
+<template>
+  <VSelectField
+    v-model="colorMode"
+    field-id="theme"
+    :choices="choices"
+    :blank-text="$t('theme.theme')"
+    :label-text="$t('theme.theme')"
+    :show-selected="false"
+  >
+    <template #start>
+      <VIcon :name="currentThemeIcon" />
+    </template>
+  </VSelectField>
+</template>
diff --git a/frontend/src/composables/use-dark-mode.ts b/frontend/src/composables/use-dark-mode.ts
index 66c0df3c48b..598da0ed0b0 100644
--- a/frontend/src/composables/use-dark-mode.ts
+++ b/frontend/src/composables/use-dark-mode.ts
@@ -1,5 +1,7 @@
 import { computed, useUiStore } from "#imports"
 
+import { usePreferredColorScheme } from "@vueuse/core"
+
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 export const DARK_MODE_CLASS = "dark-mode"
@@ -8,8 +10,7 @@ export const LIGHT_MODE_CLASS = "light-mode"
 /**
  * Determines the dark mode setting based on user preference or feature flag.
  *
- * When dark mode toggling is disabled, the site is in "light mode" unless
- * the `force_dark_mode` feature flag is on.
+ * When dark mode toggling is disabled, the site is in "light mode".
  *
  * When the "dark_mode_ui_toggle" flag is enabled, the site will respect
  * the user system preference by default.
@@ -22,13 +23,46 @@ export function useDarkMode() {
   const darkModeToggleable = computed(() =>
     featureFlagStore.isOn("dark_mode_ui_toggle")
   )
-  const forceDarkMode = computed(() => featureFlagStore.isOn("force_dark_mode"))
 
+  /**
+   * the color mode setting for the app;
+   *
+   * This can be one of "dark", "light" or "system". If the toggle
+   * feature is disabled, we default to "light".
+   */
   const colorMode = computed(() => {
-    if (darkModeToggleable.value && !forceDarkMode.value) {
+    if (darkModeToggleable.value) {
       return uiStore.colorMode
     }
-    return forceDarkMode.value ? "dark" : "light"
+    return "light"
+  })
+
+  /**
+   * the color mode setting for the OS;
+   *
+   * This can be one of "dark" or "light". If the OS does not specify
+   * a preference, we default to "light".
+   */
+  const osColorMode = computed(() => {
+    const pref = usePreferredColorScheme()
+    return pref.value === "no-preference" ? "light" : pref.value
+  })
+
+  /**
+   * the effective color mode of the app;
+   *
+   * This can be one of "dark" or "light". This is a combination of the
+   * toggle feature flag, the user's preference at the app and OS levels
+   * and the default value of "light".
+   */
+  const effectiveColorMode = computed(() => {
+    if (!darkModeToggleable.value) {
+      return "light"
+    }
+    if (colorMode.value === "system") {
+      return osColorMode.value
+    }
+    return colorMode.value
   })
 
   const cssClass = computed(() => {
@@ -41,6 +75,8 @@ export function useDarkMode() {
 
   return {
     colorMode,
+    osColorMode,
+    effectiveColorMode,
     cssClass,
   }
 }
diff --git a/frontend/src/locales/scripts/en.json5 b/frontend/src/locales/scripts/en.json5
index 8f4038b7560..5f1d0f9761b 100644
--- a/frontend/src/locales/scripts/en.json5
+++ b/frontend/src/locales/scripts/en.json5
@@ -1085,6 +1085,14 @@
   language: {
     language: "Language",
   },
+  theme: {
+    theme: "Theme",
+    choices: {
+      dark: "Dark",
+      light: "Light",
+      system: "System",
+    },
+  },
   recentSearches: {
     heading: "Recent searches",
     clear: {
diff --git a/frontend/test/unit/specs/composables/use-dark-mode.spec.ts b/frontend/test/unit/specs/composables/use-dark-mode.spec.ts
index 0c8144cb90f..22fd8388a95 100644
--- a/frontend/test/unit/specs/composables/use-dark-mode.spec.ts
+++ b/frontend/test/unit/specs/composables/use-dark-mode.spec.ts
@@ -1,4 +1,8 @@
-import { describe, expect, test } from "vitest"
+import { computed } from "#imports"
+
+import { describe, expect, test, vi } from "vitest"
+
+import { usePreferredColorScheme } from "@vueuse/core"
 
 import {
   DARK_MODE_CLASS,
@@ -9,25 +13,35 @@ import { OFF, ON } from "~/constants/feature-flag"
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { useUiStore } from "~/stores/ui"
 
+vi.mock("@vueuse/core", () => ({
+  usePreferredColorScheme: vi.fn(),
+}))
+
 describe("useDarkMode", () => {
   test.each`
-    description                                     | featureFlags                                          | uiColorMode | expectedColorMode | expectedCssClass
-    ${"Force dark mode and disable toggling"}       | ${{ force_dark_mode: ON, dark_mode_ui_toggle: OFF }}  | ${"light"}  | ${"dark"}         | ${DARK_MODE_CLASS}
-    ${"Don't force dark mode and disable toggling"} | ${{ force_dark_mode: OFF, dark_mode_ui_toggle: OFF }} | ${"dark"}   | ${"light"}        | ${LIGHT_MODE_CLASS}
-    ${"Force dark mode and enable toggling"}        | ${{ force_dark_mode: ON, dark_mode_ui_toggle: ON }}   | ${"light"}  | ${"dark"}         | ${DARK_MODE_CLASS}
-    ${"Enable toggling, User preference: light"}    | ${{ force_dark_mode: OFF, dark_mode_ui_toggle: ON }}  | ${"light"}  | ${"light"}        | ${LIGHT_MODE_CLASS}
-    ${"Enable toggling, User preference: dark"}     | ${{ force_dark_mode: OFF, dark_mode_ui_toggle: ON }}  | ${"dark"}   | ${"dark"}         | ${DARK_MODE_CLASS}
-    ${"Enable toggling, User preference: system"}   | ${{ force_dark_mode: OFF, dark_mode_ui_toggle: ON }}  | ${"system"} | ${"system"}       | ${""}
+    description                                                | featureFlags                    | uiColorMode | osColorMode        | expectedColorMode | expectedEffectiveColorMode | expectedCssClass
+    ${"Toggle: off"}                                           | ${{ dark_mode_ui_toggle: OFF }} | ${"dark"}   | ${"dark"}          | ${"light"}        | ${"light"}                 | ${LIGHT_MODE_CLASS}
+    ${"Toggle: on, Preference: light"}                         | ${{ dark_mode_ui_toggle: ON }}  | ${"light"}  | ${"dark"}          | ${"light"}        | ${"light"}                 | ${LIGHT_MODE_CLASS}
+    ${"Toggle: on, Preference: dark"}                          | ${{ dark_mode_ui_toggle: ON }}  | ${"dark"}   | ${"light"}         | ${"dark"}         | ${"dark"}                  | ${DARK_MODE_CLASS}
+    ${"Toggle: on, Preference: system, System: light"}         | ${{ dark_mode_ui_toggle: ON }}  | ${"system"} | ${"light"}         | ${"system"}       | ${"light"}                 | ${""}
+    ${"Toggle: on, Preference: system, System: dark"}          | ${{ dark_mode_ui_toggle: ON }}  | ${"system"} | ${"dark"}          | ${"system"}       | ${"dark"}                  | ${""}
+    ${"Toggle: on, Preference: system, System: no-preference"} | ${{ dark_mode_ui_toggle: ON }}  | ${"system"} | ${"no-preference"} | ${"system"}       | ${"light"}                 | ${""}
   `(
-    "$description: should report colorMode as $expectedColorMode and cssClass as $expectedCssClass",
-    ({ featureFlags, uiColorMode, expectedColorMode, expectedCssClass }) => {
+    "$description: should report colorMode as $expectedColorMode, effectiveColorMode as $expectedEffectiveColorMode and cssClass as $expectedCssClass",
+    ({
+      featureFlags,
+      uiColorMode,
+      osColorMode,
+      expectedColorMode,
+      expectedEffectiveColorMode,
+      expectedCssClass,
+    }) => {
+      vi.mocked(usePreferredColorScheme).mockReturnValue(
+        computed(() => osColorMode)
+      )
+
       const featureFlagStore = useFeatureFlagStore()
 
-      // Set the feature flags
-      featureFlagStore.toggleFeature(
-        "force_dark_mode",
-        featureFlags.force_dark_mode
-      )
       featureFlagStore.toggleFeature(
         "dark_mode_ui_toggle",
         featureFlags.dark_mode_ui_toggle
@@ -38,10 +52,11 @@ describe("useDarkMode", () => {
       uiStore.colorMode = uiColorMode
 
       // Call the composable
-      const { colorMode, cssClass } = useDarkMode()
+      const { colorMode, effectiveColorMode, cssClass } = useDarkMode()
 
       // Assert the computed properties
       expect(colorMode.value).toBe(expectedColorMode)
+      expect(effectiveColorMode.value).toBe(expectedEffectiveColorMode)
       expect(cssClass.value).toBe(expectedCssClass)
     }
   )