Merge pull request #4 from lancewilhelm/codex/update-reader-component-dark-mode-options

Reader: add 'gray' and 'shadow' themes, update theme picker and normalize settings

Author: lancewilhelm

app/pages/books/[id]/read.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type Book from 'epubjs/types/book';
 import type Rendition from 'epubjs/types/rendition';
+import type { ReaderTheme } from '~/stores/userSettings';
 
 definePageMeta({
   auth: {
@@ -21,7 +22,6 @@ type FetchErrorLike = {
 };
 
 type ReaderDisplayMode = 'scroll' | 'pages';
-type ReaderTheme = 'light' | 'dark' | 'app';
 
 const route = useRoute();
 const bookId = computed(() => String(route.params.id || ''));
@@ -132,11 +132,16 @@ function getThemeTokens() {
   const delbText = rootStyles.getPropertyValue('--text-color').trim();
   const delbMain = rootStyles.getPropertyValue('--main-color').trim();
 
-  return readerTheme.value === 'light'
-    ? { bg: '#ffffff', text: '#111111', link: '#2563eb' }
-    : readerTheme.value === 'dark'
-      ? { bg: '#1b1b1b', text: '#dddddd', link: '#93c5fd' }
-      : { bg: delbBg, text: delbText, link: delbMain };
+  switch (readerTheme.value) {
+    case 'light':
+      return { bg: '#ffffff', text: '#111111', link: '#2563eb' };
+    case 'gray':
+      return { bg: '#1b1b1b', text: '#dddddd', link: '#93c5fd' };
+    case 'shadow':
+      return { bg: '#000000', text: '#eeeeee', link: '#eeeeee' };
+    default:
+      return { bg: delbBg, text: delbText, link: delbMain };
+  }
 }
 
 function ensureReaderThemeRegistered(rendition: {
@@ -281,15 +286,18 @@ function getThemeClass(hover?: boolean) {
   const theme = readerTheme.value ?? 'app';
 
   const base =
-    theme === 'dark'
+    theme === 'gray'
       ? 'bg-[#1b1b1b] text-[#ddd]'
-      : theme === 'light'
-        ? 'bg-[#fff] text-[#111]'
-        : '';
+      : theme === 'shadow'
+        ? 'bg-black text-[#eee]'
+        : theme === 'light'
+          ? 'bg-[#fff] text-[#111]'
+          : '';
 
   if (!hover) return base;
 
-  if (theme === 'dark') return base + ' hover:bg-[#222]';
+  if (theme === 'gray') return base + ' hover:bg-[#222]';
+  if (theme === 'shadow') return base + ' hover:bg-[#111]';
   if (theme === 'light') return base + ' hover:bg-[#eee]';
   return base + ' hover:bg-(--sub-color)/5';
 }
@@ -612,7 +620,7 @@ watch(readerDisplayMode, async () => {
 
               <div class="space-y-2">
                 <div class="text-sm">Theme</div>
-                <div class="grid grid-cols-3 gap-2">
+                <div class="grid grid-cols-4 gap-2">
                   <label class="cursor-pointer">
                     <input
                       v-model="readerTheme"
@@ -621,7 +629,7 @@ watch(readerDisplayMode, async () => {
                       class="sr-only peer"
                     />
                     <span
-                      class="block rounded-md px-2 py-1 text-center text-xs font-medium bg-white text-[#111] border-white peer-checked:border-(--main-color) border-2"
+                      class="flex items-center justify-center rounded-md px-2 py-1 text-center text-xs font-medium bg-white text-[#111] border-white peer-checked:border-(--main-color) border-2"
                     >
                       Light
                     </span>
@@ -630,13 +638,26 @@ watch(readerDisplayMode, async () => {
                     <input
                       v-model="readerTheme"
                       type="radio"
-                      value="dark"
+                      value="gray"
+                      class="sr-only peer"
+                    />
+                    <span
+                      class="flex items-center justify-center rounded-md px-2 py-1 text-center text-xs font-medium bg-[#1b1b1b] text-[#ddd] border-[#1b1b1b] peer-checked:border-(--main-color) border-2"
+                    >
+                      Gray
+                    </span>
+                  </label>
+                  <label class="cursor-pointer">
+                    <input
+                      v-model="readerTheme"
+                      type="radio"
+                      value="shadow"
                       class="sr-only peer"
                     />
                     <span
-                      class="block rounded-md px-2 py-1 text-center text-xs font-medium bg-[#1b1b1b] text-[#ddd] border-[#1b1b1b] peer-checked:border-(--main-color) border-2"
+                      class="flex items-center justify-center rounded-md px-2 py-1 text-center text-xs font-medium bg-black text-[#eee] border-black peer-checked:border-(--main-color) border-2"
                     >
-                      Dark
+                      Shadow
                     </span>
                   </label>
                   <label class="cursor-pointer">
@@ -647,7 +668,7 @@ watch(readerDisplayMode, async () => {
                       class="sr-only peer"
                     />
                     <span
-                      class="block rounded-md px-2 py-1 text-center text-xs font-medium bg-(--sub-alt-color) text-(--text-color) border-(--sub-alt-color) peer-checked:border-(--main-color) border-2"
+                      class="flex items-center justify-center rounded-md px-2 py-1 text-center text-xs font-medium bg-(--bg-color) text-(--text-color) border-(--sub-color) peer-checked:border-(--main-color) border-2"
                     >
                       Delb
                     </span>

app/stores/userSettings.ts

@@ -20,6 +20,8 @@ export type FontFamily = (typeof fontFamilyOptions)[number];
 export const funboxModes = ['confetti', 'snow'];
 export type FunboxMode = (typeof funboxModes)[number];
 
+export type ReaderTheme = 'system' | 'light' | 'gray' | 'shadow' | 'app';
+
 export interface BaseUserSettings {
   theme?: string;
   fontFamily: FontFamily;
@@ -77,7 +79,7 @@ export interface BaseUserSettings {
     lineHeight: number;
     fontFamily: string;
     displayMode: 'pages' | 'scroll';
-    theme: 'system' | 'light' | 'dark' | 'app';
+    theme: ReaderTheme;
   };
 }
 
@@ -200,6 +202,26 @@ function applyOverrides(
   ) as unknown as BaseUserSettings;
 }
 
+function normalizeReaderTheme(theme: unknown): ReaderTheme {
+  if (theme === 'dark') return 'gray';
+  if (theme === 'system') return 'system';
+  if (theme === 'light') return 'light';
+  if (theme === 'gray') return 'gray';
+  if (theme === 'shadow') return 'shadow';
+  if (theme === 'app') return 'app';
+  return 'app';
+}
+
+function normalizeReaderSettings(settings: BaseUserSettings): BaseUserSettings {
+  return {
+    ...settings,
+    reader: {
+      ...settings.reader,
+      theme: normalizeReaderTheme(settings.reader?.theme),
+    },
+  };
+}
+
 function normalizeSettings(remote: Partial<UserSettings>): UserSettings {
   const baseDefaults = getBaseDefaults();
   const defaults = getDefaultSettings();
@@ -213,6 +235,7 @@ function normalizeSettings(remote: Partial<UserSettings>): UserSettings {
     : defaults.mobile;
 
   const base = getBaseSettings(merged);
+  const normalizedBase = normalizeReaderSettings(base);
   const legacyOverrides = isPlainObject(
     (mobileBase as unknown as Record<string, unknown>).overrides,
   )
@@ -226,15 +249,16 @@ function normalizeSettings(remote: Partial<UserSettings>): UserSettings {
         mobileBase.settings as unknown as Record<string, unknown>,
       ) as unknown as BaseUserSettings)
     : legacyOverrides
-      ? applyOverrides(base, legacyOverrides)
+      ? applyOverrides(normalizedBase, legacyOverrides)
       : cloneValue(baseDefaults);
 
   return {
     ...merged,
+    ...normalizedBase,
     mobile: {
       enabled: !!mobileBase.enabled,
       searchButton: !!mobileBase.searchButton,
-      settings: mobileSettings,
+      settings: normalizeReaderSettings(mobileSettings),
     },
   };
 }