diff --git a/app.config.ts b/app.config.ts
index 449c432f..ad81ca59 100644
--- a/app.config.ts
+++ b/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',
         },
       ],
     },
diff --git a/app.vue b/app.vue
index f407e80c..c1a1c449 100644
--- a/app.vue
+++ b/app.vue
@@ -168,4 +168,6 @@ useHead({
 })
 
 const { isShowMaintenancePage } = useMaintenanceMode()
+
+useColorModeSync()
 </script>
diff --git a/assets/css/main.css b/assets/css/main.css
index 2407645a..07aad82d 100644
--- a/assets/css/main.css
+++ b/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;
diff --git a/components/AppTabBar.vue b/components/AppTabBar.vue
index 2aa6e901..eb5454d6 100644
--- a/components/AppTabBar.vue
+++ b/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',
               ],
             }"
diff --git a/components/BookCover.vue b/components/BookCover.vue
index ed4b7fe5..8feb18d6 100644
--- a/components/BookCover.vue
+++ b/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 },
         ]"
diff --git a/components/BookCoverCarousel.vue b/components/BookCoverCarousel.vue
index 899879f3..cfebcf5f 100644
--- a/components/BookCoverCarousel.vue
+++ b/components/BookCoverCarousel.vue
@@ -14,7 +14,7 @@
       :ui="{
         item: 'basis-full aspect-2/3 cursor-pointer',
         dots: 'relative bottom-0 gap-2 mt-2',
-        dot: 'size-2 bg-muted data-[active]:bg-(--ui-text-muted)',
+        dot: 'size-2 bg-accented data-[active]:bg-(--ui-text-muted)',
       }"
     >
       <div
diff --git a/components/BookLoadingScreen.vue b/components/BookLoadingScreen.vue
index 1ba066c1..67cc8ab3 100644
--- a/components/BookLoadingScreen.vue
+++ b/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
diff --git a/components/BookshelfItem.vue b/components/BookshelfItem.vue
index a0c6062b..f79f7555 100644
--- a/components/BookshelfItem.vue
+++ b/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>
diff --git a/components/BookstoreItem.vue b/components/BookstoreItem.vue
index 8a4f579e..ba047d38 100644
--- a/components/BookstoreItem.vue
+++ b/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"
diff --git a/components/BottomSlideover.vue b/components/BottomSlideover.vue
index efe892ef..0c73790e 100644
--- a/components/BottomSlideover.vue
+++ b/components/BottomSlideover.vue
@@ -73,6 +73,7 @@ const scrollIndicatorClasses = [
   'h-12',
 
   'from-white',
+  'dark:from-black',
   'to-transparent',
   'pointer-events-none',
 ]
diff --git a/components/ColorModeSwitcher.vue b/components/ColorModeSwitcher.vue
new file mode 100644
index 00000000..8220b647
--- /dev/null
+++ b/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>
diff --git a/components/ErrorModal.vue b/components/ErrorModal.vue
index c6fb6a99..b20c2081 100644
--- a/components/ErrorModal.vue
+++ b/components/ErrorModal.vue
@@ -19,7 +19,7 @@
       />
 
       <h2
-        class="text-(--ui-text-highlighted) font-semibold"
+        class="text-highlighted font-semibold"
         v-text="title || $t('error_modal_title')"
       />
     </template>
@@ -29,13 +29,13 @@
     >
       <p
         v-if="props.description"
-        class="text-(--ui-text-muted) text-sm"
+        class="text-muted text-sm"
         v-text="description"
       />
 
       <code
         v-if="props.rawMessage"
-        class="block not-first:mt-4 px-2 py-1 text-xs font-mono font-medium rounded-md border border-gray-300 bg-gray-100 break-all whitespace-pre-wrap"
+        class="block not-first:mt-4 px-2 py-1 text-xs font-mono font-medium rounded-md border border-accented bg-elevated break-all whitespace-pre-wrap"
         v-text="rawMessage"
       />
 
diff --git a/components/GiftButton.vue b/components/GiftButton.vue
index 81b57cac..a4a34456 100644
--- a/components/GiftButton.vue
+++ b/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>
diff --git a/components/LoginPanel.vue b/components/LoginPanel.vue
index d56009ad..093cf4f3 100644
--- a/components/LoginPanel.vue
+++ b/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')"
     />
 
diff --git a/components/PricingPlanBenefits.vue b/components/PricingPlanBenefits.vue
index b4d840cd..e83c83ee 100644
--- a/components/PricingPlanBenefits.vue
+++ b/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',
diff --git a/components/PricingPlanSelect.vue b/components/PricingPlanSelect.vue
index 6842bff1..01fc0973 100644
--- a/components/PricingPlanSelect.vue
+++ b/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>
diff --git a/components/ReaderHeader.vue b/components/ReaderHeader.vue
index f5aff761..83cb9e11 100644
--- a/components/ReaderHeader.vue
+++ b/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',
     ]"
diff --git a/components/StakingControl.vue b/components/StakingControl.vue
index 31f55c3d..26a4507d 100644
--- a/components/StakingControl.vue
+++ b/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-900 rounded-lg shadow-[0px_10px_20px_0px_rgba(0,0,0,0.04)]">
     <i18n-t
       keypath="staking_stake_on_book_title"
       tag="h2"
