Témy a farebné schémy

EOS Hub má svetlý a tmavý režim, šesť farebných schém a vlastnú značku: logo, názov produktu a dve písma. Všetky farby sú CSS premenné vo farebnom priestore oklch, ktoré priamo čítajú komponenty shadcn/ui aj Tailwind v4. Svetlý a tmavý režim zabezpečuje next-themes.

Svetlý a tmavý režim

K dispozícii sú tri možnosti:

Svetlá -- svetlé pozadie s tmavým textom
Tmavá -- tmavé pozadie so svetlým textom
Systémová -- podľa nastavenia operačného systému (predvolená)

Režim prepnete v používateľskom menu dole v bočnom paneli (Téma) alebo v Nastaveniach (Téma, potom Uložiť).

Režim sa ukladá v prehliadači (localStorage, kľúč eos-hub-theme). Malý skript ho použije ešte pred vykreslením stránky, takže tmavá stránka nikdy nezabliká nabielo. Uložením v Nastaveniach sa navyše zapamätá vo vašom profile.

Farebné schémy

Farebná schéma mení primárnu a akcentovú farbu, plochy, bočný panel a farby grafov, vo svetlom aj tmavom režime:

Schéma	Farby
Predvolená	Značka: borovicovo zelená s medovým akcentom, neutrálne odtiene s jemným zeleno-modrým nádychom
Ruža	Ružová
Levanduľa	Fialová
Mäta	Sviežo zelená
Broskyňa	Oranžová
Obloha	Svetlomodrá

Schému prepnete v používateľskom menu (Farebná schéma) alebo v Nastaveniach (Farebná schéma, potom Uložiť). Zmena sa prejaví okamžite.

Voľba sa ukladá do cookie v tomto prehliadači (colorScheme, platnosť jeden rok). Server cookie prečíta a vykreslí stránku už s nastavenou schémou, takže farby sú správne od prvého zobrazenia. Uložením v Nastaveniach sa navyše zapamätá vo vašom profile.

Značka

Logo a názov

Logo tvorí kruh zo štyroch štvrtín -- štvrťročný rytmus -- okolo stredového bodu, jedného spoločného smeru. Prvá štvrtina vpravo hore je medová. Ostatné tri preberajú primárnu farbu farebnej schémy a bod farbu textu, takže logo sedí ku každej schéme aj k tmavému režimu a medová štvrtina zostáva.

Vedľa loga je názov produktu z premennej prostredia PRODUCT_NAME (predvolene EOS Hub), vysádzaný písmom nadpisov. Nasadenie s vlastným názvom ho ukazuje všade:

na prihlasovacej stránke, v bočnom paneli, v sprievodcovi prvým spustením, na stránke súhlasu pre AI asistentov a na stránke O aplikácii;
v manifeste webovej aplikácie (názov pod ikonou na ploche telefónu);
v konektoroch AI asistentov: v názve a inštrukciách MCP servera a v názve OAuth zdroja.

Pozrite si Konfiguráciu.

Komponenty sú v src/components/brand/:

Komponent	Použitie
`BrandMark`	Logo ako vložené SVG, zafarbené cez tokeny značky. Varianty: `default` (na pozadí stránky), `tile` (svetlé na primárnej farbe), `inverse` (aktuálna farba textu s medovou štvrtinou, na tmavej ploche značky), `mono` (všetko v aktuálnej farbe textu)
`BrandTile`	Logo na zaoblenej dlaždici v primárnej farbe (bočný panel, prepínač organizácií)
`BrandLockup`	Logo + názov; názov produktu odovzdáva volajúci
`illustrations.tsx`	Malé čiarové ilustrácie pre prázdne zoznamy, nakreslené z prvkov loga (kruh, štvrtiny, prerušované oblúky)

Tokeny značky

Logo a panel na prihlasovacej stránke majú vlastné tokeny v src/app/globals.css:

