feat: support dark mode

locales/en.json

@@ -20,6 +20,9 @@
   "settings.backgroundColor": "Background color",
   "settings.backgroundColor.white": "White",
   "settings.backgroundColor.black": "Black",
+  "settings.colorMode": "Color mode",
+  "settings.colorMode.light": "Light",
+  "settings.colorMode.dark": "Dark",
   "settings.interval": "Auto play interval",
   "settings.interval.unit": "s",
   "settings.direction.rtl": "Right to left",
@@ -39,4 +42,4 @@
   "seek.previewAlt": "Preview of page {{page}}",
   "loading": "Loading",
   "error.pageRequestFailed": "Request failed for page {{page}}"
-}
+}

locales/id.json

@@ -20,6 +20,9 @@
   "settings.backgroundColor": "Warna latar",
   "settings.backgroundColor.white": "Putih",
   "settings.backgroundColor.black": "Hitam",
+  "settings.colorMode": "Mode warna",
+  "settings.colorMode.light": "Terang",
+  "settings.colorMode.dark": "Gelap",
   "settings.interval": "Interval putar otomatis",
   "settings.interval.unit": "dtk",
   "settings.direction.rtl": "Kanan",
@@ -39,4 +42,4 @@
   "seek.previewAlt": "Pratinjau halaman {{page}}",
   "loading": "Memuat",
   "error.pageRequestFailed": "Permintaan halaman {{page}} gagal"
-}
+}

locales/ja.json

@@ -20,6 +20,9 @@
   "settings.backgroundColor": "背景色",
   "settings.backgroundColor.white": "白",
   "settings.backgroundColor.black": "黒",
+  "settings.colorMode": "カラーモード",
+  "settings.colorMode.light": "ライト",
+  "settings.colorMode.dark": "ダーク",
   "settings.interval": "自動再生の秒数",
   "settings.interval.unit": "秒",
   "settings.direction.rtl": "右",
@@ -39,4 +42,4 @@
   "seek.previewAlt": "{{page}}ページのプレビュー",
   "loading": "読み込み中",
   "error.pageRequestFailed": "{{page}}ページのリクエストに失敗しました"
-}
+}

locales/ko.json

@@ -20,6 +20,9 @@
   "settings.backgroundColor": "배경색",
   "settings.backgroundColor.white": "흰색",
   "settings.backgroundColor.black": "검정",
+  "settings.colorMode": "컬러 모드",
+  "settings.colorMode.light": "라이트",
+  "settings.colorMode.dark": "다크",
   "settings.interval": "자동 재생 간격",
   "settings.interval.unit": "초",
   "settings.direction.rtl": "오른쪽",
@@ -39,4 +42,4 @@
   "seek.previewAlt": "{{page}}페이지 미리보기",
   "loading": "로딩 중",
   "error.pageRequestFailed": "{{page}}페이지 요청 실패"
-}
+}

locales/th.json

@@ -20,6 +20,9 @@
   "settings.backgroundColor": "สีพื้นหลัง",
   "settings.backgroundColor.white": "ขาว",
   "settings.backgroundColor.black": "ดำ",
+  "settings.colorMode": "โหมดสี",
+  "settings.colorMode.light": "สว่าง",
+  "settings.colorMode.dark": "มืด",
   "settings.interval": "ระยะเวลาเล่นอัตโนมัติ",
   "settings.interval.unit": "วินาที",
   "settings.direction.rtl": "ขวา",
@@ -39,4 +42,4 @@
   "seek.previewAlt": "ตัวอย่างหน้า {{page}}",
   "loading": "กำลังโหลด",
   "error.pageRequestFailed": "ขอหน้า {{page}} ไม่สำเร็จ"
-}
+}

locales/zh-CN.json

@@ -20,6 +20,9 @@
   "settings.backgroundColor": "背景颜色",
   "settings.backgroundColor.white": "白色",
   "settings.backgroundColor.black": "黑色",
+  "settings.colorMode": "颜色模式",
+  "settings.colorMode.light": "浅色",
+  "settings.colorMode.dark": "深色",
   "settings.interval": "自动播放间隔",
   "settings.interval.unit": "秒",
   "settings.direction.rtl": "向右",
@@ -39,4 +42,4 @@
   "seek.previewAlt": "第 {{page}} 页预览",
   "loading": "加载中",
   "error.pageRequestFailed": "第 {{page}} 页请求失败"
-}
+}

src/components/arrow-buttons.styles.ts

@@ -94,7 +94,7 @@ export const arrowButtonsStyles = `
   left: 50%;
   width: 20px;
   height: 20px;
-  color: #666;
+  color: var(--comimi-muted);
   transform: translate(-50%, -50%);
   pointer-events: none;
 }

src/components/center-message.styles.ts

@@ -18,10 +18,10 @@ export const centerMessageStyles = `
   box-sizing: border-box;
   padding: 6px 12px;
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.5);
+  background: var(--comimi-overlay);
   box-shadow: var(--comimi-shadow);
   backdrop-filter: blur(5px);
