diff --git a/src/app/(dashboard)/dashboard/settings/components/AppearanceTab.tsx b/src/app/(dashboard)/dashboard/settings/components/AppearanceTab.tsx index ea5aab233f..abe5a83204 100644 --- a/src/app/(dashboard)/dashboard/settings/components/AppearanceTab.tsx +++ b/src/app/(dashboard)/dashboard/settings/components/AppearanceTab.tsx @@ -3,7 +3,7 @@ import { useState, useEffect } from "react"; import { Button, Card, Toggle } from "@/shared/components"; import { useTheme } from "@/shared/hooks/useTheme"; -import useThemeStore from "@/store/themeStore"; +import useThemeStore, { COLOR_THEMES } from "@/store/themeStore"; import { cn } from "@/shared/utils/cn"; import { useTranslations } from "next-intl"; @@ -14,6 +14,17 @@ export default function AppearanceTab() { const [settings, setSettings] = useState>({}); const [loading, setLoading] = useState(true); const [customThemeColor, setCustomThemeColor] = useState(customColor || "#3b82f6"); + const isValidHex = /^#([0-9a-fA-F]{6})$/.test(customThemeColor.startsWith("#") ? customThemeColor : `#${customThemeColor}`); + + // Subscribe to store changes (e.g. from another tab) via Zustand external subscription + useEffect(() => { + const unsubscribe = useThemeStore.subscribe((state) => { + if (state.customColor && state.customColor !== customThemeColor) { + setCustomThemeColor(state.customColor); + } + }); + return unsubscribe; + }, []); // eslint-disable-line react-hooks/exhaustive-deps const themeOptionLabels: Record = { light: t("themeLight"), dark: t("themeDark"), @@ -51,12 +62,13 @@ export default function AppearanceTab() { }; const presetThemes = [ - { id: "blue", color: "#3b82f6", label: t("themeBlue") }, - { id: "red", color: "#ef4444", label: t("themeRed") }, - { id: "green", color: "#22c55e", label: t("themeGreen") }, - { id: "violet", color: "#8b5cf6", label: t("themeViolet") }, - { id: "orange", color: "#f97316", label: t("themeOrange") }, - { id: "cyan", color: "#06b6d4", label: t("themeCyan") }, + { id: "coral", color: COLOR_THEMES.coral, label: t("themeCoral") }, + { id: "blue", color: COLOR_THEMES.blue, label: t("themeBlue") }, + { id: "red", color: COLOR_THEMES.red, label: t("themeRed") }, + { id: "green", color: COLOR_THEMES.green, label: t("themeGreen") }, + { id: "violet", color: COLOR_THEMES.violet, label: t("themeViolet") }, + { id: "orange", color: COLOR_THEMES.orange, label: t("themeOrange") }, + { id: "cyan", color: COLOR_THEMES.cyan, label: t("themeCyan") }, ]; return ( @@ -149,9 +161,10 @@ export default function AppearanceTab() { value={customThemeColor} onChange={(e) => setCustomThemeColor(e.target.value)} placeholder="#3b82f6" - className="flex-1 h-10 px-3 rounded-lg bg-surface border border-border text-sm text-text-main focus:outline-none focus:border-primary" + maxLength={7} + className={`flex-1 h-10 px-3 rounded-lg bg-surface border text-sm text-text-main focus:outline-none ${isValidHex ? "border-border focus:border-primary" : "border-red-400 focus:border-red-500"}`} /> - + diff --git a/src/app/globals.css b/src/app/globals.css index b3c9a238f6..582a4465ae 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -141,8 +141,9 @@ body { -moz-osx-font-smoothing: grayscale; } -/* Selection */ +/* Selection — with fallback for browsers that don't support color-mix() */ ::selection { + background-color: rgba(229, 77, 94, 0.22); background-color: color-mix(in srgb, var(--color-primary) 22%, transparent); color: var(--color-primary); } diff --git a/src/i18n/messages/ar.json b/src/i18n/messages/ar.json index ee341efc8b..f64603737f 100644 --- a/src/i18n/messages/ar.json +++ b/src/i18n/messages/ar.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "اختر لونًا جاهزًا أو أنشئ سمتك الخاصة بلون واحد", "themeCreate": "إنشاء سمة", "themeCustom": "سمة مخصصة", + "themeCoral": "مرجاني", "themeBlue": "أزرق", "themeRed": "أحمر", "themeGreen": "أخضر", diff --git a/src/i18n/messages/bg.json b/src/i18n/messages/bg.json index 3965a12ca0..cbc02c87ae 100644 --- a/src/i18n/messages/bg.json +++ b/src/i18n/messages/bg.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Изберете готов цвят или създайте своя тема с един цвят", "themeCreate": "Създай тема", "themeCustom": "Персонална тема", + "themeCoral": "Коралов", "themeBlue": "Син", "themeRed": "Червен", "themeGreen": "Зелен", diff --git a/src/i18n/messages/da.json b/src/i18n/messages/da.json index f916e38a84..98474e4f1d 100644 --- a/src/i18n/messages/da.json +++ b/src/i18n/messages/da.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Vælg en forudindstillet farve eller opret dit eget tema med én farve", "themeCreate": "Opret tema", "themeCustom": "Brugerdefineret tema", + "themeCoral": "Koral", "themeBlue": "Blå", "themeRed": "Rød", "themeGreen": "Grøn", diff --git a/src/i18n/messages/de.json b/src/i18n/messages/de.json index 8f319bd455..6c2810ac67 100644 --- a/src/i18n/messages/de.json +++ b/src/i18n/messages/de.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Wähle eine voreingestellte Farbe oder erstelle dein eigenes Thema mit einer Farbe", "themeCreate": "Thema erstellen", "themeCustom": "Benutzerdefiniertes Thema", + "themeCoral": "Koralle", "themeBlue": "Blau", "themeRed": "Rot", "themeGreen": "Grün", diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index 205f21a614..ce0955c2f0 100644 --- a/src/i18n/messages/en.json +++ b/src/i18n/messages/en.json @@ -94,6 +94,7 @@ "presetColors": "Popular colors", "createTheme": "Create theme", "chooseColor": "Pick one color", + "themeCoral": "Coral", "themeBlue": "Blue", "themeRed": "Red", "themeGreen": "Green", diff --git a/src/i18n/messages/es.json b/src/i18n/messages/es.json index 8ffa82e546..4fd06b196c 100644 --- a/src/i18n/messages/es.json +++ b/src/i18n/messages/es.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Elige un color predefinido o crea tu propio tema con un solo color", "themeCreate": "Crear tema", "themeCustom": "Tema personalizado", + "themeCoral": "Coral", "themeBlue": "Azul", "themeRed": "Rojo", "themeGreen": "Verde", diff --git a/src/i18n/messages/fi.json b/src/i18n/messages/fi.json index 5ef8c77929..072b43f0ad 100644 --- a/src/i18n/messages/fi.json +++ b/src/i18n/messages/fi.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Valitse valmis väri tai luo oma teemasi yhdellä värillä", "themeCreate": "Luo teema", "themeCustom": "Mukautettu teema", + "themeCoral": "Koralli", "themeBlue": "Sininen", "themeRed": "Punainen", "themeGreen": "Vihreä", diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json index 9cc9b6f580..ae29ee6efa 100644 --- a/src/i18n/messages/fr.json +++ b/src/i18n/messages/fr.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Choisissez une couleur prédéfinie ou créez votre propre thème avec une seule couleur", "themeCreate": "Créer un thème", "themeCustom": "Thème personnalisé", + "themeCoral": "Corail", "themeBlue": "Bleu", "themeRed": "Rouge", "themeGreen": "Vert", diff --git a/src/i18n/messages/he.json b/src/i18n/messages/he.json index 90f40efe12..f89cf3d15e 100644 --- a/src/i18n/messages/he.json +++ b/src/i18n/messages/he.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "בחר צבע מוכן מראש או צור ערכת נושא משלך עם צבע אחד", "themeCreate": "צור ערכת נושא", "themeCustom": "ערכת נושא מותאמת אישית", + "themeCoral": "אלמוג", "themeBlue": "כחול", "themeRed": "אדום", "themeGreen": "ירוק", diff --git a/src/i18n/messages/hu.json b/src/i18n/messages/hu.json index cea4793704..0c9c905395 100644 --- a/src/i18n/messages/hu.json +++ b/src/i18n/messages/hu.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Válassz előre beállított színt, vagy készíts saját témát egy színből", "themeCreate": "Téma létrehozása", "themeCustom": "Egyéni téma", + "themeCoral": "Korall", "themeBlue": "Kék", "themeRed": "Piros", "themeGreen": "Zöld", diff --git a/src/i18n/messages/id.json b/src/i18n/messages/id.json index 4579b257a9..4d516a36f9 100644 --- a/src/i18n/messages/id.json +++ b/src/i18n/messages/id.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Pilih warna preset atau buat tema Anda sendiri dengan satu warna", "themeCreate": "Buat tema", "themeCustom": "Tema kustom", + "themeCoral": "Koral", "themeBlue": "Biru", "themeRed": "Merah", "themeGreen": "Hijau", diff --git a/src/i18n/messages/in.json b/src/i18n/messages/in.json index 792e84d020..a28aa4e542 100644 --- a/src/i18n/messages/in.json +++ b/src/i18n/messages/in.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "एक प्रीसेट रंग चुनें या एक ही रंग से अपनी थीम बनाएं", "themeCreate": "थीम बनाएं", "themeCustom": "कस्टम थीम", + "themeCoral": "Koral", "themeBlue": "नीला", "themeRed": "लाल", "themeGreen": "हरा", diff --git a/src/i18n/messages/it.json b/src/i18n/messages/it.json index 3c0835375d..aabb8f13ec 100644 --- a/src/i18n/messages/it.json +++ b/src/i18n/messages/it.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Scegli un colore predefinito o crea il tuo tema con un solo colore", "themeCreate": "Crea tema", "themeCustom": "Tema personalizzato", + "themeCoral": "Corallo", "themeBlue": "Blu", "themeRed": "Rosso", "themeGreen": "Verde", diff --git a/src/i18n/messages/ja.json b/src/i18n/messages/ja.json index 0fbabc1a2f..a98d1d5620 100644 --- a/src/i18n/messages/ja.json +++ b/src/i18n/messages/ja.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "プリセットカラーを選ぶか、1色で独自のテーマを作成します", "themeCreate": "テーマを作成", "themeCustom": "カスタムテーマ", + "themeCoral": "コーラル", "themeBlue": "青", "themeRed": "赤", "themeGreen": "緑", diff --git a/src/i18n/messages/ko.json b/src/i18n/messages/ko.json index 094ea6970b..a87875b62c 100644 --- a/src/i18n/messages/ko.json +++ b/src/i18n/messages/ko.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "미리 설정된 색상을 선택하거나 단일 색상으로 나만의 테마를 만드세요", "themeCreate": "테마 만들기", "themeCustom": "사용자 지정 테마", + "themeCoral": "코랄", "themeBlue": "파랑", "themeRed": "빨강", "themeGreen": "초록", diff --git a/src/i18n/messages/ms.json b/src/i18n/messages/ms.json index 785f494a3d..ea99c0e6a1 100644 --- a/src/i18n/messages/ms.json +++ b/src/i18n/messages/ms.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Pilih warna pratetap atau cipta tema anda sendiri dengan satu warna", "themeCreate": "Cipta tema", "themeCustom": "Tema tersuai", + "themeCoral": "Koral", "themeBlue": "Biru", "themeRed": "Merah", "themeGreen": "Hijau", diff --git a/src/i18n/messages/nl.json b/src/i18n/messages/nl.json index b37b0eaf57..e3a1336111 100644 --- a/src/i18n/messages/nl.json +++ b/src/i18n/messages/nl.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Kies een vooraf ingestelde kleur of maak je eigen thema met één kleur", "themeCreate": "Thema maken", "themeCustom": "Aangepast thema", + "themeCoral": "Koraal", "themeBlue": "Blauw", "themeRed": "Rood", "themeGreen": "Groen", diff --git a/src/i18n/messages/no.json b/src/i18n/messages/no.json index 619bffab11..44e6674b7f 100644 --- a/src/i18n/messages/no.json +++ b/src/i18n/messages/no.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Velg en forhåndsinnstilt farge eller lag ditt eget tema med én farge", "themeCreate": "Opprett tema", "themeCustom": "Egendefinert tema", + "themeCoral": "Korall", "themeBlue": "Blå", "themeRed": "Rød", "themeGreen": "Grønn", diff --git a/src/i18n/messages/phi.json b/src/i18n/messages/phi.json index b3f0e859c3..1bd1976473 100644 --- a/src/i18n/messages/phi.json +++ b/src/i18n/messages/phi.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Pumili ng preset na kulay o gumawa ng sarili mong tema gamit ang isang kulay", "themeCreate": "Gumawa ng tema", "themeCustom": "Custom na tema", + "themeCoral": "Koral", "themeBlue": "Asul", "themeRed": "Pula", "themeGreen": "Berde", diff --git a/src/i18n/messages/pl.json b/src/i18n/messages/pl.json index 9d7149d763..f3928fb524 100644 --- a/src/i18n/messages/pl.json +++ b/src/i18n/messages/pl.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Wybierz gotowy kolor lub utwórz własny motyw z jednego koloru", "themeCreate": "Utwórz motyw", "themeCustom": "Motyw niestandardowy", + "themeCoral": "Koralowy", "themeBlue": "Niebieski", "themeRed": "Czerwony", "themeGreen": "Zielony", diff --git a/src/i18n/messages/pt-BR.json b/src/i18n/messages/pt-BR.json index ae6bb752df..78d3d9ac34 100644 --- a/src/i18n/messages/pt-BR.json +++ b/src/i18n/messages/pt-BR.json @@ -1117,6 +1117,7 @@ "themeAccentDesc": "Escolha uma cor predefinida ou crie seu próprio tema com uma cor", "themeCreate": "Criar tema", "themeCustom": "Tema personalizado", + "themeCoral": "Coral", "themeBlue": "Azul", "themeRed": "Vermelho", "themeGreen": "Verde", diff --git a/src/i18n/messages/pt.json b/src/i18n/messages/pt.json index 99d9ca7087..cf87a0c2cc 100644 --- a/src/i18n/messages/pt.json +++ b/src/i18n/messages/pt.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Escolha uma cor predefinida ou crie seu próprio tema com uma cor", "themeCreate": "Criar tema", "themeCustom": "Tema personalizado", + "themeCoral": "Coral", "themeBlue": "Azul", "themeRed": "Vermelho", "themeGreen": "Verde", diff --git a/src/i18n/messages/ro.json b/src/i18n/messages/ro.json index df254984ff..2e187bace9 100644 --- a/src/i18n/messages/ro.json +++ b/src/i18n/messages/ro.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Alege o culoare presetată sau creează-ți propria temă cu o singură culoare", "themeCreate": "Creează temă", "themeCustom": "Temă personalizată", + "themeCoral": "Coral", "themeBlue": "Albastru", "themeRed": "Roșu", "themeGreen": "Verde", diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index e8ed9f4744..fc305a57fe 100644 --- a/src/i18n/messages/ru.json +++ b/src/i18n/messages/ru.json @@ -93,6 +93,7 @@ "presetColors": "Популярные цвета", "createTheme": "Создать тему", "chooseColor": "Выберите один цвет", + "themeCoral": "Коралловый", "themeBlue": "Синий", "themeRed": "Красный", "themeGreen": "Зелёный", diff --git a/src/i18n/messages/sk.json b/src/i18n/messages/sk.json index 2c2897e1b3..905a081534 100644 --- a/src/i18n/messages/sk.json +++ b/src/i18n/messages/sk.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Vyberte prednastavenú farbu alebo si vytvorte vlastnú tému jednou farbou", "themeCreate": "Vytvoriť tému", "themeCustom": "Vlastná téma", + "themeCoral": "Koralový", "themeBlue": "Modrá", "themeRed": "Červená", "themeGreen": "Zelená", diff --git a/src/i18n/messages/sv.json b/src/i18n/messages/sv.json index 77b4a30088..9c47ac819a 100644 --- a/src/i18n/messages/sv.json +++ b/src/i18n/messages/sv.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Välj en förinställd färg eller skapa ditt eget tema med en färg", "themeCreate": "Skapa tema", "themeCustom": "Anpassat tema", + "themeCoral": "Korall", "themeBlue": "Blå", "themeRed": "Röd", "themeGreen": "Grön", diff --git a/src/i18n/messages/th.json b/src/i18n/messages/th.json index a22fcadd1c..f74a408d10 100644 --- a/src/i18n/messages/th.json +++ b/src/i18n/messages/th.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "เลือกสีสำเร็จรูปหรือสร้างธีมของคุณเองด้วยสีเดียว", "themeCreate": "สร้างธีม", "themeCustom": "ธีมกำหนดเอง", + "themeCoral": "คอรัล", "themeBlue": "น้ำเงิน", "themeRed": "แดง", "themeGreen": "เขียว", diff --git a/src/i18n/messages/uk-UA.json b/src/i18n/messages/uk-UA.json index 52e07cf640..a5f7b91c2b 100644 --- a/src/i18n/messages/uk-UA.json +++ b/src/i18n/messages/uk-UA.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Оберіть готовий колір або створіть власну тему з одного кольору", "themeCreate": "Створити тему", "themeCustom": "Користувацька тема", + "themeCoral": "Кораловий", "themeBlue": "Синій", "themeRed": "Червоний", "themeGreen": "Зелений", diff --git a/src/i18n/messages/vi.json b/src/i18n/messages/vi.json index f21933740a..e497c86fcc 100644 --- a/src/i18n/messages/vi.json +++ b/src/i18n/messages/vi.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "Chọn màu đặt sẵn hoặc tạo chủ đề của riêng bạn bằng một màu", "themeCreate": "Tạo chủ đề", "themeCustom": "Chủ đề tùy chỉnh", + "themeCoral": "San hô", "themeBlue": "Xanh dương", "themeRed": "Đỏ", "themeGreen": "Xanh lá", diff --git a/src/i18n/messages/zh-CN.json b/src/i18n/messages/zh-CN.json index 5f319856c9..40fa59ebcc 100644 --- a/src/i18n/messages/zh-CN.json +++ b/src/i18n/messages/zh-CN.json @@ -1100,6 +1100,7 @@ "themeAccentDesc": "选择预设颜色，或使用单一颜色创建你自己的主题", "themeCreate": "创建主题", "themeCustom": "自定义主题", + "themeCoral": "珊瑚色", "themeBlue": "蓝色", "themeRed": "红色", "themeGreen": "绿色", diff --git a/src/shared/components/Header.tsx b/src/shared/components/Header.tsx index b2d99df9c2..a09859af2b 100644 --- a/src/shared/components/Header.tsx +++ b/src/shared/components/Header.tsx @@ -90,8 +90,7 @@ function usePageInfo(pathname: string | null) { return { title: t("endpoint"), description: t("endpointDescription"), breadcrumbs: [] }; if (pathname.includes("/profile")) return { title: t("settings"), description: t("settingsDescription"), breadcrumbs: [] }; - if (pathname.includes("/themes")) - return { title: t("themes"), description: t("themesDescription"), breadcrumbs: [] }; + // Note: /themes page removed – theme settings live in /settings → AppearanceTab return { title: "", description: "", breadcrumbs: [] }; } diff --git a/src/store/themeStore.ts b/src/store/themeStore.ts index a866513a12..9262707f42 100644 --- a/src/store/themeStore.ts +++ b/src/store/themeStore.ts @@ -57,7 +57,7 @@ const useThemeStore = create()( ) ); -const COLOR_THEMES: Record = { +export const COLOR_THEMES: Record = { coral: "#e54d5e", blue: "#3b82f6", red: "#ef4444",