Token	Hodnota
`--brand-ring`	Kruh: `var(--primary)`, takže sa prispôsobí každej schéme
`--brand-accent`	Prvá štvrtina: medová, `oklch(0.72 0.13 85)` (tmavý režim `oklch(0.8 0.13 85)`)
`--brand-dot`	Stredový bod: `var(--foreground)`
`--brand-panel`	Panel na prihlasovacej stránke: tmavá borovicová v každej schéme (`oklch(0.38 0.075 168)`, tmavý režim `oklch(0.27 0.05 170)`)
`--brand-panel-foreground`	Text na tomto paneli

Tailwind ich sprístupňuje ako bg-brand-panel, text-brand-accent a podobne.

Písma

Písmo	Použitie	Token
Schibsted Grotesk	Nadpisy (stránok, kariet a dialógov) a názov produktu	`--font-heading` (trieda `font-heading`)
Source Sans 3	Všetok ostatný text	`--font-sans`

Obe sa načítavajú cez next/font/google v src/app/layout.tsx so sadami latin a latin-ext, takže aj slovenská diakritika sa zobrazí v písmach značky. Písma sa stiahnu pri zostavení a posiela ich samotná aplikácia; prehliadač sa na Google vôbec nepripája.

Prihlasovacia stránka

Na širokých obrazovkách je prihlasovacia stránka rozdelená na dve časti. Vľavo je tmavý borovicový panel so značkou, vetou Riaďte svoju firmu pomocou … (názov metódy sa riadi pojmami) a krátkym riadkom o stretnutiach, scorecard, Rocks a problémoch. Vpravo je prihlasovací formulár. Na mobile sa zobrazí len formulár pod značkou.

Sprievodca prvým spustením, stránka Zatiaľ bez organizácie a stránka súhlasu pre AI asistentov používajú rovnakú kartu so značkou navrchu.

Prázdne zoznamy

Prázdne zoznamy namiesto ikony ukazujú malú ilustráciu nakreslenú z loga: Rocks, Problémy, Úlohy, Stretnutia, Scorecard, Dokumenty, Organizačná štruktúra, Hodnotenie ľudí a Týmto filtrom nič nezodpovedá. Ilustrácie používajú farbu textu a tokeny značky, takže fungujú v každej schéme aj v tmavom režime. V kóde ich odovzdáte komponentu EmptyState cez vlastnosť illustration.

Ikony

Súbor	Čo to je
`src/app/icon.svg`	Favicon: logo s vlastnými farbami pre tmavú tému prehliadača
`src/app/apple-icon.png`	Ikona pre Apple zariadenia (180 × 180): logo na borovicovej dlaždici
`public/icon-192.png`, `public/icon-512.png`	Ikony pre „Pridať na plochu“, uvedené v manifeste webovej aplikácie
`src/app/manifest.ts`	Manifest webovej aplikácie: názov a krátky názov z `PRODUCT_NAME`, farba témy borovicová

Súbory ikon nevedia čítať CSS premenné, preto sú ich farby zapísané ako hex hodnoty. Po zmene loga upravte src/app/icon.svg ručne a potom znova vygenerujte PNG ikony:

bash

node scripts/brand/render-icons.mjs

Skript nakreslí borovicovú dlaždicu pomocou Chromia z Playwrightu (ak chýba, raz spustite npx playwright install chromium) a zapíše tri PNG súbory.

Stránka dokumentácie používa rovnaké logo (docs/public/logo.svg) a farbu značky.

Farby stavov

Farby stavov znamenajú to isté na každej stránke, v každej farebnej schéme, vo svetlom aj tmavom režime. Farebná schéma mení len primárnu a akcentovú farbu -- farby stavov nikdy.

