[TAS-4569] ✨ Support color mode #635

nwingt · 2026-01-22T03:28:05Z

No description provided.

notion-workspace · 2026-01-22T03:28:10Z

Copilot

Pull request overview

This PR adds comprehensive color mode (light/dark/system) support to the 3ook.com application. The implementation includes user preference storage, UI components for switching modes, and extensive styling updates across pages and components to support dark mode.

Changes:

Added color mode type definitions and user settings integration for persisting user preferences
Enabled Nuxt UI color mode with light as default, and created a composable to sync color mode with user settings
Updated CSS with dark mode variants, replacing hardcoded colors with semantic color classes (text-highlighted, text-muted, text-dimmed, bg-accented)
Added ColorModeSwitcher component and integrated it into the account settings page
Applied dark mode styling across all major pages (store, reader, checkout, account, about) and components

Reviewed changes

Copilot reviewed 22 out of 23 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
shared/types/user-settings.d.ts	Added ColorMode type and colorMode field to user settings
nuxt.config.ts	Enabled Nuxt UI color mode with custom storage key and light default
composables/use-color-mode-sync.ts	New composable to synchronize color mode between Nuxt and user settings
components/ColorModeSwitcher.vue	New component for selecting color mode (light/dark/system)
assets/css/main.css	Added dark mode CSS variables and moved highlighted text color into mode-specific rules
app.config.ts	Updated UI component theme with dark mode ring colors
pages/store/index.vue	Updated tag button hover states with dark mode variants
pages/store/claim.vue	Replaced gray-600 with semantic text-muted class
pages/store/[nftClassId]/index.vue	Updated text colors and backgrounds to support dark mode throughout product page
pages/reader/epub.vue	Added dark mode support to epub reader with background and text color changes, updated UI controls
pages/plus/success.vue	Replaced hardcoded green and gray colors with semantic theme colors
pages/list.vue	Updated heading color to use theme-cyan
pages/checkout.vue	Replaced hardcoded colors with semantic classes throughout checkout flow
pages/account/index.vue	Added ColorModeSwitcher to account settings
pages/about.vue	Updated text colors to use semantic text-muted class
components/*	Updated various components with dark mode support using semantic color classes
i18n/locales/*.json	Added translations for color mode labels and reordered some keys

pages/reader/epub.vue

composables/use-color-mode-sync.ts

pages/store/index.vue

✨ Support color mode

Copilot

Pull request overview

Copilot reviewed 32 out of 33 changed files in this pull request and generated 4 comments.

server/api/user/settings.post.ts

composables/use-color-mode-sync.ts

components/ColorModeSwitcher.vue

pages/reader/epub.vue

✨ Support color mode

Copilot

Pull request overview

Copilot reviewed 33 out of 34 changed files in this pull request and generated 5 comments.

components/TTSPlayerModal.vue

components/LoginPanel.vue

components/TTSPlayerModal.vue

Copilot

Pull request overview

Copilot reviewed 33 out of 34 changed files in this pull request and generated 4 comments.

server/api/user/settings.post.ts

components/ColorModeSwitcher.vue

components/TTSPlayerModal.vue

✨ Support color mode

Copilot

Pull request overview

Copilot reviewed 36 out of 37 changed files in this pull request and generated 3 comments.

Copilot · 2026-02-01T17:22:52Z

stores/user-settings.ts

+    if (settingsEntry.value?.data) {
+      (settingsEntry.value.data as Record<string, unknown>)[key] = value
+    }


The immediate update of settingsEntry.value.data in queueUpdate creates a potential race condition. If the API call fails, the local state will be out of sync with the server. Consider whether this optimistic update is necessary, or if a rollback mechanism should be added to revert the change on API failure.

components/BookshelfItem.vue

assets/css/main.css

✨ Support color mode

williamchong · 2026-02-02T16:49:23Z

pages/about.vue

-definePageMeta({ layout: false })
+definePageMeta({
+  layout: false,
+  colorMode: 'light',


Why force light mode here?

Dont want to waste time on tuning the about page for dark mode

✨ Support color mode 💄 Fine tune dark mode color 👔 Enable color mode for Plus subscribers only

Copilot

Pull request overview

Copilot reviewed 39 out of 40 changed files in this pull request and generated 4 comments.

composables/use-synced-user-settings.ts

Copilot · 2026-02-03T10:08:10Z

composables/use-color-mode-sync.ts

@@ -0,0 +1,64 @@
+export function useColorModeSync() {


The ColorMode type is used but not imported. This file needs to import ColorMode from the shared types to avoid TypeScript errors.

auto imported

Copilot · 2026-02-03T10:08:11Z

server/api/user/settings.post.ts

-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[]


UserSettingKey is used on line 1 and 15 but is not imported. This will cause a TypeScript error. Add the import statement at the top of the file.

auto imported

Copilot · 2026-02-03T10:08:11Z

components/ColorModeSwitcher.vue

+const selectedColorMode = computed(() => preference.value)
+
+function handleColorModeChange(value: string) {
+  preference.value = value as ColorMode


ColorMode type is used on line 34 but is not imported. This will cause a TypeScript error. Add the import for ColorMode from shared types.

auto imported

✨ Support color mode

nwingt requested a review from Copilot January 22, 2026 03:28

Copilot started reviewing on behalf of nwingt January 22, 2026 03:28 View session

Copilot AI reviewed Jan 22, 2026

View reviewed changes

pages/reader/epub.vue Outdated Show resolved Hide resolved

composables/use-color-mode-sync.ts Show resolved Hide resolved

pages/store/index.vue Show resolved Hide resolved

nwingt force-pushed the feature/dark-mode branch from 244887e to 07df180 Compare January 22, 2026 04:17

nwingt added a commit that referenced this pull request Jan 22, 2026

🚀 Deploy #635

faa0866

✨ Support color mode

williamchong pushed a commit that referenced this pull request Jan 22, 2026

🚀 Deploy #635

40db3f4

✨ Support color mode

williamchong pushed a commit that referenced this pull request Jan 22, 2026

🚀 Deploy #635

e7ba055

✨ Support color mode

williamchong pushed a commit that referenced this pull request Jan 23, 2026

🚀 Deploy #635

813b896

✨ Support color mode

williamchong pushed a commit that referenced this pull request Jan 23, 2026

🚀 Deploy #635

93cfdba

✨ Support color mode

williamchong pushed a commit that referenced this pull request Jan 26, 2026

🚀 Deploy #635

c3cd02e

✨ Support color mode

williamchong pushed a commit that referenced this pull request Jan 26, 2026

🚀 Deploy #635

f4cc734

✨ Support color mode

nwingt force-pushed the feature/dark-mode branch from 07df180 to 9756fcb Compare January 27, 2026 09:16

nwingt added a commit that referenced this pull request Jan 27, 2026

🚀 Deploy #635

ab56522

✨ Support color mode

williamchong pushed a commit that referenced this pull request Jan 27, 2026

🚀 Deploy #635

1c2d43b

✨ Support color mode

nwingt force-pushed the feature/dark-mode branch from 9756fcb to 97a3557 Compare January 29, 2026 18:36

nwingt added a commit that referenced this pull request Jan 29, 2026

🚀 Deploy #635

e32c358

✨ Support color mode

nwingt requested a review from Copilot January 29, 2026 18:37

Copilot started reviewing on behalf of nwingt January 29, 2026 18:37 View session

Copilot AI reviewed Jan 29, 2026

View reviewed changes

server/api/user/settings.post.ts Show resolved Hide resolved

composables/use-color-mode-sync.ts Show resolved Hide resolved

components/ColorModeSwitcher.vue Show resolved Hide resolved

pages/reader/epub.vue Outdated Show resolved Hide resolved

nwingt force-pushed the feature/dark-mode branch from 97a3557 to b8e59ab Compare January 30, 2026 07:03

nwingt added a commit that referenced this pull request Jan 30, 2026

🚀 Deploy #635

103c783

✨ Support color mode

nwingt requested a review from Copilot January 30, 2026 07:07

Copilot started reviewing on behalf of nwingt January 30, 2026 07:08 View session

Copilot AI reviewed Jan 30, 2026

View reviewed changes

components/TTSPlayerModal.vue Show resolved Hide resolved

components/TTSPlayerModal.vue Show resolved Hide resolved

components/LoginPanel.vue Show resolved Hide resolved

components/TTSPlayerModal.vue Show resolved Hide resolved

components/TTSPlayerModal.vue Show resolved Hide resolved

nwingt requested a review from Copilot January 30, 2026 07:16

Copilot started reviewing on behalf of nwingt January 30, 2026 07:17 View session

Copilot AI reviewed Jan 30, 2026

View reviewed changes

server/api/user/settings.post.ts Show resolved Hide resolved

components/ColorModeSwitcher.vue Show resolved Hide resolved

components/TTSPlayerModal.vue Show resolved Hide resolved

components/TTSPlayerModal.vue Show resolved Hide resolved

nwingt added a commit that referenced this pull request Jan 30, 2026

🚀 Deploy #635

4d7e802

✨ Support color mode

nwingt force-pushed the feature/dark-mode branch from b8e59ab to 6541ce6 Compare January 30, 2026 08:03

nwingt force-pushed the feature/dark-mode branch from 8b1b0a9 to a11d502 Compare February 1, 2026 17:13

nwingt added a commit that referenced this pull request Feb 1, 2026

🚀 Deploy #635

b07a9c8

✨ Support color mode

nwingt requested a review from Copilot February 1, 2026 17:17

Copilot started reviewing on behalf of nwingt February 1, 2026 17:17 View session

Copilot AI reviewed Feb 1, 2026

View reviewed changes

nwingt added a commit that referenced this pull request Feb 2, 2026

🚀 Deploy #635

0d54295

✨ Support color mode

nwingt force-pushed the feature/dark-mode branch from a11d502 to 83d7788 Compare February 2, 2026 02:40

nwingt added a commit that referenced this pull request Feb 2, 2026

🚀 Deploy #635

43ff9b6

✨ Support color mode

nwingt added a commit that referenced this pull request Feb 2, 2026

🚀 Deploy #635

0751ba4

✨ Support color mode

williamchong pushed a commit that referenced this pull request Feb 2, 2026

🚀 Deploy #635

9e1ef52

✨ Support color mode

williamchong pushed a commit that referenced this pull request Feb 2, 2026

🚀 Deploy #635

982ecb7

✨ Support color mode

williamchong pushed a commit that referenced this pull request Feb 2, 2026

🚀 Deploy #635

9e50d9d

✨ Support color mode

williamchong pushed a commit that referenced this pull request Feb 2, 2026

🚀 Deploy #635

cf061cc

✨ Support color mode

✨ Support color mode

731b79a

nwingt force-pushed the feature/dark-mode branch from 83d7788 to 731b79a Compare February 2, 2026 15:25

nwingt added a commit that referenced this pull request Feb 2, 2026

🚀 Deploy #635

f65e6e4

✨ Support color mode

nwingt added a commit that referenced this pull request Feb 2, 2026

🚀 Deploy #635

be94bf1

✨ Support color mode

williamchong approved these changes Feb 2, 2026

View reviewed changes

nwingt added 2 commits February 3, 2026 09:29

💄 Fine tune dark mode color

21a1142

👔 Enable color mode for Plus subscribers only

02c4baf

nwingt requested a review from williamchong February 3, 2026 02:44

nwingt added a commit that referenced this pull request Feb 3, 2026

🚀 Deploy #635

6bcd923

✨ Support color mode 💄 Fine tune dark mode color 👔 Enable color mode for Plus subscribers only

nwingt requested a review from Copilot February 3, 2026 10:01

Copilot started reviewing on behalf of nwingt February 3, 2026 10:01 View session

Copilot AI reviewed Feb 3, 2026

View reviewed changes

williamchong approved these changes Feb 3, 2026

View reviewed changes

williamchong pushed a commit that referenced this pull request Feb 3, 2026

🚀 Deploy #635

af34d52

✨ Support color mode

williamchong pushed a commit that referenced this pull request Feb 3, 2026

🚀 Deploy #635

64b3b56

✨ Support color mode

nwingt merged commit 9adb2c6 into likecoin:develop Feb 4, 2026
7 checks passed

nwingt deleted the feature/dark-mode branch February 4, 2026 07:49

[TAS-4569] ✨ Support color mode #635

[TAS-4569] ✨ Support color mode #635

Uh oh!

Conversation

nwingt commented Jan 22, 2026

Uh oh!

notion-workspace bot commented Jan 22, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

williamchong Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

nwingt Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

nwingt Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

nwingt Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

nwingt Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!