@@ -19,8 +19,9 @@
     <!-- Total Stake Display -->
     <UCard
       :ui="{
+        root: 'border-2 border-theme-black dark:border-accented',
         header: 'flex flex-col items-center justify-center',
-        body: '*:flex *:items-center *:justify-between *:px-4 sm:*:px-6 *:py-1.5 text-sm !px-0 !py-1 divide-y divide-muted',
+        body: '*:flex *:items-center *:justify-between *:px-4 sm:*:px-6 *:py-1.5 text-sm !px-0 !py-1 divide-y divide-default',
         footer: 'flex justify-between items-center text-sm py-3 bg-theme-cyan/20',
       }"
     >
@@ -105,7 +106,7 @@
           class="col-span-1"
           :label="$t('staking_unstake_button')"
           variant="outline"
-          color="neutral"
+          color="primary"
           size="lg"
           :loading="isUnstakingAmount"
           :disabled="userStake <= 0n"
diff --git a/components/TTSPlayerModal.vue b/components/TTSPlayerModal.vue
index 51e039f4..a9270ea3 100644
--- a/components/TTSPlayerModal.vue
+++ b/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}`
 }
diff --git a/components/TTSSamplesSection.vue b/components/TTSSamplesSection.vue
index 2378f377..7b2365d2 100644
--- a/components/TTSSamplesSection.vue
+++ b/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 -->
diff --git a/components/TTSVoiceSelector.vue b/components/TTSVoiceSelector.vue
index 5b202b25..9d10b66d 100644
--- a/components/TTSVoiceSelector.vue
+++ b/components/TTSVoiceSelector.vue
@@ -18,7 +18,7 @@
         ]"
         variant="outline"
         size="md"
-        :ui="{ base: 'gap-3 bg-white hover:bg-white hover:border-gray-400 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200 ease-in-out' }"
+        :ui="{ base: 'gap-3 bg-default hover:border-accented hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200 ease-in-out' }"
         @click="handleVoiceClick(sample)"
       >
         <template #leading>
@@ -30,8 +30,8 @@
               'w-10',
               'h-10',
               'rounded-full',
-              'bg-gray-100',
-              'group-hover:bg-gray-200',
+              'bg-accented',
+              'group-hover:bg-muted',
               'transition-colors',
               'duration-200',
               'flex-shrink-0',
@@ -39,7 +39,7 @@
           >
             <UIcon
               :name="icon"
-              class="text-gray-600 group-hover:text-gray-800 transition-colors duration-200"
+              class="text-muted group-hover:text-highlighted transition-colors duration-200"
               size="20"
             />
           </div>
@@ -47,12 +47,12 @@
 
         <div class="flex flex-col gap-1 grow">
           <div
-            class="font-medium text-gray-900 truncate group-hover:text-black transition-colors duration-200"
+            class="font-medium text-toned truncate group-hover:text-highlighted transition-colors duration-200"
             v-text="sample.title"
           />
           <div
             v-if="sample.description"
-            class="text-sm text-gray-500 truncate group-hover:text-gray-600 transition-colors duration-200"
+            class="text-sm text-muted truncate transition-colors duration-200"
             v-text="sample.description"
           />
         </div>
diff --git a/components/UpsellPlusModal.vue b/components/UpsellPlusModal.vue
index 8c87206c..51f9f192 100644
--- a/components/UpsellPlusModal.vue
+++ b/components/UpsellPlusModal.vue
@@ -41,7 +41,7 @@
     <template #body>
       <i18n-t
         v-if="shouldShowYearlyPlan"
-        class="self-center text-theme-black text-center font-bold text-[16px] laptop:text-[20px]"
+        class="self-center text-highlighted text-center font-bold text-[16px] laptop:text-[20px]"
         keypath="upsell_plus_yearly_notice"
         tag="p"
       >
@@ -60,18 +60,18 @@
       </i18n-t>
       <span
         v-if="shouldShowMonthlyPlan"
-        class="self-center text-center text-gray-500 text-xs"
+        class="self-center text-center text-muted text-xs"
         v-text="$t('upsell_plus_or')"
       />
       <i18n-t
         v-if="shouldShowMonthlyPlan"
-        class="self-center text-theme-black text-center font-bold text-[16px] laptop:text-[20px]"
+        class="self-center text-highlighted text-center font-bold text-[16px] laptop:text-[20px]"
         keypath="upsell_plus_monthly_notice"
         tag="p"
       >
         <template #month>
           <span
-            class="text-theme-black font-semibold"
+            class="text-highlighted font-semibold"
             v-text="$t('upsell_plus_monthly_member')"
           />
         </template>
diff --git a/composables/use-color-mode-sync.ts b/composables/use-color-mode-sync.ts
new file mode 100644
index 00000000..11a3ea8d
--- /dev/null
+++ b/composables/use-color-mode-sync.ts
@@ -0,0 +1,64 @@
+export function useColorModeSync() {
+  const colorMode = useColorMode()
+  const { loggedIn: hasLoggedIn, user } = useUserSession()
+  const userSettingsStore = useUserSettingsStore()
+
+  const syncedColorMode = useSyncedUserSettings<ColorMode>({
+    key: 'colorMode',
+    defaultValue: 'light',
+  })
+
+  const hasInitialized = ref(false)
+
+  const isLikerPlus = computed(() => {
+    if (!hasLoggedIn.value) return false
+    return user.value?.isLikerPlus || false
+  })
+
+  // Enforce light mode for non-Plus users
+  const enforcedColorMode = computed(() => {
+    if (!isLikerPlus.value) {
+      return 'light'
+    }
+    return syncedColorMode.value
+  })
+
+  // Sync color mode preference
+  onMounted(async () => {
+    if (hasLoggedIn.value) {
+      // Wait for user settings to be loaded from API
+      if (!userSettingsStore.isInitialized()) {
+        await userSettingsStore.ensureInitialized()
+      }
+      // Apply enforced color mode (light for non-Plus, user preference for Plus)
+      if (enforcedColorMode.value) {
+        colorMode.preference = enforcedColorMode.value
+      }
+    }
+    else {
+      // If not logged in, always use light mode
+      colorMode.preference = 'light'
+    }
+    hasInitialized.value = true
+  })
+
+  // Watch enforcedColorMode and sync to color mode
+  watch(enforcedColorMode, (newValue) => {
+    if (hasInitialized.value && newValue && colorMode.preference !== newValue) {
+      colorMode.preference = newValue
+    }
+  })
+
+  watch(isLikerPlus, (newValue) => {
+    if (hasInitialized.value && !newValue) {
+      // Force light mode when subscription expires
+      colorMode.preference = 'light'
+      syncedColorMode.value = 'light'
+    }
+  })
+
+  return {
+    preference: syncedColorMode,
+    value: computed(() => colorMode.value),
+  }
+}
diff --git a/composables/use-synced-user-settings.ts b/composables/use-synced-user-settings.ts
index 8255bfba..7e6b9b4e 100644
--- a/composables/use-synced-user-settings.ts
+++ b/composables/use-synced-user-settings.ts
@@ -1,5 +1,4 @@
 import type { UserSettingsData } from '~/types/user-settings'
-import type { UserSettingKey } from '~/shared/types/user-settings'
 
 interface UseSyncedUserSettingsOptions<T> {
   key: UserSettingKey
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 769b659f..103ec3bd 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,10 +1,10 @@
 {
   "about_page_author_dung_kai_cheung": "DUNG Kai Cheung",
   "about_page_author_dung_kai_cheung_desc": "DUNG Kai Cheung shares his insights on publishing NFT books on blockchain: fair revenue sharing and reconnecting authors with readers.",
-  "about_page_author_kin_ko": "Kin Ko",
-  "about_page_author_kin_ko_desc": "Kin Ko explains how blockchain technology addresses issues in second-hand book trading, royalty distribution, and book ownership.",
   "about_page_author_fu_yue_an": "Fu Yue'an",
   "about_page_author_fu_yue_an_desc": "Discovering the surprising world of digital books with signed autographs — Fu Yue'an shares his experience publishing ebooks on 3ook.com.",
+  "about_page_author_kin_ko": "Kin Ko",
+  "about_page_author_kin_ko_desc": "Kin Ko explains how blockchain technology addresses issues in second-hand book trading, royalty distribution, and book ownership.",
   "about_page_author_stories_content": "Hear from renowned authors about their experience publishing on 3ook.com and embracing the future of digital books.",
   "about_page_author_stories_title": "Author Stories",
   "about_page_contact_content": "Join our community of over 10,000 subscribers and experience the future of reading and listening.",
@@ -43,6 +43,7 @@
   "account_page_account_title": "Account",
   "account_page_app_settings_title": "Settings",
   "account_page_book_list": "3ookList",
+  "account_page_color_mode": "Color Mode",
   "account_page_contact_support": "Customer service",
   "account_page_cosmos_wallet": "Legacy Wallet",
   "account_page_display_name_tooltip": "Used for referring books to people, the recipient's name on inscription pages signed by authors, etc.",
@@ -190,6 +191,9 @@
   "claim_page_title": "Thank you for your purchase, We are delivering the books to your bookshelf 📚",
   "claim_page_title_await_for_delivery": "Order has been placed",
   "claiming": "Claiming",
+  "color_mode_dark": "Dark",
+  "color_mode_light": "Light",
+  "color_mode_system": "System",
   "common_back": "Back",
   "common_cancel": "Cancel",
   "common_processing": "Processing",
@@ -415,9 +419,9 @@
   "product_page_support_tts_label": "Text-To-Speech",
   "product_page_tts_disabled": "Not Supported",
   "product_page_tts_enabled": "Supported",
-  "reader_display_options_button": "Display options",
   "reader_display_font_size_label": "Font Size",
   "reader_display_line_height_label": "Line Height",
+  "reader_display_options_button": "Display options",
   "reader_epub_rendition_display_failed": "The page cannot be displayed.",
   "reader_page_mode_dual": "Two-page view",
   "reader_page_mode_single": "One-page view",
diff --git a/i18n/locales/zh-Hant.json b/i18n/locales/zh-Hant.json
index 8ef7d752..8e454910 100644
--- a/i18n/locales/zh-Hant.json
+++ b/i18n/locales/zh-Hant.json
@@ -1,10 +1,10 @@
 {
   "about_page_author_dung_kai_cheung": "董啟章",
   "about_page_author_dung_kai_cheung_desc": "董啟章分享在區塊鏈上發行 NFT 書籍的心得：公平收益分配，重新連結作者與讀者。",
-  "about_page_author_kin_ko": "高重建",
-  "about_page_author_kin_ko_desc": "高重建講解區塊鏈技術如何解決二手書交易、版稅分配與書籍擁有權的問題。",
   "about_page_author_fu_yue_an": "傅月庵",
   "about_page_author_fu_yue_an_desc": "數位書籍也能有作者簽名？傅月庵分享數位書籍擁有簽名的驚喜，以及他在 3ook.com 發行電子書的經驗。",
+  "about_page_author_kin_ko": "高重建",
+  "about_page_author_kin_ko_desc": "高重建講解區塊鏈技術如何解決二手書交易、版稅分配與書籍擁有權的問題。",
   "about_page_author_stories_content": "聽聽知名作者分享在 3ook.com 發行作品的經驗，以及對電子書未來的看法。",
   "about_page_author_stories_title": "作者故事",
   "about_page_contact_content": "加入我們超過 10,000 名訂閱者的社群，體驗閱讀和聆聽的未來。",
@@ -43,6 +43,7 @@
   "account_page_account_title": "帳戶",
   "account_page_app_settings_title": "設定",
   "account_page_book_list": "書單",
+  "account_page_color_mode": "外觀顏色",
   "account_page_contact_support": "客戶服務",
   "account_page_cosmos_wallet": "舊版錢包",
   "account_page_display_name_tooltip": "用於向人推薦書目、作者簽名扉頁的上款等。",
@@ -190,6 +191,9 @@
   "claim_page_title": "感謝您的購買，書僮正將書籍送往您的書架 📚",
   "claim_page_title_await_for_delivery": "訂單已下達",
   "claiming": "正在領取",
+  "color_mode_dark": "深色",
+  "color_mode_light": "淺色",
+  "color_mode_system": "跟隨系統",
   "common_back": "返回",
   "common_cancel": "取消",
   "common_processing": "處理中",
@@ -415,9 +419,9 @@
   "product_page_support_tts_label": "支援朗讀",
   "product_page_tts_disabled": "不支援",
   "product_page_tts_enabled": "支援",
-  "reader_display_options_button": "顯示選項",
   "reader_display_font_size_label": "字體大小",
   "reader_display_line_height_label": "行高",
+  "reader_display_options_button": "顯示選項",
   "reader_epub_rendition_display_failed": "無法顯示該頁。",
   "reader_page_mode_dual": "雙頁顯示",
   "reader_page_mode_single": "單頁顯示",
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 62a3a79a..67a743e0 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -43,8 +43,14 @@ export default defineNuxtConfig({
     name: '3ook.com',
   },
 
+  colorMode: {
+    preference: 'light',
+    fallback: 'light',
+    storageKey: '3ook-com-color-mode',
+  },
+
   ui: {
-    colorMode: false,
+    colorMode: true,
   },
 
   runtimeConfig: {
diff --git a/pages/about.vue b/pages/about.vue
index 33370ac8..ffb607d7 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -231,7 +231,7 @@
           <h2 class="text-2xl md:text-3xl font-bold text-gray-900">
             {{ $t('about_page_author_stories_title') }}
           </h2>
-          <p class="text-lg text-gray-600 leading-relaxed max-w-2xl mx-auto">
+          <p class="text-lg text-muted leading-relaxed max-w-2xl mx-auto">
             {{ $t('about_page_author_stories_content') }}
           </p>
         </div>
@@ -253,7 +253,7 @@
               />
             </h3>
           </div>
-          <p class="text-gray-600 leading-relaxed">
+          <p class="text-muted leading-relaxed">
             {{ $t('about_page_author_dung_kai_cheung_desc') }}
           </p>
 
@@ -296,7 +296,7 @@
                 />
               </h3>
             </div>
-            <p class="text-gray-600 leading-relaxed">
+            <p class="text-muted leading-relaxed">
               {{ $t('about_page_author_kin_ko_desc') }}
             </p>
 
@@ -338,7 +338,7 @@
                 />
               </h3>
             </div>
-            <p class="text-gray-600 leading-relaxed">
+            <p class="text-muted leading-relaxed">
               {{ $t('about_page_author_fu_yue_an_desc') }}
             </p>
 
@@ -428,7 +428,7 @@
           v-text="$t('about_page_contact_title')"
         />
         <p
-          class="text-lg text-gray-600 max-w-2xl mx-auto"
+          class="text-lg text-muted max-w-2xl mx-auto"
           v-text="$t('about_page_contact_content')"
         />
         <div class="flex flex-row flex-wrap gap-4 justify-center">
@@ -453,7 +453,10 @@
 </template>
 
 <script setup lang="ts">
-definePageMeta({ layout: false })
+definePageMeta({
+  layout: false,
+  colorMode: 'light',
+})
 
 const { t: $t } = useI18n()
 const localeRoute = useLocaleRoute()
diff --git a/pages/account/index.vue b/pages/account/index.vue
index 3a57cc9c..144b0908 100644
--- a/pages/account/index.vue
+++ b/pages/account/index.vue
@@ -242,6 +242,22 @@
             <CurrencySwitcher :is-icon-hidden="true" />
           </template>
         </AccountSettingsItem>
+
+        <AccountSettingsItem
+          icon="i-material-symbols-dark-mode-outline-rounded"
+          :label="$t('account_page_color_mode')"
+        >
+          <template #right>
+            <ColorModeSwitcher v-if="user?.isLikerPlus" />
+            <UButton
+              v-else
+              :label="$t('account_page_upgrade_to_plus')"
+              variant="solid"
+              color="primary"
+              :to="localeRoute({ name: 'member', query: { ll_medium: 'color-mode' } })"
+            />
+          </template>
+        </AccountSettingsItem>
       </UCard>
     </section>
 
diff --git a/pages/checkout.vue b/pages/checkout.vue
index 4f80a876..b1686195 100644
--- a/pages/checkout.vue
+++ b/pages/checkout.vue
@@ -15,11 +15,11 @@
         class="flex flex-col items-center justify-center py-[56px]"
       >
         <UIcon
-          class="text-green-500 text-[40px] mb-4"
+          class="text-theme-cyan text-[40px] mb-4"
           name="i-material-symbols-shopping-cart"
         />
         <h1
-          class="text-green-500 text-xl font-bold mb-4"
+          class="text-theme-cyan text-xl font-bold mb-4"
           v-text="$t('checkout_preparing_title')"
         />
         <UProgress
@@ -33,7 +33,7 @@
     <template v-else-if="cartItems.length > 0">
       <section class="flex flex-col w-full max-w-[800px] mt-8">
         <h1
-          class="text-[32px] font-bold text-black mb-8"
+          class="text-[32px] font-bold text-highlighted mb-8"
           v-text="$t('checkout_page_title')"
         />
 
@@ -58,12 +58,12 @@
 
               <div class="flex-1">
                 <h3
-                  class="font-semibold text-black mb-1"
+                  class="font-semibold text-highlighted mb-1"
                   v-text="item.bookInfo?.name"
                 />
                 <p
                   v-if="item.bookInfo?.authorName"
-                  class="text-sm text-gray-600 mb-2"
+                  class="text-sm text-muted mb-2"
                   v-text="$t('checkout_by_author', { author: item.bookInfo.authorName })"
                 />
                 <div class="flex items-center justify-between">
@@ -139,7 +139,7 @@
           name="i-material-symbols-shopping-cart-off"
         />
         <h1
-          class="text-gray-600 text-xl font-bold mb-2"
+          class="text-muted text-xl font-bold mb-2"
           v-text="$t('checkout_cart_empty_title')"
         />
         <p
diff --git a/pages/list.vue b/pages/list.vue
index a1c96205..35ab0f28 100644
--- a/pages/list.vue
+++ b/pages/list.vue
@@ -2,7 +2,7 @@
   <main class="flex flex-col grow px-4 laptop:px-12 pb-4">
     <div class="flex flex-col grow w-full max-w-[1200px] mx-auto">
       <h1
-        class="mt-4 laptop:mt-10 mb-6 text-green-500 text-xl laptop:text-3xl font-bold"
+        class="mt-4 laptop:mt-10 mb-6 text-theme-cyan text-xl laptop:text-3xl font-bold"
         v-text="$t('book_list_title')"
       />
       <UCard
diff --git a/pages/plus/success.vue b/pages/plus/success.vue
index 9c7bced0..10fa14f0 100644
--- a/pages/plus/success.vue
+++ b/pages/plus/success.vue
@@ -2,7 +2,7 @@
   <main class="items-center justify-center w-full max-w-xl mx-auto p-4 space-y-4 text-center">
     <UIcon
       name="i-material-symbols-check-circle-rounded"
-      class="text-green-500 mb-4"
+      class="text-theme-cyan mb-4"
       size="64"
     />
 
@@ -11,7 +11,7 @@
       v-text="$t('subscription_success_title')"
     />
     <p
-      class="mb-6 text-gray-600"
+      class="mb-6 text-muted"
       v-text="$t('subscription_success_description')"
     />
 
diff --git a/pages/reader/epub.vue b/pages/reader/epub.vue
index 8f2add80..9b62a37d 100644
--- a/pages/reader/epub.vue
+++ b/pages/reader/epub.vue
@@ -1,6 +1,6 @@
 <template>
   <main>
-    <Transition name="reader-load" >
+    <Transition name="reader-load">
       <BookLoadingScreen
         v-if="isReaderLoading"
         class="absolute inset-0"
@@ -168,8 +168,9 @@
                       />
                       <USelect
                         v-model="fontSize"
-                        class="w-full"
+                        class="pl-9 w-full"
                         :items="FONT_SIZE_OPTIONS"
+                        :ui="{ value: 'mx-auto' }"
                       />
                       <UButton
                         icon="i-material-symbols-text-increase-rounded"
@@ -189,12 +190,10 @@
                         variant="ghost"
                         @click="decreaseLineHeight"
                       />
-                      <div class="flex w-full h-[32px] py-1 px-3 bg-gray-50 rounded-md border-2 border-black">
-                        <span
-                          class="text-center w-full"
-                          v-text="lineHeight.toFixed(1)"
-                        />
-                      </div>
+                      <div
+                        class="flex justify-center items-center w-full px-2.5 py-1.5 text-sm rounded-md ring-2 ring-theme-black dark:ring-muted ring-inset"
+                        v-text="lineHeight.toFixed(1)"
+                      />
                       <UButton
                         icon="i-material-symbols-add"
                         variant="ghost"
@@ -266,7 +265,7 @@
               'flex',
               'items-center',
               'justify-center',
-              'bg-white/75',
+              'bg-accented/75',
               isPageLoading ? 'opacity-100' : 'opacity-0',
               'pointer-events-none',
               'transition-opacity',
@@ -321,7 +320,7 @@ if (!hasLoggedIn.value) {
   await navigateTo(localeRoute({ name: 'account', query: route.query }))
 }
 const toast = useToast()
-
+const { value: colorModeValue } = useColorModeSync()
 const { t: $t } = useI18n()
 const nftStore = useNFTStore()
 const bookSettingsStore = useBookSettingsStore()
@@ -472,9 +471,6 @@ const fontSize = useSyncedBookSettings({
   defaultValue: FONT_SIZE_OPTIONS[DEFAULT_FONT_SIZE_INDEX],
   namespace: 'epub',
 })
-watch(fontSize, (size) => {
-  rendition.value?.themes.fontSize(`${size}px`)
-})
 
 const DEFAULT_LINE_HEIGHT = 1.6
 const lineHeight = useSyncedBookSettings({
@@ -483,12 +479,43 @@ const lineHeight = useSyncedBookSettings({
   defaultValue: DEFAULT_LINE_HEIGHT,
   namespace: 'epub',
 })
-watch(lineHeight, (height) => {
-  rendition.value?.themes.default({
-    'p, div, span, h1, h2, h3, h4, h5, h6, li': {
-      'line-height': `${height}em !important`,
-    },
+
+function applyTheme() {
+  if (!rendition.value) return
+
+  const isDarkMode = colorModeValue.value === 'dark'
+  const bodyCSS: Record<string, string> = {
+    'color': isDarkMode ? '#f9f9f9 !important' : '#333',
+    '-webkit-text-size-adjust': 'none',
+    'text-size-adjust': 'none',
+    'direction': 'ltr',
+  }
+  if (isDarkMode) {
+    bodyCSS.background = '#131313'
+  }
+  const textCSS: Record<string, string> = {
+    'line-height': `${lineHeight.value}em !important`,
+  }
+  if (isDarkMode) {
+    textCSS.color = bodyCSS.color as string
+  }
+  rendition.value.themes.default({
+    'body': bodyCSS,
+    'p, div, span, h1, h2, h3, h4, h5, h6, li': textCSS,
   })
+  rendition.value.themes.fontSize(`${fontSize.value}px`)
+}
+
+watch(fontSize, () => {
+  applyTheme()
+})
+
+watch(lineHeight, () => {
+  applyTheme()
+})
+
+watch(colorModeValue, () => {
+  applyTheme()
 })
 
 let cleanUpClickListener: (() => void) | undefined
@@ -583,19 +610,7 @@ async function loadEPub() {
     allowScriptedContent: true,
     spread: 'none',
   })
-  const bodyCSS: Record<string, string> = {
-    'color': '#333',
-    '-webkit-text-size-adjust': 'none',
-    'text-size-adjust': 'none',
-    'direction': 'ltr', // Mitigate epubjs mixing up dir & page-progression-direction
-  }
-  rendition.value.themes.default({
-    'body': bodyCSS,
-    'p, div, span, h1, h2, h3, h4, h5, h6, li': {
-      'line-height': `${lineHeight.value}em !important`,
-    },
-  })
-  rendition.value.themes.fontSize(`${fontSize.value}px`)
+  applyTheme()
   isPageLoading.value = true
 
   let hasDisplayed = false
diff --git a/pages/store/[nftClassId]/index.vue b/pages/store/[nftClassId]/index.vue
index 72c7f781..932e08fc 100644
--- a/pages/store/[nftClassId]/index.vue
+++ b/pages/store/[nftClassId]/index.vue
@@ -45,12 +45,12 @@
 
           <div class="flex flex-col justify-center">
             <h1
-              class="text-[24px] text-black laptop:text-[32px] desktop:text-[40px] font-bold leading-[1.2]"
+              class="text-[24px] text-highlighted laptop:text-[32px] desktop:text-[40px] font-bold leading-[1.2]"
               v-text="bookName"
             />
             <p
               v-if="bookInfo.alternativeHeadline.value"
-              class="text-[16px] text-gray-600 laptop:text-[20px] desktop:text-[24px] leading-[1.3] mt-2"
+              class="text-[16px] text-muted laptop:text-[20px] desktop:text-[24px] leading-[1.3] mt-2"
               v-text="bookInfo.alternativeHeadline.value"
             />
 
@@ -61,7 +61,7 @@
                 'gap-x-[64px]',
                 'gap-y-6',
                 'mt-6 tablet:mt-8',
-                '[&>li>div:first-child]:text-gray-600',
+                '[&>li>div:first-child]:text-muted',
                 '[&>li>div:first-child]:text-sm',
                 '[&>li>div:first-child]:mb-2',
               ]"
@@ -91,7 +91,7 @@
           variant="link"
           class="gap-6 w-full mt-[52px] tablet:mt-[80px]"
           :unmount-on-hide="false"
-          :ui="{ list: 'gap-6 border-0', trigger: 'text-lg font-bold pb-0 px-0', indicator: 'border-1' }"
+          :ui="{ list: 'gap-6 border-0', trigger: 'text-lg font-bold pb-0 px-0', indicator: 'border-1 dark:border-theme-cyan' }"
         >
           <template #description>
             <ExpandableContent>
@@ -176,7 +176,7 @@
           </template>
 
           <template #staking-info>
-            <div class="max-tablet:hidden space-y-4 text-theme-black">
+            <div class="max-tablet:hidden space-y-4 text-highlighted">
               <div class="grid grid-cols-1 tablet:grid-cols-3 gap-4">
                 <UCard :ui="{ body: 'p-4' }">
                   <div class="text-center">
@@ -304,7 +304,7 @@
           <template v-else>
             <div
               v-if="pricingItems.length"
-              class="bg-white p-4 pb-8 rounded-lg shadow-[0px_10px_20px_0px_rgba(0,0,0,0.04)]"
+              class="bg-white dark:bg-neutral-900 space-y-6 p-4 pt-6 pb-8 rounded-lg shadow-[0px_10px_20px_0px_rgba(0,0,0,0.04)]"
             >
               <ul
                 ref="pricing"
@@ -319,12 +319,16 @@
                       'flex',
                       'items-center',
                       'gap-3',
-                      'hover:bg-gray-200',
+                      'dark:bg-neutral-800',
+                      'hover:bg-muted',
+                      'hover:dark:bg-neutral-700/50',
                       'rounded-lg',
                       'w-full',
                       'p-4',
                       'border-2',
-                      item.isSelected ? 'border-gray-900' : 'border-gray-300',
+                      item.isSelected
+                        ? 'border-neutral-900 dark:border-neutral-300'
+                        : 'border-neutral-300 dark:border-neutral-700',
                       'transition-[background-color, border-color]',
                       'duration-200',
                       'ease-in-out',
@@ -338,15 +342,15 @@
                           'absolute',
                           'w-[20px]',
                           'h-[20px]',
-                          item.isSelected ? 'bg-theme-50' : 'bg-white',
+                          item.isSelected ? 'bg-theme-cyan' : 'bg-white dark:bg-black',
                           'rounded-full',
-                          'border',
-                          'border-gray-300',
+                          'outline',
+                          'outline-neutral-300',
                         ]"
                       />
                       <UIcon
                         v-if="item.isSelected"
-                        class="absolute text-gray-900 z-10"
+                        class="absolute text-neutral-900 z-10"
                         name="i-material-symbols-check-circle"
                         size="24"
                       />
@@ -358,7 +362,7 @@
                           'justify-between',
                           'items-center',
                           'gap-3',
-                          item.isSoldOut ? 'text-gray-400' : 'text-gray-900',
+                          item.isSoldOut ? 'text-dimmed' : 'text-highlighted',
                         ]"
                       >
                         <span
@@ -375,14 +379,14 @@
                           class="flex flex-col items-end text-right"
                         >
                           <template v-if="item?.discountedPrice">
-                            <span class="flex flex-nowrap items-center text-gray-900 font-semibold">
+                            <span class="flex flex-nowrap items-center text-highlighted font-semibold">
                               <span v-text="item.discountedPrice" />
                               <PlusBadge
                                 v-if="isLikerPlus"
                                 class="ml-1"
                               />
                             </span>
-                            <span class="text-xs text-gray-400 line-through">
+                            <span class="text-xs text-dimmed line-through">
                               <span v-text="item.originalPrice" />
                             </span>
                           </template>
@@ -525,7 +529,7 @@
       class="w-full max-w-[1200px] mx-auto mt-16 laptop:mt-20"
     >
       <h2
-        class="text-green-500 text-lg font-bold"
+        class="text-theme-cyan text-lg font-bold"
         v-text="$t('product_page_related_books_title')"
       />
 
@@ -564,9 +568,9 @@
         'mb-safe',
         'px-4',
         'py-3',
-        'bg-white',
-        'border-b',
-        'border-b-muted',
+        'bg-white dark:bg-(--app-bg)',
+        'border-y',
+        'border-y-muted',
         'z-10',
       ]"
     >
@@ -583,7 +587,7 @@
       </template>
 
       <template v-else-if="pricingItems.length">
-        <span class="text-green-500">
+        <span class="text-theme-cyan">
           <span
             v-if="selectedPricingItem?.discountedPrice"
             class="text-2xl font-semibold"
diff --git a/pages/store/claim.vue b/pages/store/claim.vue
index 66fb6074..2cf5d31a 100644
--- a/pages/store/claim.vue
+++ b/pages/store/claim.vue
@@ -44,7 +44,7 @@
         #footer
       >
         <span
-          class="px-6 text-xs text-gray-600"
+          class="px-6 text-xs text-muted"
           v-text="$t('claim_page_description_await_for_delivery')"
         />
         <UButton
diff --git a/pages/store/index.vue b/pages/store/index.vue
index 4ee2301b..e7f5cbe2 100644
--- a/pages/store/index.vue
+++ b/pages/store/index.vue
@@ -106,7 +106,7 @@
               fixedTag.value === TAG_DEFAULT ? TAG_BUTTON_CLASS_DARK : TAG_BUTTON_CLASS_LIGHT,
               TAG_BUTTON_CLASS_BASE,
               'px-2.5 laptop:px-4',
-              '!ring-theme-black',
+              '!ring-theme-black dark:!ring-muted',
             ],
             label: 'text-sm laptop:text-base',
           }"
@@ -341,8 +341,8 @@ const isTablet = useMediaQuery('(max-width: 768px)')
 const isMobile = useMediaQuery('(max-width: 425px)')
 
 const TAG_BUTTON_CLASS_BASE = 'rounded-full hover:-translate-y-0.5 transition-all'
-const TAG_BUTTON_CLASS_LIGHT = 'bg-(--app-bg) hover:bg-theme-white/80'
-const TAG_BUTTON_CLASS_DARK = 'bg-theme-black hover:bg-theme-black/80 text-theme-cyan'
+const TAG_BUTTON_CLASS_LIGHT = 'bg-(--app-bg) hover:bg-accented/80 hover:dark:bg-muted/80'
+const TAG_BUTTON_CLASS_DARK = 'bg-theme-black hover:bg-theme-black/80 hover:dark:bg-accented/80 text-theme-cyan'
 
 const querySearchTerm = computed(() => getRouteQuery('q', ''))
 const queryAuthorName = computed(() => getRouteQuery('author', ''))
diff --git a/server/api/user/settings.post.ts b/server/api/user/settings.post.ts
index a46f6a07..6084a870 100644
--- a/server/api/user/settings.post.ts
+++ b/server/api/user/settings.post.ts
@@ -1,9 +1,15 @@
-import type { UserSettingKey } from '~/shared/types/user-settings'
-
-const ALLOWED_KEYS = ['locale', 'currency'] as const satisfies readonly UserSettingKey[]
+const ALLOWED_KEYS = ['locale', 'currency', 'colorMode'] as const satisfies readonly UserSettingKey[]
 
 export default defineEventHandler(async (event) => {
-  const wallet = await requireUserWallet(event)
+  const session = await requireUserSession(event)
+  const wallet = session.user.evmWallet
+  if (!wallet) {
+    throw createError({
+      statusCode: 401,
+      message: 'WALLET_NOT_FOUND',
+    })
+  }
+
   const body = await readBody(event)
 
   const invalidKeys = Object.keys(body).filter(key => !ALLOWED_KEYS.includes(key as UserSettingKey))
@@ -14,6 +20,13 @@ export default defineEventHandler(async (event) => {
     })
   }
 
+  // Enforce color mode restriction for non-Plus users
+  const isLikerPlus = session.user.isLikerPlus || false
+  if ('colorMode' in body && !isLikerPlus) {
+    // Non-Plus users can only use light mode
+    body.colorMode = 'light'
+  }
+
   try {
     await updateUserSettings(wallet, body)
     return { success: true }
diff --git a/server/utils/api-user.ts b/server/utils/api-user.ts
index cb82324d..4532391f 100644
--- a/server/utils/api-user.ts
+++ b/server/utils/api-user.ts
@@ -125,6 +125,7 @@ export async function getUserSettings(
   return {
     locale: data.locale,
     currency: data.currency,
+    colorMode: data.colorMode,
     updatedAt: data.updatedAt instanceof Timestamp ? data.updatedAt.toMillis() : undefined,
   }
 }
diff --git a/shared/types/user-settings.d.ts b/shared/types/user-settings.d.ts
index 082678bd..a5bb26bd 100644
--- a/shared/types/user-settings.d.ts
+++ b/shared/types/user-settings.d.ts
@@ -1,10 +1,12 @@
 import type { LocaleCode } from '~/composables/use-auto-locale'
 
 export type PaymentCurrency = 'auto' | 'hkd' | 'twd' | 'usd'
+export type ColorMode = 'light' | 'dark' | 'system'
 
 export interface BaseUserSettingsData {
   locale?: LocaleCode | null
   currency?: PaymentCurrency
+  colorMode?: ColorMode
 }
 
-export type UserSettingKey = 'locale' | 'currency'
+export type UserSettingKey = 'locale' | 'currency' | 'colorMode'
diff --git a/stores/user-settings.ts b/stores/user-settings.ts
index 821acb18..ac8e457b 100644
--- a/stores/user-settings.ts
+++ b/stores/user-settings.ts
@@ -89,6 +89,11 @@ export const useUserSettingsStore = defineStore('user-settings', () => {
 
   function queueUpdate(key: string, value: unknown) {
     if (!hasLoggedIn.value) return
+
+    if (settingsEntry.value?.data) {
+      (settingsEntry.value.data as Record<string, unknown>)[key] = value
+    }
+
     batchQueue.value.set(key, value)
     debouncedFlush()
   }