-  color: #666;
+  color: var(--comimi-muted);
   font-size: 12px;
   font-weight: 400;
   line-height: 1.45;

src/components/controls-dock.styles.ts

@@ -97,13 +97,13 @@ export const controlsDockStyles = `
 }
 
 .comimi-seek-current {
-  color: #333;
+  color: var(--comimi-fg);
   font-size: 12px;
   font-weight: 700;
 }
 
 .comimi-seek-total {
-  color: #999;
+  color: var(--comimi-soft);
   font-size: 12px;
   font-weight: 400;
   margin-left: 0.4em;
@@ -122,7 +122,7 @@ export const controlsDockStyles = `
   right: 0;
   height: 8px;
   border-radius: 999px;
-  background: #e0e0e0;
+  background: var(--comimi-line);
   overflow: hidden;
   transform: translateY(-50%);
   transition: height 0.36s var(--comimi-spring);
@@ -139,7 +139,7 @@ export const controlsDockStyles = `
   top: 0;
   height: 100%;
   border-radius: 999px;
-  background: #666;
+  background: var(--comimi-accent);
 }
 
 .comimi-seek-bar[data-direction="rtl"] .comimi-seek-fill {
@@ -183,7 +183,7 @@ export const controlsDockStyles = `
   margin-top: -5px;
   border: 0;
   border-radius: 50%;
-  background: #666;
+  background: var(--comimi-accent);
   box-shadow: none;
   transition:
     transform 0.36s var(--comimi-spring),
@@ -205,7 +205,7 @@ export const controlsDockStyles = `
   height: 18px;
   border: 0;
   border-radius: 50%;
-  background: #666;
+  background: var(--comimi-accent);
   box-shadow: none;
   transition:
     transform 0.36s var(--comimi-spring),
@@ -264,7 +264,7 @@ export const controlsDockStyles = `
   position: relative;
   width: 80px;
   aspect-ratio: 100 / 141;
-  background: #fff;
+  background: var(--comimi-page-surface);
   border-radius: 6px;
   overflow: hidden;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
@@ -285,16 +285,16 @@ export const controlsDockStyles = `
   justify-content: center;
   box-sizing: border-box;
   padding: 8px;
-  color: #aaa;
+  color: var(--comimi-icon-subtle);
   font-size: 11px;
   font-weight: 700;
   line-height: 1.4;
   text-align: center;
 }
 
 .comimi-seek-preview-label {
-  color: #333;
-  background: rgba(255, 255, 255, 0.5);
+  color: var(--comimi-fg);
+  background: var(--comimi-overlay);
   backdrop-filter: blur(5px);
   box-shadow: var(--comimi-shadow);
   border-radius: 8px;
@@ -327,7 +327,7 @@ export const controlsDockStyles = `
   padding: 0;
   border: 0;
   background: transparent;
-  color: #666;
+  color: var(--comimi-muted);
   cursor: pointer;
 }
 
@@ -375,7 +375,7 @@ export const controlsDockStyles = `
   width: 140px;
   height: 6px;
   border-radius: 999px;
-  background: #e0e0e0;
+  background: var(--comimi-line);
   overflow: hidden;
 }
 
@@ -384,7 +384,7 @@ export const controlsDockStyles = `
   position: absolute;
   inset: 0;
   border-radius: 999px;
-  background: #666;
+  background: var(--comimi-accent);
   animation: comimi-autoplay-progress 3s linear 0s infinite;
 }
 
@@ -404,7 +404,7 @@ export const controlsDockStyles = `
   height: 30px;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  background: #eeeeee;
+  background: var(--comimi-surface-2);
   border-radius: 8px;
   transform: translate(-50%, -50%);
   transition: width 0.36s var(--comimi-spring);
@@ -425,7 +425,7 @@ export const controlsDockStyles = `
   padding: 0;
   border: 0;
   background: transparent;
-  color: #666;
+  color: var(--comimi-muted);
   cursor: pointer;
 }
 
@@ -466,7 +466,7 @@ export const controlsDockStyles = `
   display: block;
   width: 100%;
   height: 100%;
-  color: #666;
+  color: var(--comimi-muted);
   transition: transform 0.36s var(--comimi-spring);
 }
 
@@ -506,7 +506,7 @@ export const controlsDockStyles = `
   z-index: 50;
   pointer-events: none;
   overflow: hidden;
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--comimi-dim);
   opacity: 0;
   transition: opacity 0.16s linear;
 }
@@ -519,7 +519,7 @@ export const controlsDockStyles = `
   display: block;
   position: absolute;
   inset: 0;
-  background: #666;
+  background: var(--comimi-accent);
   animation: comimi-autoplay-progress 3s linear 0s infinite;
 }
 

src/components/icons.styles.ts

@@ -32,7 +32,7 @@ export const iconStyles = `
   width: 17px;
   height: 3px;
   border-radius: 999px;
-  background: #666;
+  background: var(--comimi-muted);
 }
 
 .comimi-menu-svg span:nth-child(1) {