Chore: Update Theme-Default & Remove Light-Contrast

src/design/themes/dark.css

@@ -1,4 +1,4 @@
-[data-theme="high-contrast"] {
+[data-theme="dark"] {
   --bg-void:      #000000;
   --bg-base:      #080808;
   --bg-surface:   #0d0d0d;
@@ -22,4 +22,4 @@
   --accent-muted:  #1e2e1e;
   --accent-fg:     #bcd8bc;
   --accent-bright: #9fcf9f;
-}
+}

src/design/themes/index.css

@@ -1,5 +1,5 @@
-@import "./high-contrast.css";
+@import "./original.css";
-@import "./light-contrast.css";
+@import "./dark.css";
 @import "./light.css";
 @import "./midnight.css";
-@import "./warm.css";
+@import "./warm.css";

src/design/themes/light-contrast.css

@@ -1,29 +0,0 @@
-[data-theme="light-contrast"] {
-  --bg-void:      #d8d4ce;
-  --bg-base:      #e2deda;
-  --bg-surface:   #ece8e2;
-  --bg-raised:    #f5f2ec;
-  --bg-overlay:   #ffffff;
-  --bg-subtle:    #e4e0d8;
-
-  --border-dim:    #c4c0b8;
-  --border-base:   #b0aca4;
-  --border-strong: #989490;
-  --border-focus:  #3a5a3a;
-
-  --text-primary:   #080806;
-  --text-secondary: #181612;
-  --text-muted:     #38342e;
-  --text-faint:     #706c64;
-  --text-disabled:  #b0aca4;
-
-  --accent:        #2a5a2a;
-  --accent-dim:    #b0ccb0;
-  --accent-muted:  #c8dcc8;
-  --accent-fg:     #183818;
-  --accent-bright: #1e4e1e;
-
-  --color-error:    #8a1a1a;
-  --color-error-bg: #f8e0e0;
-  --color-read:     #e0dcd4;
-}

src/design/themes/light.css

@@ -1,32 +1,29 @@
 [data-theme="light"] {
-  --bg-void:      #e8e6e2;
+  --bg-void:      #d8d4ce;
-  --bg-base:      #eeece8;
+  --bg-base:      #e2deda;
-  --bg-surface:   #f4f2ee;
+  --bg-surface:   #ece8e2;
-  --bg-raised:    #faf8f4;
+  --bg-raised:    #f5f2ec;
   --bg-overlay:   #ffffff;
-  --bg-subtle:    #f0ede8;
+  --bg-subtle:    #e4e0d8;
 
-  --border-dim:    #dedad4;
+  --border-dim:    #c4c0b8;
-  --border-base:   #d0ccc6;
+  --border-base:   #b0aca4;
-  --border-strong: #bbb6ae;
+  --border-strong: #989490;
-  --border-focus:  #5a7a5a;
+  --border-focus:  #3a5a3a;
 
-  --text-primary:   #1a1916;
+  --text-primary:   #080806;
-  --text-secondary: #2e2c28;
+  --text-secondary: #181612;
-  --text-muted:     #5a5750;
+  --text-muted:     #38342e;
-  --text-faint:     #9a9890;
+  --text-faint:     #706c64;
-  --text-disabled:  #c8c4bc;
+  --text-disabled:  #b0aca4;
 
-  --accent:        #4a724a;
+  --accent:        #2a5a2a;
-  --accent-dim:    #c8dcc8;
+  --accent-dim:    #b0ccb0;
-  --accent-muted:  #deeade;
+  --accent-muted:  #c8dcc8;
-  --accent-fg:     #2a5a2a;
+  --accent-fg:     #183818;
-  --accent-bright: #3a6a3a;
+  --accent-bright: #1e4e1e;
 
-  --color-error:    #a03030;
+  --color-error:    #8a1a1a;
-  --color-error-bg: #fce8e8;
+  --color-error-bg: #f8e0e0;
-  --color-success:  #2a6a2a;
+  --color-read:     #e0dcd4;
-  --color-info:     #2a4a7a;
-  --color-info-bg:  #e8eef8;
-  --color-read:     #e8e4dc;
 }

src/design/themes/original.css

