Témy a farebné schémy

EOS Hub ponúka rozsiahle možnosti vizuálneho prispôsobenia vrátane svetlého/tmavého režimu a 6 farebných schém.

Svetlý a tmavý režim

Aplikácia podporuje tri režimy zobrazenia:

• Svetlý -- klasický svetlý vzhľad
• Tmavý -- tmavý vzhľad, šetrný k očiam
• Systémový -- automaticky podľa nastavení operačného systému

Prepnúť režim môžete kliknutím na ikonu témy v navigačnej lište.

Technická implementácia

Tmavý/svetlý režim je implementovaný pomocou next-themes:

import { useTheme } from 'next-themes';

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Prepnúť tému
    </button>
  );
}

Farebné schémy

EOS Hub ponúka 6 preddefinovaných farebných schém, ktoré menia primárnu farbu aplikácie a súvisiace odtiene:

Schéma	Popis
Modrá	Predvolená schéma, profesionálny vzhľad
Zelená	Prírodný, ekologický vzhľad
Fialová	Kreatívny, moderný vzhľad
Oranžová	Energický, dynamický vzhľad
Červená	Výrazný, dôrazný vzhľad
Sivá	Minimalistický, neutrálny vzhľad

Výber farebnej schémy

1. Kliknite na ikonu nastavení v navigácii
2. Vyberte sekciu Vzhľad
3. Zvoľte farebnú schému z ponúkaných možností
4. Zmena sa prejaví okamžite

Vybraná schéma sa uloží do preferencií používateľa.

Komponentová knižnica

EOS Hub používa shadcn/ui v4 -- komponentovú knižnicu postavenú na Radix UI a Tailwind CSS. Všetky komponenty automaticky rešpektujú vybranú tému a farebnú schému.

Prispôsobenie komponentov

Farebné premenné sú definované v CSS pomocou HSL hodnôt:

:root {
  --primary: 221 83% 53%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --background: 0 0% 100%;
  --foreground: 222 84% 5%;
}

.dark {
  --primary: 217 91% 60%;
  --primary-foreground: 222 84% 5%;
  --secondary: 217 33% 17%;
  --background: 222 84% 5%;
  --foreground: 210 40% 98%;
}

Vlastné farby

Ak chcete vytvoriť vlastnú farebnú schému, upravte CSS premenné v src/app/globals.css. Použite HSL formát pre konzistentnosť.

Responzívny dizajn

Všetky komponenty EOS Hub sú plne responzívne a prispôsobujú sa veľkosti obrazovky:

• Desktop -- plné rozloženie s postranným panelom
• Tablet -- upravené rozloženie so zbaliteľným panelom
• Mobil -- mobilné rozloženie s hamburger menu

Ďalšie kroky

• Jazykové verzie -- nastavenie jazyka
• Dashboard -- prehľad tímu