/* * theme.css — SOPHIA * ───────────────────────────────────────────────────────────────────────────── * Témák (data-theme attribútum a elemen): * (nincs attr) → Hűs Vizek (baltic-blue × tropical-teal) ← alapértelmezett * deep-sea → Mély Tenger (alice-blue × stormy-teal) * atlantic-depth → Atlanti Mélység * rustic-charm → Rusztikus Varázs * * Navbar (#topNav) és sidebar (#sidebar) stílusai IDE INNEN jönnek, * nem Tailwind osztályokból — így a témaváltás azonnal érvényesül. * ───────────────────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════════════ PALETTA — részletes árnyalati skálák, minden témában globálisan elérhetők ══════════════════════════════════════════════════════════════════════════ */ :root { /* Stormy Teal */ --color-stormy-teal-50: #e5fdff; --color-stormy-teal-100: #ccfbff; --color-stormy-teal-200: #99f7ff; --color-stormy-teal-300: #66f2ff; --color-stormy-teal-400: #33eeff; --color-stormy-teal-500: #00eaff; --color-stormy-teal-600: #00bbcc; --color-stormy-teal-700: #008c99; --color-stormy-teal-800: #005e66; --color-stormy-teal-900: #002f33; --color-stormy-teal-950: #002124; /* Pearl Aqua */ --color-pearl-aqua-50: #eef7f6; --color-pearl-aqua-100: #dcefed; --color-pearl-aqua-200: #badedb; --color-pearl-aqua-300: #97cec9; --color-pearl-aqua-400: #74beb6; --color-pearl-aqua-500: #52ada4; --color-pearl-aqua-600: #418b83; --color-pearl-aqua-700: #316863; --color-pearl-aqua-800: #214542; --color-pearl-aqua-900: #102321; --color-pearl-aqua-950: #0b1817; /* Alice Blue */ --color-alice-blue-50: #ecf5f9; --color-alice-blue-100: #d9ecf2; --color-alice-blue-200: #b3d9e6; --color-alice-blue-300: #8cc6d9; --color-alice-blue-400: #66b3cc; --color-alice-blue-500: #409fbf; --color-alice-blue-600: #338099; --color-alice-blue-700: #266073; --color-alice-blue-800: #19404d; --color-alice-blue-900: #0d2026; --color-alice-blue-950: #09161b; /* Almond Silk */ --color-almond-silk-50: #ffece5; --color-almond-silk-100: #ffd9cc; --color-almond-silk-200: #ffb399; --color-almond-silk-300: #ff8c66; --color-almond-silk-400: #ff6633; --color-almond-silk-500: #ff4000; --color-almond-silk-600: #cc3300; --color-almond-silk-700: #992600; --color-almond-silk-800: #661a00; --color-almond-silk-900: #330d00; --color-almond-silk-950: #240900; /* Tangerine Dream */ --color-tangerine-dream-50: #fbeeea; --color-tangerine-dream-100: #f6ded5; --color-tangerine-dream-200: #edbdab; --color-tangerine-dream-300: #e49b81; --color-tangerine-dream-400: #db7a57; --color-tangerine-dream-500: #d2592d; --color-tangerine-dream-600: #a84724; --color-tangerine-dream-700: #7e351b; --color-tangerine-dream-800: #542412; --color-tangerine-dream-900: #2a1209; --color-tangerine-dream-950: #1d0c06; /* Floral White (Rustic Charm) */ --color-floral-white-50: #fff9e5; --color-floral-white-100: #fff3cc; --color-floral-white-200: #ffe799; --color-floral-white-300: #ffdb66; --color-floral-white-400: #ffcf33; --color-floral-white-500: #ffc300; --color-floral-white-600: #cc9c00; --color-floral-white-700: #997500; --color-floral-white-800: #664e00; --color-floral-white-900: #332700; --color-floral-white-950: #241b00; /* Dust Grey (Rustic Charm) */ --color-dust-grey-50: #f4f3f0; --color-dust-grey-100: #eae7e1; --color-dust-grey-200: #d4cec4; --color-dust-grey-300: #bfb6a6; --color-dust-grey-400: #a99d89; --color-dust-grey-500: #94856b; --color-dust-grey-600: #766a56; --color-dust-grey-700: #595040; --color-dust-grey-800: #3b352b; --color-dust-grey-900: #1e1b15; --color-dust-grey-950: #15130f; /* Charcoal Brown (Rustic Charm) */ --color-charcoal-brown-50: #f3f2f1; --color-charcoal-brown-100: #e7e6e4; --color-charcoal-brown-200: #cfccc9; --color-charcoal-brown-300: #b7b3ae; --color-charcoal-brown-400: #9f9a93; --color-charcoal-brown-500: #878178; --color-charcoal-brown-600: #6c6760; --color-charcoal-brown-700: #514d48; --color-charcoal-brown-800: #363330; --color-charcoal-brown-900: #1b1a18; --color-charcoal-brown-950: #131211; /* Carbon Black (Rustic Charm) */ --color-carbon-black-50: #f3f2f2; --color-carbon-black-100: #e7e6e4; --color-carbon-black-200: #cecdca; --color-carbon-black-300: #b6b4af; --color-carbon-black-400: #9d9a95; --color-carbon-black-500: #85817a; --color-carbon-black-600: #6a6762; --color-carbon-black-700: #504e49; --color-carbon-black-800: #353431; --color-carbon-black-900: #1b1a18; --color-carbon-black-950: #131211; /* Spicy Paprika (Rustic Charm) */ --color-spicy-paprika-50: #fdeee8; --color-spicy-paprika-100: #fbdcd0; --color-spicy-paprika-200: #f6baa2; --color-spicy-paprika-300: #f29773; --color-spicy-paprika-400: #ee7444; --color-spicy-paprika-500: #e95216; --color-spicy-paprika-600: #bb4111; --color-spicy-paprika-700: #8c310d; --color-spicy-paprika-800: #5d2109; --color-spicy-paprika-900: #2f1004; --color-spicy-paprika-950: #210b03; /* Vanilla Cream (Earthy Tones) */ --color-vanilla-cream-50: #f9f6ec; --color-vanilla-cream-100: #f2edd9; --color-vanilla-cream-200: #e6dbb3; --color-vanilla-cream-300: #d9c98c; --color-vanilla-cream-400: #ccb866; --color-vanilla-cream-500: #bfa640; --color-vanilla-cream-600: #998533; --color-vanilla-cream-700: #736326; --color-vanilla-cream-800: #4d4219; --color-vanilla-cream-900: #26210d; --color-vanilla-cream-950: #1b1709; /* Tea Green (Earthy Tones) */ --color-tea-green-50: #f6f8ec; --color-tea-green-100: #edf1da; --color-tea-green-200: #dce4b4; --color-tea-green-300: #cad68f; --color-tea-green-400: #b9c969; --color-tea-green-500: #a7bb44; --color-tea-green-600: #869636; --color-tea-green-700: #647029; --color-tea-green-800: #434b1b; --color-tea-green-900: #21250e; --color-tea-green-950: #171a09; /* Muted Olive (Earthy Tones) */ --color-muted-olive-50: #f4f7ee; --color-muted-olive-100: #eaefdc; --color-muted-olive-200: #d5dfb9; --color-muted-olive-300: #c0cf96; --color-muted-olive-400: #abbf73; --color-muted-olive-500: #96af50; --color-muted-olive-600: #788c40; --color-muted-olive-700: #5a6930; --color-muted-olive-800: #3c4620; --color-muted-olive-900: #1e2310; --color-muted-olive-950: #15180b; /* Faded Copper (Earthy Tones) */ --color-faded-copper-50: #f6f2ef; --color-faded-copper-100: #ede5de; --color-faded-copper-200: #dacabe; --color-faded-copper-300: #c8b09d; --color-faded-copper-400: #b6957c; --color-faded-copper-500: #a37b5c; --color-faded-copper-600: #836249; --color-faded-copper-700: #624a37; --color-faded-copper-800: #413125; --color-faded-copper-900: #211912; --color-faded-copper-950: #17110d; /* Ash Brown (Earthy Tones) */ --color-ash-brown-50: #f4f2f0; --color-ash-brown-100: #eae4e1; --color-ash-brown-200: #d5cac3; --color-ash-brown-300: #c0afa5; --color-ash-brown-400: #aa9588; --color-ash-brown-500: #957a6a; --color-ash-brown-600: #776255; --color-ash-brown-700: #5a493f; --color-ash-brown-800: #3c312a; --color-ash-brown-900: #1e1815; --color-ash-brown-950: #15110f; /* Baltic Blue (Cool Waters) */ --color-baltic-blue-50: #ebf4f9; --color-baltic-blue-100: #d7e8f4; --color-baltic-blue-200: #afd2e9; --color-baltic-blue-300: #88bbdd; --color-baltic-blue-400: #60a4d2; --color-baltic-blue-500: #388ec7; --color-baltic-blue-600: #2d719f; --color-baltic-blue-700: #225577; --color-baltic-blue-800: #163950; --color-baltic-blue-900: #0b1c28; --color-baltic-blue-950: #08141c; /* Tropical Teal (Cool Waters) */ --color-tropical-teal-50: #ecf8f8; --color-tropical-teal-100: #d9f2f2; --color-tropical-teal-200: #b3e4e5; --color-tropical-teal-300: #8dd7d8; --color-tropical-teal-400: #67c9cb; --color-tropical-teal-500: #41bcbe; --color-tropical-teal-600: #349698; --color-tropical-teal-700: #277172; --color-tropical-teal-800: #1a4b4c; --color-tropical-teal-900: #0d2626; --color-tropical-teal-950: #091a1b; /* Emerald (Cool Waters) */ --color-emerald-50: #ebf9f3; --color-emerald-100: #d8f3e7; --color-emerald-200: #b1e7d0; --color-emerald-300: #8adbb8; --color-emerald-400: #63cfa0; --color-emerald-500: #3cc389; --color-emerald-600: #309c6d; --color-emerald-700: #247552; --color-emerald-800: #184e37; --color-emerald-900: #0c271b; --color-emerald-950: #081b13; /* Light Green (Cool Waters) */ --color-light-green-50: #e9fced; --color-light-green-100: #d2f9db; --color-light-green-200: #a6f2b8; --color-light-green-300: #79ec94; --color-light-green-400: #4ce670; --color-light-green-500: #20df4d; --color-light-green-600: #19b33d; --color-light-green-700: #13862e; --color-light-green-800: #0d591f; --color-light-green-900: #062d0f; --color-light-green-950: #041f0b; /* Spring Green (Cool Waters) — élénk lime, különbözik az Earthy tea-green-től */ --color-spring-green-50: #e8fdea; --color-spring-green-100: #d1fad5; --color-spring-green-200: #a3f5ab; --color-spring-green-300: #75f081; --color-spring-green-400: #46ec57; --color-spring-green-500: #18e72d; --color-spring-green-600: #13b924; --color-spring-green-700: #0f8a1b; --color-spring-green-800: #0a5c12; --color-spring-green-900: #052e09; --color-spring-green-950: #032006; /* ══════════════════════════════════════════════════════════════════════ HUS VIZEK (ALAPERTELMEZETT) — Baltic Blue x Tropical Teal ══════════════════════════════════════════════════════════════════════ */ --color-nav-bg: #225577; /* baltic-blue-700 */ --color-nav-border: #2d719f; /* baltic-blue-600 */ --color-nav-text: #d7e8f4; /* baltic-blue-100 */ --color-nav-text-muted: #afd2e9; /* baltic-blue-200 */ --color-sidebar-bg: #163950; /* baltic-blue-800 */ --color-sidebar-border: #225577; /* baltic-blue-700 */ --color-auth-bg: #163950; /* baltic-blue-800 */ --color-auth-card-bg: #225577; /* baltic-blue-700 */ --color-auth-card-border: #2d719f; /* baltic-blue-600 */ --color-brand: #41bcbe; /* tropical-teal-500 */ --color-brand-hover: #349698; /* tropical-teal-600 */ --color-brand-dark: #277172; /* tropical-teal-700 */ --color-success: #3cc389; /* emerald-500 */ --color-success-bg: #ebf9f3; /* emerald-50 */ --color-success-text: #184e37; /* emerald-800 */ --color-warning: #388ec7; /* baltic-blue-500 */ --color-warning-bg: #ebf4f9; /* baltic-blue-50 */ --color-warning-text: #163950; /* baltic-blue-800 */ --color-page-bg: #ebf4f9; /* baltic-blue-50 */ --color-input-bg: #163950; /* baltic-blue-800 */ --color-input-border: #2d719f; /* baltic-blue-600 */ --color-input-text: #d7e8f4; /* baltic-blue-100 */ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* ══════════════════════════════════════════════════════════════════════════ ATLANTI MELYSEG — data-theme="atlantic-depth" ══════════════════════════════════════════════════════════════════════════ */ [data-theme="atlantic-depth"] { --color-nav-bg: #1e2d4a; --color-nav-border: #162238; --color-nav-text: #bfdbfe; --color-nav-text-muted: #93c5fd; --color-sidebar-bg: #1e2d4a; --color-sidebar-border: #162238; --color-auth-bg: #1e2d4a; --color-auth-card-bg: #253553; --color-auth-card-border: #2e4066; --color-brand: #1d4ed8; --color-brand-hover: #1e40af; --color-brand-dark: #1e3a8a; --color-success: #10B981; --color-success-bg: #d1fae5; --color-success-text: #065f46; --color-warning: #F59E0B; --color-warning-bg: #fef3c7; --color-warning-text: #92400e; --color-page-bg: #f9fafb; --color-input-bg: #1e2d4a; --color-input-border: #2e4066; --color-input-text: #e2e8f0; } /* ══════════════════════════════════════════════════════════════════════════ RUSZTIKUS VARAZS — data-theme="rustic-charm" ══════════════════════════════════════════════════════════════════════════ */ [data-theme="rustic-charm"] { --color-nav-bg: #514d48; /* charcoal-brown-700 */ --color-nav-border: #6c6760; /* charcoal-brown-600 */ --color-nav-text: #ffe799; /* floral-white-200 */ --color-nav-text-muted: #ffdb66; /* floral-white-300 */ --color-sidebar-bg: #363330; /* charcoal-brown-800 */ --color-sidebar-border: #514d48; /* charcoal-brown-700 */ --color-auth-bg: #363330; /* charcoal-brown-800 */ --color-auth-card-bg: #514d48; /* charcoal-brown-700 */ --color-auth-card-border: #6c6760; /* charcoal-brown-600 */ --color-brand: #e95216; /* spicy-paprika-500 */ --color-brand-hover: #bb4111; /* spicy-paprika-600 */ --color-brand-dark: #8c310d; /* spicy-paprika-700 */ --color-success: #597b3a; --color-success-bg: #eef4e6; --color-success-text: #3a5226; --color-warning: #cc9c00; /* floral-white-600 */ --color-warning-bg: #fff9e5; /* floral-white-50 */ --color-warning-text: #664e00; /* floral-white-800 */ --color-page-bg: #f4f3f0; /* dust-grey-50 */ --color-input-bg: #363330; /* charcoal-brown-800 */ --color-input-border: #6c6760; /* charcoal-brown-600 */ --color-input-text: #ffe799; /* floral-white-200 */ } /* ══════════════════════════════════════════════════════════════════════════ MELY TENGER — data-theme="deep-sea" ══════════════════════════════════════════════════════════════════════════ */ [data-theme="deep-sea"] { --color-nav-bg: #09161b; /* alice-blue-950 */ --color-nav-border: #19404d; /* alice-blue-800 */ --color-nav-text: #b3d9e6; /* alice-blue-200 */ --color-nav-text-muted: #8cc6d9; /* alice-blue-300 */ --color-sidebar-bg: #0d2026; /* alice-blue-900 */ --color-sidebar-border: #19404d; /* alice-blue-800 */ --color-auth-bg: #09161b; /* alice-blue-950 */ --color-auth-card-bg: #0d2026; /* alice-blue-900 */ --color-auth-card-border: #19404d; /* alice-blue-800 */ --color-brand: #00bbcc; /* stormy-teal-600 */ --color-brand-hover: #008c99; /* stormy-teal-700 */ --color-brand-dark: #005e66; /* stormy-teal-800 */ --color-success: #52ada4; /* pearl-aqua-500 */ --color-success-bg: #eef7f6; /* pearl-aqua-50 */ --color-success-text: #316863; /* pearl-aqua-700 */ --color-warning: #d2592d; /* tangerine-dream-600 */ --color-warning-bg: #f6ded5; /* tangerine-dream-100 */ --color-warning-text: #7e351b; /* tangerine-dream-700 */ --color-page-bg: #ecf5f9; /* alice-blue-50 */ --color-input-bg: #09161b; /* alice-blue-950 */ --color-input-border: #19404d; /* alice-blue-800 */ --color-input-text: #b3d9e6; /* alice-blue-200 */ } /* ══════════════════════════════════════════════════════════════════════════ DIREKT ELEM STILUSOK ID-szelektorral (spec: 1,0,0) — feluliria a Tailwind osztalyokat is. Ha a CSS valtozo megvaltozik, az elem azonnal ujrarenderel. ══════════════════════════════════════════════════════════════════════════ */ #topNav { background-color: var(--color-nav-bg); border-bottom: 1px solid var(--color-nav-border); } #sidebar { background-color: var(--color-sidebar-bg); border-right-color: var(--color-sidebar-border); } body { background-color: var(--color-page-bg); }