Farba	Význam	Príklady
Zelená	Dobré	V pláne, Splnené, Vyriešené, Dokončené, Aktívny
Červená	Zlé	Mimo plánu, Nesplnené, Vysoká priorita, Pozastavená, Odvolaný, Po termíne
Jantárová	Pozor	Stredná priorita, Riešia sa, Prebieha, expirovaný API kľúč, čas varovania na stretnutí
Modrá	Informácia	Hotovo, Nízka priorita
Sivá	Neutrálne	Otvorené, Čakajúce, Naplánované

Farba nikdy nie je jediný signál: každý štítok stavu stav aj pomenuje textom (často s ikonou) a bunky v Scorecard majú ikonu ✓ alebo ⚠. Stav sa tak dá prečítať aj bez rozlišovania červenej a zelenej a aj čítačkou obrazovky.

Každá farba stavu je samostatne vyladená pre svetlý a tmavý režim, aby štítky boli čitateľné na oboch pozadiach. Pásy stĺpcov vo V/TO a grafy naďalej používajú primárnu farbu schémy a farby grafov.

Ako to funguje

Všetky farby sú CSS premenné vo formáte oklch v súbore src/app/globals.css:

:root obsahuje predvolenú schému (značku) vo svetlom režime, .dark tú istú schému v tmavom režime. Triedu dark dáva na <html> next-themes.
Každá ďalšia schéma je atribút data-scheme na <html> (data-scheme="rose" a podobne). Predvolená schéma atribút nemá.
Blok schémy prepíše premenné plôch, primárnej a akcentovej farby, okrajov, bočného panela a grafov, raz pre svetlý a raz pre tmavý režim.

css

:root {
  --background: oklch(0.995 0.002 170);
  --foreground: oklch(0.2 0.015 200);
  --primary: oklch(0.42 0.085 168);          /* borovicová */
  --primary-foreground: oklch(0.985 0.005 168);
  --accent: oklch(0.95 0.03 168);
  --chart-1: oklch(0.5 0.09 168);            /* borovicová */
  --chart-3: oklch(0.72 0.13 85);            /* medová */
  /* ... */
}

.dark {
  --background: oklch(0.17 0.012 200);
  --primary: oklch(0.72 0.1 168);            /* svetlejšia borovicová */
  --primary-foreground: oklch(0.18 0.03 180);
  /* ... */
}

[data-scheme="rose"] {
  --primary: oklch(0.55 0.15 350);
  /* ... */
}

[data-scheme="rose"].dark,
.dark[data-scheme="rose"] {
  --primary: oklch(0.72 0.12 350);
  /* ... */
}

Blok @theme inline na začiatku súboru mapuje premenné na farby Tailwindu (bg-primary, text-muted-foreground, bg-status-good-bg …), takže sa pri zmene schémy prispôsobí každý komponent. Grafy používajú var(--chart-1) až var(--chart-5).

Vytvorenie vlastnej farebnej schémy

1. Definujte CSS premenné

V src/app/globals.css skopírujte existujúcu schému (napríklad Obloha) a zmeňte hodnoty -- v oklch, jeden blok pre svetlý a jeden pre tmavý režim:

css

[data-scheme="ocean"] {
  --background: oklch(0.985 0.008 200);
  --foreground: oklch(0.2 0.02 200);
  --card: oklch(0.99 0.006 200);
  --card-foreground: oklch(0.2 0.02 200);
  --popover: oklch(0.99 0.006 200);
  --popover-foreground: oklch(0.2 0.02 200);
  --primary: oklch(0.5 0.12 200);
  --primary-foreground: oklch(0.98 0.005 200);
  --secondary: oklch(0.94 0.02 200);
  --secondary-foreground: oklch(0.3 0.04 200);
  --muted: oklch(0.95 0.015 200);
  --muted-foreground: oklch(0.5 0.03 200);
  --accent: oklch(0.93 0.025 200);
  --accent-foreground: oklch(0.25 0.03 200);
  --border: oklch(0.9 0.02 200);
  --input: oklch(0.9 0.02 200);
  --ring: oklch(0.6 0.1 200);
  --sidebar: oklch(0.97 0.015 200);
  --sidebar-foreground: oklch(0.2 0.02 200);
  --sidebar-primary: oklch(0.5 0.12 200);
  --sidebar-primary-foreground: oklch(0.98 0.005 200);
  --sidebar-accent: oklch(0.93 0.025 200);
  --sidebar-accent-foreground: oklch(0.25 0.03 200);
  --sidebar-border: oklch(0.9 0.02 200);
  --chart-1: oklch(0.55 0.13 200);
  --chart-2: oklch(0.6 0.14 20);
  --chart-3: oklch(0.55 0.12 150);
  --chart-4: oklch(0.62 0.13 280);
  --chart-5: oklch(0.65 0.12 60);
}