@@ -0,0 +1,31 @@
+[data-theme="original"] {
+  --bg-void:      #080808;
+  --bg-base:      #0c0c0c;
+  --bg-surface:   #101010;
+  --bg-raised:    #151515;
+  --bg-overlay:   #1a1a1a;
+  --bg-subtle:    #202020;
+
+  --border-dim:    #1c1c1c;
+  --border-base:   #242424;
+  --border-strong: #2e2e2e;
+  --border-focus:  #4a5c4a;
+
+  --text-primary:   #f0efec;
+  --text-secondary: #c8c6c0;
+  --text-muted:     #8a8880;
+  --text-faint:     #4e4d4a;
+  --text-disabled:  #2a2a28;
+
+  --accent:        #6b8f6b;
+  --accent-dim:    #2a3d2a;
+  --accent-muted:  #1a251a;
+  --accent-fg:     #a8c4a8;
+  --accent-bright: #8fb88f;
+
+  --color-error:    #c47a7a;
+  --color-error-bg: #1f1212;
+  --color-success:  #7aab7a;
+  --color-info:     #7a9ec4;
+  --color-info-bg:  #121a1f;
+}

src/design/tokens/colors.css

@@ -32,4 +32,6 @@
 
   --dot-active:   var(--accent);
   --dot-inactive: var(--text-faint);
-}
+
+  --bg-image: none;
+}

src/features/settings/sections/AppearanceSettings.svelte

@@ -15,10 +15,9 @@
   let { selectOpen, closingSelect, toggleSelect, anims, onOpenThemeEditor }: Props = $props();
 
   const THEMES: { id: string; label: string; description: string; swatches: string[] }[] = [
-    { id: "dark",           label: "Dark",           description: "Default near-black",            swatches: ["#101010","#151515","#a8c4a8","#f0efec"] },
+    { id: "original",       label: "Original",       description: "Default near-black",            swatches: ["#101010","#151515","#a8c4a8","#f0efec"] },
-    { id: "high-contrast",  label: "High Contrast",  description: "Darker base, sharper text",     swatches: ["#080808","#111111","#bcd8bc","#ffffff"] },
+    { id: "dark",           label: "Dark",           description: "Darker base, sharper text",     swatches: ["#080808","#111111","#bcd8bc","#ffffff"] },
     { id: "light",          label: "Light",          description: "Warm off-white",                swatches: ["#f4f2ee","#faf8f4","#2a5a2a","#1a1916"] },
-    { id: "light-contrast", label: "Light Contrast", description: "Light with maximum contrast",   swatches: ["#ece8e2","#f5f2ec","#183818","#080806"] },
     { id: "midnight",       label: "Midnight",       description: "Deep blue-black tint",          swatches: ["#0c1020","#101428","#a8b4e8","#eeeef8"] },
     { id: "warm",           label: "Warm",           description: "Amber and sepia tones",         swatches: ["#16130c","#1c1810","#e0b860","#f5f0e0"] },
   ];
@@ -60,7 +59,7 @@
           <span class="s-sync-label">Dark theme</span>
           <div class="s-select">
             <button bind:this={triggerDark} class="s-select-btn" onclick={() => toggleSelect("sync-dark")}>
-              <span>{allThemeOptions.find(o => o.id === (store.settings.systemThemeDark ?? "dark"))?.label ?? "Dark"}</span>
+              <span>{allThemeOptions.find(o => o.id === (store.settings.systemThemeDark ?? "dark"))?.label ?? "Original"}</span>
               <svg class="s-select-caret" class:open={selectOpen === "sync-dark"} width="10" height="6" viewBox="0 0 10 6"><path d="M0 0l5 6 5-6" fill="currentColor"/></svg>
             </button>
             {#if selectOpen === "sync-dark" || closingSelect === "sync-dark"}

src/shared/chrome/Layout.svelte

@@ -43,6 +43,6 @@
 
 <style>
   .frame { display: flex; padding: 6px 15px 15px; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; }
-  .shell { display: flex; flex: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-dim); background: var(--bg-base); min-height: 0; min-width: 0; }
+  .shell { display: flex; flex: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-dim); background: var(--bg-base); background-image: var(--bg-image); min-height: 0; min-width: 0; }
   .main { flex: 1; overflow: hidden; background: var(--bg-surface); transform: translateZ(0); contain: layout style; min-width: 0; }
 </style>

src/store/state.svelte.ts

@@ -22,7 +22,7 @@ export type LibrarySortDir = "asc" | "desc";
 export type LibraryStatusFilter  = "ALL" | "ONGOING" | "COMPLETED" | "CANCELLED" | "HIATUS" | "UNKNOWN";
 export type LibraryContentFilter = "unread" | "started" | "downloaded" | "bookmarked" | "marked";
 
-export type BuiltinTheme = "dark" | "high-contrast" | "light" | "light-contrast" | "midnight" | "warm";
+export type BuiltinTheme = "original" | "dark" | "light" | "midnight" | "warm";
 export type Theme        = BuiltinTheme | string;
 
 export interface ThemeTokens {