From faec2f6d0010c269de03450c5cc11ee44bc374da Mon Sep 17 00:00:00 2001 From: intergrav Date: Sat, 26 Sep 2026 21:29:22 -0400 Subject: [PATCH] feat: adaptive dynamic colors --- src/lib/app/settings.svelte.ts | 1 + src/lib/app/theme.svelte.ts | 91 +++++++++++++++------ src/lib/languages/locales/ar.ts | 1 + src/lib/languages/locales/bn.ts | 1 + src/lib/languages/locales/cs.ts | 1 + src/lib/languages/locales/da.ts | 1 + src/lib/languages/locales/de.ts | 1 + src/lib/languages/locales/el.ts | 1 + src/lib/languages/locales/en.ts | 1 + src/lib/languages/locales/es.ts | 1 + src/lib/languages/locales/fi.ts | 1 + src/lib/languages/locales/fil.ts | 1 + src/lib/languages/locales/fr.ts | 1 + src/lib/languages/locales/he.ts | 1 + src/lib/languages/locales/hi.ts | 1 + src/lib/languages/locales/id.ts | 1 + src/lib/languages/locales/it.ts | 1 + src/lib/languages/locales/ja.ts | 1 + src/lib/languages/locales/ko.ts | 1 + src/lib/languages/locales/nl.ts | 1 + src/lib/languages/locales/no.ts | 1 + src/lib/languages/locales/pl.ts | 1 + src/lib/languages/locales/pt.ts | 1 + src/lib/languages/locales/ro.ts | 1 + src/lib/languages/locales/ru.ts | 1 + src/lib/languages/locales/sv.ts | 1 + src/lib/languages/locales/th.ts | 1 + src/lib/languages/locales/tr.ts | 1 + src/lib/languages/locales/uk.ts | 1 + src/lib/languages/locales/vi.ts | 1 + src/lib/languages/locales/zh-CN.ts | 1 + src/lib/languages/locales/zh-TW.ts | 1 + src/lib/modals/SettingsAppearanceTab.svelte | 8 ++ 33 files changed, 103 insertions(+), 27 deletions(-) diff --git a/src/lib/app/settings.svelte.ts b/src/lib/app/settings.svelte.ts index 71a5e6d..acef22f 100644 --- a/src/lib/app/settings.svelte.ts +++ b/src/lib/app/settings.svelte.ts @@ -151,6 +151,7 @@ const settingDefs = { validate: oneOf("auto", "light", "dark", "custom"), }, dynamicColors: { default: false }, + dynamicColorsAdaptive: { default: false }, dynamicHighlights: { default: false }, customColorScheme: { default: customColorSchemeDefaults, diff --git a/src/lib/app/theme.svelte.ts b/src/lib/app/theme.svelte.ts index d82b005..337e5d0 100644 --- a/src/lib/app/theme.svelte.ts +++ b/src/lib/app/theme.svelte.ts @@ -1,3 +1,4 @@ +import type { SwatchMap } from "colorthief"; import { MediaQuery } from "svelte/reactivity"; import { api } from "../api/client.svelte.js"; import { offlineImages } from "../offline/offlineManager.svelte.js"; @@ -5,10 +6,14 @@ import { player } from "../playback/player.svelte.js"; import { songArtId } from "../ui/artwork.svelte.js"; import { customColorSchemeFields, settings } from "./settings.svelte.js"; -const cache = new Map< - string, - { bg: string; text: string; dark: boolean; highlight: string } ->(); +type ThemeBg = { bg: string; text: string; dark: boolean }; +type ArtworkTheme = ThemeBg & { + highlight: string; + darkBg: ThemeBg | null; + lightBg: ThemeBg | null; +}; + +const cache = new Map(); let colorThiefPromise: Promise | null = null; const darkMQ = new MediaQuery("(prefers-color-scheme: dark)"); @@ -53,9 +58,12 @@ const clampBrightness = (css: string, min: number, max: number): string => { return `rgb(${clamp(r)}, ${clamp(g)}, ${clamp(b)})`; }; -const getHighlightColor = async (image: HTMLImageElement) => { +const getSwatchMap = async (image: HTMLImageElement) => { const { getSwatches } = await loadColorThief(); - const swatches = await getSwatches(image); + return getSwatches(image); +}; + +const pickHighlight = (swatches: SwatchMap): string | null => { const swatch = swatches.Vibrant ?? swatches.DarkVibrant ?? @@ -67,6 +75,30 @@ const getHighlightColor = async (image: HTMLImageElement) => { return swatch.color.css(); }; +const pickAdaptiveBg = (swatches: SwatchMap, dark: boolean): ThemeBg | null => { + const ordered = dark + ? [ + swatches.DarkMuted, + swatches.DarkVibrant, + swatches.Muted, + swatches.Vibrant, + swatches.LightMuted, + swatches.LightVibrant, + ] + : [ + swatches.LightMuted, + swatches.LightVibrant, + swatches.Muted, + swatches.Vibrant, + swatches.DarkMuted, + swatches.DarkVibrant, + ]; + const color = ordered.find((swatch) => swatch)?.color; + return color + ? { bg: color.css(), text: color.textColor, dark: color.isDark } + : null; +}; + const clearCustomProps = () => { const style = document.documentElement.style; for (const { variable } of customColorSchemeFields) @@ -108,13 +140,7 @@ const applyTheme = (bg: string, text: string, dark: boolean) => { updateMeta(bg); }; -const isDarkBackground = ( - colors: boolean, - theme: { - bg: string; - dark: boolean; - }, -): boolean => { +const isDarkBackground = (colors: boolean, theme: ThemeBg): boolean => { if (colors && theme.bg) return theme.dark; if (settings.colorScheme === "custom") { const [r, g, b] = parseHex(settings.customColorScheme.background); @@ -126,14 +152,21 @@ const isDarkBackground = ( ); }; +const resolveBackground = (theme: ArtworkTheme): ThemeBg => { + if (!settings.dynamicColorsAdaptive) return theme; + const variant = isDarkBackground(false, theme) ? theme.darkBg : theme.lightBg; + return variant ?? theme; +}; + const applyArtworkTheme = ( - theme: { bg: string; text: string; dark: boolean; highlight: string }, + theme: ArtworkTheme, colors: boolean, highlights: boolean, ) => { const style = document.documentElement.style; - if (colors && theme.bg) { - applyTheme(theme.bg, theme.text, theme.dark); + const bg = colors ? resolveBackground(theme) : null; + if (bg?.bg) { + applyTheme(bg.bg, bg.text, bg.dark); } else { applySelectedTheme(); } @@ -142,7 +175,7 @@ const applyArtworkTheme = ( if (key === "background" || key === "text") continue; style.removeProperty(variable); } - const dark = isDarkBackground(colors, theme); + const dark = bg?.bg ? bg.dark : isDarkBackground(false, theme); style.setProperty( "--accent", clampBrightness(theme.highlight, dark ? 0.5 : 0.2, dark ? 1 : 0.6), @@ -194,6 +227,7 @@ export const initTheme = () => { const dynamicColors = settings.dynamicColors; const dynamicHighlights = settings.dynamicHighlights; void settings.colorScheme; + void settings.dynamicColorsAdaptive; void darkMQ.current; for (const { key } of customColorSchemeFields) void settings.customColorScheme[key]; @@ -225,18 +259,21 @@ export const initTheme = () => { player.track?.id !== track.id ) return; - const [dominant, highlight] = await Promise.allSettled([ + const [dominant, swatches] = await Promise.allSettled([ getDominantColor(img), - getHighlightColor(img), + getSwatchMap(img), ]); - const theme = { - bg: dominant.status === "fulfilled" ? dominant.value.css() : "", - text: dominant.status === "fulfilled" ? dominant.value.textColor : "", - dark: dominant.status === "fulfilled" ? dominant.value.isDark : false, - highlight: - highlight.status === "fulfilled" && highlight.value - ? highlight.value - : "", + const swatchMap = + swatches.status === "fulfilled" ? swatches.value : null; + const dominantColor = + dominant.status === "fulfilled" ? dominant.value : null; + const theme: ArtworkTheme = { + bg: dominantColor?.css() ?? "", + text: dominantColor?.textColor ?? "", + dark: dominantColor?.isDark ?? false, + highlight: (swatchMap ? pickHighlight(swatchMap) : null) ?? "", + darkBg: swatchMap ? pickAdaptiveBg(swatchMap, true) : null, + lightBg: swatchMap ? pickAdaptiveBg(swatchMap, false) : null, }; cache.set(id, theme); if (player.track?.id === track.id) diff --git a/src/lib/languages/locales/ar.ts b/src/lib/languages/locales/ar.ts index 274ce2b..c57bf2e 100644 --- a/src/lib/languages/locales/ar.ts +++ b/src/lib/languages/locales/ar.ts @@ -225,6 +225,7 @@ const ar: BaseDict = { custom_accent_orange: "تمييز برتقالي", custom_accent_red: "تمييز أحمر", dynamic_colors: "ألوان ديناميكية", + dynamic_colors_adaptive: "التكيف مع الفاتح/الداكن", dynamic_highlights: "إبراز ديناميكي", cover_favicon: "أيقونة الغلاف", diff --git a/src/lib/languages/locales/bn.ts b/src/lib/languages/locales/bn.ts index a30a52d..0f1a91b 100644 --- a/src/lib/languages/locales/bn.ts +++ b/src/lib/languages/locales/bn.ts @@ -225,6 +225,7 @@ const bn: BaseDict = { custom_accent_orange: "অ্যাকসেন্ট কমলা", custom_accent_red: "অ্যাকসেন্ট লাল", dynamic_colors: "ডায়নামিক রং", + dynamic_colors_adaptive: "হালকা/গাঢ়ের সাথে মানিয়ে নিন", dynamic_highlights: "ডায়নামিক হাইলাইট", cover_favicon: "কভার ফেভিকন", diff --git a/src/lib/languages/locales/cs.ts b/src/lib/languages/locales/cs.ts index cb0734e..55bea1a 100644 --- a/src/lib/languages/locales/cs.ts +++ b/src/lib/languages/locales/cs.ts @@ -225,6 +225,7 @@ const cs: BaseDict = { custom_accent_orange: "Oranžový akcent", custom_accent_red: "Červený akcent", dynamic_colors: "Dynamické barvy", + dynamic_colors_adaptive: "Přizpůsobit světlému/tmavému", dynamic_highlights: "Dynamické zvýraznění", cover_favicon: "Favicon obalu", diff --git a/src/lib/languages/locales/da.ts b/src/lib/languages/locales/da.ts index 8f37951..21a0054 100644 --- a/src/lib/languages/locales/da.ts +++ b/src/lib/languages/locales/da.ts @@ -225,6 +225,7 @@ const da: BaseDict = { custom_accent_orange: "Orange accent", custom_accent_red: "Rød accent", dynamic_colors: "Dynamiske farver", + dynamic_colors_adaptive: "Tilpas til lys/mørk", dynamic_highlights: "Dynamiske fremhævninger", cover_favicon: "Cover-favicon", diff --git a/src/lib/languages/locales/de.ts b/src/lib/languages/locales/de.ts index 87363cc..7cc6f43 100644 --- a/src/lib/languages/locales/de.ts +++ b/src/lib/languages/locales/de.ts @@ -226,6 +226,7 @@ const de: BaseDict = { custom_accent_orange: "Oranger Akzent", custom_accent_red: "Roter Akzent", dynamic_colors: "Dynamische Farben", + dynamic_colors_adaptive: "An hell/dunkel anpassen", dynamic_highlights: "Dynamische Highlights", cover_favicon: "Cover-Favicon", diff --git a/src/lib/languages/locales/el.ts b/src/lib/languages/locales/el.ts index d85e06a..78f90a6 100644 --- a/src/lib/languages/locales/el.ts +++ b/src/lib/languages/locales/el.ts @@ -227,6 +227,7 @@ const el: BaseDict = { custom_accent_orange: "Πορτοκαλί έμφαση", custom_accent_red: "Κόκκινη έμφαση", dynamic_colors: "Δυναμικά χρώματα", + dynamic_colors_adaptive: "Προσαρμογή σε ανοιχτό/σκούρο", dynamic_highlights: "Δυναμικές επισημάνσεις", cover_favicon: "Favicon εξωφύλλου", diff --git a/src/lib/languages/locales/en.ts b/src/lib/languages/locales/en.ts index f4009d6..8097d16 100644 --- a/src/lib/languages/locales/en.ts +++ b/src/lib/languages/locales/en.ts @@ -210,6 +210,7 @@ const en = { downloaded_songs_not_transcoded: "Downloaded songs are not transcoded", downloads: "Downloads", dynamic_colors: "Dynamic Colors", + dynamic_colors_adaptive: "Adapt to light/dark", dynamic_highlights: "Dynamic Highlights", color_scheme: "Color Scheme", diff --git a/src/lib/languages/locales/es.ts b/src/lib/languages/locales/es.ts index 03f938f..78f29d3 100644 --- a/src/lib/languages/locales/es.ts +++ b/src/lib/languages/locales/es.ts @@ -226,6 +226,7 @@ const es: BaseDict = { custom_accent_orange: "Acento naranja", custom_accent_red: "Acento rojo", dynamic_colors: "Colores dinámicos", + dynamic_colors_adaptive: "Adaptar a claro/oscuro", dynamic_highlights: "Destacados dinámicos", cover_favicon: "Favicon de portada", diff --git a/src/lib/languages/locales/fi.ts b/src/lib/languages/locales/fi.ts index 4194bcd..e53299d 100644 --- a/src/lib/languages/locales/fi.ts +++ b/src/lib/languages/locales/fi.ts @@ -226,6 +226,7 @@ const fi: BaseDict = { custom_accent_orange: "Oranssi korostus", custom_accent_red: "Punainen korostus", dynamic_colors: "Dynaamiset värit", + dynamic_colors_adaptive: "Mukauta vaaleaan/tummaan", dynamic_highlights: "Dynaamiset korostukset", cover_favicon: "Favicon kansikuvasta", diff --git a/src/lib/languages/locales/fil.ts b/src/lib/languages/locales/fil.ts index fb848b5..2761194 100644 --- a/src/lib/languages/locales/fil.ts +++ b/src/lib/languages/locales/fil.ts @@ -226,6 +226,7 @@ const fil: BaseDict = { custom_accent_orange: "Accent Orange", custom_accent_red: "Accent Red", dynamic_colors: "Mga dynamic na kulay", + dynamic_colors_adaptive: "Umayon sa maliwanag/madilim", dynamic_highlights: "Mga dynamic na highlight", cover_favicon: "Favicon ng cover", diff --git a/src/lib/languages/locales/fr.ts b/src/lib/languages/locales/fr.ts index 2d31460..6067151 100644 --- a/src/lib/languages/locales/fr.ts +++ b/src/lib/languages/locales/fr.ts @@ -226,6 +226,7 @@ const fr: BaseDict = { custom_accent_orange: "Accent orange", custom_accent_red: "Accent rouge", dynamic_colors: "Couleurs dynamiques", + dynamic_colors_adaptive: "Adapter à clair/sombre", dynamic_highlights: "Surlignages dynamiques", cover_favicon: "Favicon de couverture", diff --git a/src/lib/languages/locales/he.ts b/src/lib/languages/locales/he.ts index b23d0a2..f5aab6c 100644 --- a/src/lib/languages/locales/he.ts +++ b/src/lib/languages/locales/he.ts @@ -225,6 +225,7 @@ const he: BaseDict = { custom_accent_orange: "הדגשה כתומה", custom_accent_red: "הדגשה אדומה", dynamic_colors: "צבעים דינמיים", + dynamic_colors_adaptive: "התאמה לבהיר/כהה", dynamic_highlights: "הדגשה דינמית", cover_favicon: "צלמית (פאביקון) של העטיפה", diff --git a/src/lib/languages/locales/hi.ts b/src/lib/languages/locales/hi.ts index 36ee2f0..e2eeacc 100644 --- a/src/lib/languages/locales/hi.ts +++ b/src/lib/languages/locales/hi.ts @@ -224,6 +224,7 @@ const hi: BaseDict = { custom_accent_orange: "एक्सेंट नारंगी", custom_accent_red: "एक्सेंट लाल", dynamic_colors: "गतिशील रंग", + dynamic_colors_adaptive: "हल्का/गहरा के अनुसार ढालें", dynamic_highlights: "डायनामिक हाइलाइट्स", cover_favicon: "कवर फेविकॉन", diff --git a/src/lib/languages/locales/id.ts b/src/lib/languages/locales/id.ts index 0a9e0ca..7564695 100644 --- a/src/lib/languages/locales/id.ts +++ b/src/lib/languages/locales/id.ts @@ -225,6 +225,7 @@ const id: BaseDict = { custom_accent_orange: "Aksen oranye", custom_accent_red: "Aksen merah", dynamic_colors: "Warna dinamis", + dynamic_colors_adaptive: "Sesuaikan dengan terang/gelap", dynamic_highlights: "Sorotan dinamis", cover_favicon: "Favicon sampul", diff --git a/src/lib/languages/locales/it.ts b/src/lib/languages/locales/it.ts index a101046..08f027f 100644 --- a/src/lib/languages/locales/it.ts +++ b/src/lib/languages/locales/it.ts @@ -226,6 +226,7 @@ const it: BaseDict = { custom_accent_orange: "Accento arancione", custom_accent_red: "Accento rosso", dynamic_colors: "Colori dinamici", + dynamic_colors_adaptive: "Adatta a chiaro/scuro", dynamic_highlights: "Evidenziazioni dinamiche", cover_favicon: "Favicon della copertina", diff --git a/src/lib/languages/locales/ja.ts b/src/lib/languages/locales/ja.ts index 5c46ef5..2b1e0c6 100644 --- a/src/lib/languages/locales/ja.ts +++ b/src/lib/languages/locales/ja.ts @@ -226,6 +226,7 @@ const ja: BaseDict = { custom_accent_orange: "オレンジのアクセント", custom_accent_red: "赤のアクセント", dynamic_colors: "ダイナミックカラー", + dynamic_colors_adaptive: "ライト/ダークに合わせる", dynamic_highlights: "ダイナミックハイライト", cover_favicon: "カバーファビコン", diff --git a/src/lib/languages/locales/ko.ts b/src/lib/languages/locales/ko.ts index 3938ea0..76b7e08 100644 --- a/src/lib/languages/locales/ko.ts +++ b/src/lib/languages/locales/ko.ts @@ -224,6 +224,7 @@ const ko: BaseDict = { custom_accent_orange: "주황색 강조", custom_accent_red: "빨간색 강조", dynamic_colors: "다이내믹 컬러", + dynamic_colors_adaptive: "라이트/다크에 맞춤", dynamic_highlights: "다이내믹 하이라이트", cover_favicon: "커버 파비콘", diff --git a/src/lib/languages/locales/nl.ts b/src/lib/languages/locales/nl.ts index fc3012d..f2dbc87 100644 --- a/src/lib/languages/locales/nl.ts +++ b/src/lib/languages/locales/nl.ts @@ -227,6 +227,7 @@ const nl: BaseDict = { custom_accent_orange: "Oranje accent", custom_accent_red: "Rood accent", dynamic_colors: "Dynamische kleuren", + dynamic_colors_adaptive: "Aanpassen aan licht/donker", dynamic_highlights: "Dynamische markeringen", cover_favicon: "Cover-favicon", diff --git a/src/lib/languages/locales/no.ts b/src/lib/languages/locales/no.ts index 81b0d05..0f6a11e 100644 --- a/src/lib/languages/locales/no.ts +++ b/src/lib/languages/locales/no.ts @@ -225,6 +225,7 @@ const no: BaseDict = { custom_accent_orange: "Oransje aksent", custom_accent_red: "Rød aksent", dynamic_colors: "Dynamiske farger", + dynamic_colors_adaptive: "Tilpass til lys/mørk", dynamic_highlights: "Dynamiske uthevinger", cover_favicon: "Cover-favicon", diff --git a/src/lib/languages/locales/pl.ts b/src/lib/languages/locales/pl.ts index 44aa6d6..e9c8474 100644 --- a/src/lib/languages/locales/pl.ts +++ b/src/lib/languages/locales/pl.ts @@ -225,6 +225,7 @@ const pl: BaseDict = { custom_accent_orange: "Pomarańczowy akcent", custom_accent_red: "Czerwony akcent", dynamic_colors: "Dynamiczne kolory", + dynamic_colors_adaptive: "Dostosuj do jasnego/ciemnego", dynamic_highlights: "Dynamiczne wyróżnienia", cover_favicon: "Favicon okładki", diff --git a/src/lib/languages/locales/pt.ts b/src/lib/languages/locales/pt.ts index 5384034..52ae5d6 100644 --- a/src/lib/languages/locales/pt.ts +++ b/src/lib/languages/locales/pt.ts @@ -226,6 +226,7 @@ const pt: BaseDict = { custom_accent_orange: "Destaque laranja", custom_accent_red: "Destaque vermelho", dynamic_colors: "Cores dinâmicas", + dynamic_colors_adaptive: "Adaptar a claro/escuro", dynamic_highlights: "Destaques dinâmicos", cover_favicon: "Favicon da capa", diff --git a/src/lib/languages/locales/ro.ts b/src/lib/languages/locales/ro.ts index e6b79a2..42910f2 100644 --- a/src/lib/languages/locales/ro.ts +++ b/src/lib/languages/locales/ro.ts @@ -225,6 +225,7 @@ const ro: BaseDict = { custom_accent_orange: "Accent portocaliu", custom_accent_red: "Accent roșu", dynamic_colors: "Culori dinamice", + dynamic_colors_adaptive: "Adaptare la deschis/închis", dynamic_highlights: "Evidențieri dinamice", cover_favicon: "Favicon copertă", diff --git a/src/lib/languages/locales/ru.ts b/src/lib/languages/locales/ru.ts index e8b6b5b..7ae95ea 100644 --- a/src/lib/languages/locales/ru.ts +++ b/src/lib/languages/locales/ru.ts @@ -225,6 +225,7 @@ const ru: BaseDict = { custom_accent_orange: "Оранжевый акцент", custom_accent_red: "Красный акцент", dynamic_colors: "Динамические цвета", + dynamic_colors_adaptive: "Адаптация к светлой/тёмной", dynamic_highlights: "Динамические акценты", cover_favicon: "Фавикон обложки", diff --git a/src/lib/languages/locales/sv.ts b/src/lib/languages/locales/sv.ts index ad3b0b8..7e07744 100644 --- a/src/lib/languages/locales/sv.ts +++ b/src/lib/languages/locales/sv.ts @@ -225,6 +225,7 @@ const sv: BaseDict = { custom_accent_orange: "Orange accent", custom_accent_red: "Röd accent", dynamic_colors: "Dynamiska färger", + dynamic_colors_adaptive: "Anpassa till ljust/mörkt", dynamic_highlights: "Dynamiska markeringar", cover_favicon: "Omslagsfavicon", diff --git a/src/lib/languages/locales/th.ts b/src/lib/languages/locales/th.ts index 4adf328..0564f01 100644 --- a/src/lib/languages/locales/th.ts +++ b/src/lib/languages/locales/th.ts @@ -224,6 +224,7 @@ const th: BaseDict = { custom_accent_orange: "สีเน้นสีส้ม", custom_accent_red: "สีเน้นสีแดง", dynamic_colors: "สีไดนามิก", + dynamic_colors_adaptive: "ปรับตามสว่าง/มืด", dynamic_highlights: "ไฮไลต์แบบไดนามิก", cover_favicon: "Favicon หน้าปก", diff --git a/src/lib/languages/locales/tr.ts b/src/lib/languages/locales/tr.ts index 443420d..3f8ce65 100644 --- a/src/lib/languages/locales/tr.ts +++ b/src/lib/languages/locales/tr.ts @@ -225,6 +225,7 @@ const tr: BaseDict = { custom_accent_orange: "Turuncu vurgu", custom_accent_red: "Kırmızı vurgu", dynamic_colors: "Dinamik renkler", + dynamic_colors_adaptive: "Açık/koyu temaya uyarla", dynamic_highlights: "Dinamik vurgular", cover_favicon: "Kapak favicon'u", diff --git a/src/lib/languages/locales/uk.ts b/src/lib/languages/locales/uk.ts index 2b56328..48e78ec 100644 --- a/src/lib/languages/locales/uk.ts +++ b/src/lib/languages/locales/uk.ts @@ -225,6 +225,7 @@ const uk: BaseDict = { custom_accent_orange: "Помаранчевий акцент", custom_accent_red: "Червоний акцент", dynamic_colors: "Динамічні кольори", + dynamic_colors_adaptive: "Адаптація до світлої/темної", dynamic_highlights: "Динамічні акценти", cover_favicon: "Favicon обкладинки", diff --git a/src/lib/languages/locales/vi.ts b/src/lib/languages/locales/vi.ts index 5ca8fd1..ab9d70f 100644 --- a/src/lib/languages/locales/vi.ts +++ b/src/lib/languages/locales/vi.ts @@ -226,6 +226,7 @@ const vi: BaseDict = { custom_accent_orange: "Màu nhấn cam", custom_accent_red: "Màu nhấn đỏ", dynamic_colors: "Màu sắc động", + dynamic_colors_adaptive: "Thích ứng sáng/tối", dynamic_highlights: "Điểm nhấn động", cover_favicon: "Favicon ảnh bìa", diff --git a/src/lib/languages/locales/zh-CN.ts b/src/lib/languages/locales/zh-CN.ts index 7913dff..7b71775 100644 --- a/src/lib/languages/locales/zh-CN.ts +++ b/src/lib/languages/locales/zh-CN.ts @@ -219,6 +219,7 @@ const zhCN: BaseDict = { custom_accent_orange: "橙色强调色", custom_accent_red: "红色强调色", dynamic_colors: "动态颜色", + dynamic_colors_adaptive: "适配浅色/深色", dynamic_highlights: "动态高亮", cover_favicon: "封面图标", diff --git a/src/lib/languages/locales/zh-TW.ts b/src/lib/languages/locales/zh-TW.ts index 20cfee8..ec80599 100644 --- a/src/lib/languages/locales/zh-TW.ts +++ b/src/lib/languages/locales/zh-TW.ts @@ -219,6 +219,7 @@ const zhTW: BaseDict = { custom_accent_orange: "橙色強調色", custom_accent_red: "紅色強調色", dynamic_colors: "動態顏色", + dynamic_colors_adaptive: "適配淺色/深色", dynamic_highlights: "動態高亮", cover_favicon: "封面圖示", diff --git a/src/lib/modals/SettingsAppearanceTab.svelte b/src/lib/modals/SettingsAppearanceTab.svelte index b89bfcf..91a8f05 100644 --- a/src/lib/modals/SettingsAppearanceTab.svelte +++ b/src/lib/modals/SettingsAppearanceTab.svelte @@ -129,6 +129,14 @@ $effect(() => { {t("settings.dynamic_colors")} +{#if settings.dynamicColors} +
+
+ {t("settings.dynamic_colors_adaptive")} + +
+
+{/if}
{t("settings.dynamic_highlights")} -- 2.51.2