[data-scheme="ocean"].dark,
.dark[data-scheme="ocean"] {
  --background: oklch(0.16 0.015 200);
  --primary: oklch(0.7 0.1 200);
  --primary-foreground: oklch(0.15 0.02 200);
  /* ... tie isté premenné, vyladené pre tmavý režim */
}

Farby stavov a tokeny značky nemeňte: kruh loga sa riadi --primary a medová štvrtina aj panel na prihlasovacej stránke zostávajú v každej schéme rovnaké.

2. Zaregistrujte schému

src/components/color-scheme-provider.tsx: pridajte názov do typu ColorScheme a do COLOR_SCHEMES, s hodnotou hue pre farebný bod v menu:

typescript

export const COLOR_SCHEMES: { value: ColorScheme; hue: string }[] = [
  { value: "default", hue: "" },
  { value: "rose", hue: "oklch(0.72 0.12 350)" },
  // ...
  { value: "sky", hue: "oklch(0.7 0.1 220)" },
  { value: "ocean", hue: "oklch(0.68 0.1 200)" }, // nová
]

src/app/(dashboard)/settings/actions.ts: pridajte ju do výčtu colorScheme, inak ju Nastavenia odmietnu uložiť. Doplňte ju aj do typu schémy v src/components/settings/settings-form.tsx.
src/i18n/messages/en.json a sk.json: pridajte jej názov ako settings.scheme_ocean.

Profil ukladá schému ako text, takže migrácia databázy nie je potrebná.

3. Otestujte oba režimy

Skontrolujte novú schému vo svetlom aj tmavom režime, na počítači aj na mobile. Všímajte si najmä:

kontrast textu voči pozadiu (aspoň WCAG AA)
stavy tlačidiel (hover, aktívne, neaktívne)
formulárové polia a okraje
farby grafov na prehľade
logo v bočnom paneli a na prihlasovacej stránke

TIP

Na overenie, či farebné kombinácie spĺňajú štandardy prístupnosti, použite nástroj ako WebAIM Contrast Checker.

Úprava predvolenej schémy

Ak chcete zmeniť farby značky bez pridania novej schémy, upravte bloky :root a .dark v src/app/globals.css a tokeny značky (--brand-accent, --brand-panel) nižšie v tom istom súbore. Potom zmeňte hex farby v src/app/icon.svg, scripts/brand/render-icons.mjs a src/app/manifest.ts (theme_color) a znova vygenerujte ikony.

Ďalšie kroky

Jazykové verzie -- podpora viacerých jazykov
Dashboard -- témy v praxi
Konfigurácia -- úplný prehľad konfigurácie

Témy a farebné schémy ​

Svetlý a tmavý režim ​

Farebné schémy ​

Značka ​

Logo a názov ​

Tokeny značky ​

Písma ​

Prihlasovacia stránka ​

Prázdne zoznamy ​

Ikony ​

Farby stavov ​

Ako to funguje ​

Vytvorenie vlastnej farebnej schémy ​

1. Definujte CSS premenné ​

2. Zaregistrujte schému ​

3. Otestujte oba režimy ​

Úprava predvolenej schémy ​

Ďalšie kroky ​