[TAS-4569] ✨ Support color mode

app.config.ts

@@ -12,7 +12,7 @@ export default defineAppConfig({
         {
           color: 'primary',
           variant: 'solid',
-          class: 'text-theme-50',
+          class: 'text-theme-cyan dark:text-theme-black',
         },
         {
           variant: 'outline',
@@ -21,13 +21,13 @@ export default defineAppConfig({
         {
           color: 'primary',
           variant: 'outline',
-          class: 'ring-theme-black',
+          class: 'ring-theme-black dark:ring-muted',
         },
       ],
     },
     checkbox: {
       slots: {
-        base: 'ring-2 ring-theme-black',
+        base: 'ring-2 ring-theme-black dark:ring-muted',
       },
       variants: {
         disabled: {
@@ -47,7 +47,7 @@ export default defineAppConfig({
         {
           color: 'primary',
           variant: 'outline',
-          class: 'ring-2 ring-theme-black',
+          class: 'ring-2 ring-theme-black dark:ring-muted',
         },
       ],
     },

app.vue

@@ -168,4 +168,6 @@ useHead({
 })
 
 const { isShowMaintenancePage } = useMaintenanceMode()
+
+useColorModeSync()
 </script>

assets/css/main.css

@@ -3,10 +3,24 @@
 
 body {
   --app-bg: var(--color-theme-white);
+  --ui-text-highlighted: var(--color-theme-black);
   --intercom-launcher-offset: calc(env(safe-area-inset-bottom) + 56px);
   @apply bg-(--app-bg);
 }
 
+.dark body {
+  --app-bg: var(--color-theme-black);
+  --ui-text-highlighted: var(--color-theme-white);
+}
+
+.dark {
+  --color-theme-50:  #7aefd9;
+  --color-theme-100: #6aebce;
+  --color-theme-200: #5de7c9;
+  --color-theme-300: #56e5c6;
+  --color-theme-400: #50e3c2;
+}
+
 @theme static {
   --color-theme-black: #131313;
   --color-theme-white: #f9f9f9;
@@ -57,10 +71,6 @@ body {
   }
 }
 
-:root {
-  --ui-text-highlighted: var(--color-theme-black);
-}
-
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.25s ease-in-out;

components/AppTabBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="bg-white border-t border-muted fixed bottom-0 left-0 right-0 pb-safe">
+  <nav class="bg-white dark:bg-theme-black border-t border-muted fixed bottom-0 left-0 right-0 pb-safe">
     <ul class="flex justify-around items-center w-full max-w-md min-h-14 mx-auto">
       <li
         v-for="item in menuItems"
@@ -14,7 +14,9 @@
           <UAvatar
             :class="[
               'bg-white',
-              item.isActive ? 'border-2 border-theme-black' : 'border border-muted',
+              item.isActive
+                ? 'border-2 border-theme-black dark:border-theme-white'
+                : 'border border-muted',
             ]"
             :src="user?.avatar"
             :alt="user?.displayName"
@@ -29,7 +31,9 @@
             :ui="{
               base: [
                 'rounded-full',
-                item.isActive ? 'bg-theme-black text-theme-cyan' : 'bg-theme-white',
+                item.isActive
+                  ? 'bg-theme-black dark:bg-theme-cyan text-theme-cyan dark:text-theme-black'
+                  : 'bg-theme-white dark:bg-theme-black',
                 'font-bold',
               ],
             }"

components/BookCover.vue

@@ -41,7 +41,7 @@
         :class="[
           coverClass,
           { relative: hasShadow },
-          'bg-white',
+          'bg-white dark:bg-black',
           !isShowPlaceholder ? 'opacity-100' : 'opacity-0',
           { 'blur-xl': !hasLoaded },
           { 'pointer-events-none': isShowPlaceholder },
@@ -61,7 +61,7 @@
           'justify-center',
           'items-center',
           'inset-0',
-          'bg-theme-black/10',
+          'bg-theme-black/10 dark:bg-theme-white/10',
           'pointer-events-none',
           { 'animate-pulse': !hasLoaded },
         ]"

components/BookLoadingScreen.vue

@@ -67,7 +67,7 @@
       />
       <template v-else-if="!props.loadingProgress || props.loadingProgress < 100">
         <span
-          class="text-gray-600 text-[10px]"
+          class="text-muted text-[10px]"
           v-text="loadingLabel"
         />
         <UProgress

components/BookshelfItem.vue

@@ -23,9 +23,9 @@
           class="text-xs text-toned mb-0.5"
           v-text="`${progressPercentage}%`"
         />
-        <div class="w-full h-1 bg-gray-200 rounded-full overflow-hidden">
+        <div class="w-full h-1 rounded-full overflow-hidden ring-[0.5px] ring-inset ring-current text-highlighted">
           <div
-            class="h-full bg-primary-500 transition-all duration-300"
+            class="h-full bg-current transition-all duration-300"
             :style="{ width: `${progressPercentage}%` }"
           />
         </div>

components/BookstoreItem.vue

@@ -35,7 +35,7 @@
     </div>
 
     <!-- Price info for store mode -->
-    <div class="h-5 mt-3 text-sm text-theme-black">
+    <div class="h-5 mt-3 text-sm text-theme-black dark:text-highlighted">
       <span
         v-if="formattedDiscountPrice"
         v-text="formattedDiscountPrice"

components/BottomSlideover.vue

@@ -73,6 +73,7 @@ const scrollIndicatorClasses = [
   'h-12',
 
   'from-white',
+  'dark:from-black',
   'to-transparent',
   'pointer-events-none',
 ]

components/ColorModeSwitcher.vue

@@ -0,0 +1,37 @@
+<template>
+  <USelect
+    class="min-w-32"
+    :model-value="selectedColorMode"
+    :items="colorModeOptions"
+    trailing-icon="i-material-symbols-keyboard-arrow-down-rounded"
+    size="md"
+    @update:model-value="handleColorModeChange"
+  />
+</template>
+
+<script setup lang="ts">
+const { t: $t } = useI18n()
+const { preference } = useColorModeSync()
+
+const colorModeOptions = computed(() => [
+  {
+    label: $t('color_mode_light'),
+    value: 'light',
+  },
+  {
+    label: $t('color_mode_dark'),
+    value: 'dark',
+  },
+  {
+    label: $t('color_mode_system'),
+    value: 'system',
+  },
+])
+
+const selectedColorMode = computed(() => preference.value)
+
+function handleColorModeChange(value: string) {
+  preference.value = value as ColorMode
+  useLogEvent('color_mode_switch', { colorMode: value })
+}
+</script>

components/GiftButton.vue

@@ -63,7 +63,7 @@
     >
 
     <span
-      :class="[labelClass, 'relative', 'text-green-500']"
+      :class="[labelClass, 'relative', 'text-theme-cyan']"
       v-text="props.label"
     />
   </button>

components/LoginPanel.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="p-6 pt-8 rounded-[20px] bg-white box-[0_4px_4px_0_rgba(0,0,0,0.02)]">
+  <div class="p-6 pt-8 bg-white dark:bg-muted box-[0_4px_4px_0_rgba(0,0,0,0.02)]">
     <AppLogo
       class="mx-auto"
       :height="44"
     />
 
     <h2
-      class="mt-8 text-theme-black text-2xl font-bold text-center"
+      class="mt-8 text-theme-black dark:text-theme-white text-2xl font-bold text-center"
       v-text="$t('login_panel_title')"
     />
 

components/PricingPlanBenefits.vue

@@ -9,7 +9,7 @@
   >
     <div
       :class="[
-        isDarkBackground ? 'text-theme-cyan' : 'text-theme-black',
+        isDarkBackground ? 'text-theme-cyan' : 'text-theme-black dark:text-theme-cyan',
         isTitleCenter ? 'text-center' : 'text-left',
         'font-bold',
         'border-b-2 border-current',

components/PricingPlanSelect.vue

@@ -13,12 +13,14 @@
         'px-4',
         'py-3 laptop:py-4',
 
-        'bg-theme-white',
-        'text-theme-black',
+        'bg-theme-white dark:bg-theme-black',
+        'text-theme-black dark:text-theme-white',
         'rounded-lg',
 
         'border-2',
-        plan.isSelected ? 'border-theme-black' : 'border-theme-black/40',
+        plan.isSelected
+          ? 'border-theme-black dark:border-theme-white'
+          : 'border-theme-black/40 dark:border-theme-white/40',
 
         'mb-1',
         'hover:mb-0',
@@ -51,9 +53,9 @@
           'px-1.5 laptop:px-3',
           'py-0.5 laptop:py-1',
 
-          'bg-theme-black',
+          'bg-theme-black dark:bg-theme-cyan',
 
-          'text-theme-cyan',
+          'text-theme-cyan dark:text-theme-black',
           'text-xs',
           'font-semibold',
 
@@ -68,13 +70,15 @@
         <div
           :class="[
             'size-5 shrink-0 mr-4 rounded-full border-2',
-            plan.isSelected ? 'bg-theme-black border-theme-black' : 'bg-transparent border-theme-black/40',
+            plan.isSelected
+              ? 'bg-theme-black dark:bg-theme-cyan border-theme-black dark:border-theme-cyan'
+              : 'bg-transparent border-theme-black/40 dark:border-theme-cyan/40',
           ]"
         >
           <UIcon
             v-show="plan.isSelected"
             name="i-material-symbols-check"
-            class="block text-theme-cyan"
+            class="block text-theme-cyan dark:text-theme-black"
             :size="16"
           />
         </div>

components/ReaderHeader.vue

@@ -9,7 +9,7 @@
       'min-h-[56px]',
       'px-3', 'phone:px-5',
 
-      'bg-white',
+      'bg-white dark:bg-theme-black',
       'border-b',
       'border-gray-500',
     ]"

components/StakingControl.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-4 p-4 bg-white rounded-lg shadow-[0px_10px_20px_0px_rgba(0,0,0,0.04)]">
+  <div class="flex flex-col gap-4 p-4 bg-white dark:bg-neutral-800 rounded-lg shadow-[0px_10px_20px_0px_rgba(0,0,0,0.04)]">
     <i18n-t
       keypath="staking_stake_on_book_title"
       tag="h2"

components/TTSPlayerModal.vue

@@ -11,7 +11,7 @@
   <UModal
     v-else
     :fullscreen="isFullscreen"
-    :ui="{ content: 'bg-white divide-none' }"
+    :ui="{ content: 'bg-(--ui-bg) divide-none' }"
     @update:open="handleModalUpdateOpen"
   >
     <template #content>
@@ -22,7 +22,7 @@
         <div class="flex items-center justify-between">
           <div class="grow overflow-hidden">
             <h1
-              class="text-center text-sm font-semibold text-gray-500 truncate"
+              class="text-center text-sm font-semibold text-muted truncate"
               v-text="bookTitle"
             />
           </div>
@@ -37,7 +37,7 @@
         </div>
         <h2
           v-if="sectionTitle"
-          class="text-lg font-semibold text-gray-700 truncate text-center laptop:my-4"
+          class="text-lg font-semibold text-(--ui-text) truncate text-center laptop:my-4"
           v-text="sectionTitle"
         />
 
@@ -235,7 +235,7 @@ const scrollIndicatorClasses = [
 
   'h-12',
 
-  'from-white',
+  'from-(--ui-bg)',
   'to-transparent',
   'pointer-events-none',
 ]
@@ -355,8 +355,8 @@ function setSegmentRef(
 
 function getSegmentClass(index: number) {
   const baseClasses = 'inline-block text-sm laptop:text-lg transition-opacity duration-300 cursor-pointer'
-  const activeClasses = 'text-gray-700 opacity-100 font-bold'
-  const inactiveClasses = 'opacity-40 text-gray-500 hover:opacity-90'
+  const activeClasses = 'text-(--ui-text) opacity-100 font-bold'
+  const inactiveClasses = 'opacity-40 text-muted hover:opacity-90'
 
   return `${baseClasses} ${index === currentTTSSegmentIndex.value ? activeClasses : inactiveClasses}`
 }

components/TTSSamplesSection.vue

@@ -11,7 +11,7 @@
         :size="24"
       />
       <h3
-        class="text-lg font-semibold text-gray-900"
+        class="text-lg font-semibold text-highlighted"
         v-text="$t('tts_samples_section_title')"
       />
     </div>
@@ -25,7 +25,7 @@
 
       <UCard
         v-if="isPlayingSample && currentSegmentText"
-        class="text-sm font-medium text-gray-900 rounded-xl"
+        class="text-sm font-medium text-highlighted rounded-xl"
       >
         <div class="relative">
           <!-- Spacer for text -->