/* * css/theme.css — gismc Portfolio Theme * * Single source of truth for all theme-aware colors, shadows, and overrides. * CSS custom properties defined here; Tailwind bridge and dark overrides below. * * Load order in HTML : * 1. /css/theme.css (this file — variable definitions + project rules) * 2. Tailwind CDN script */ /* ============================================================================= LIGHT THEME (default — :root) ============================================================================= */ :root { /* --- Surface / Background --- */ --gismc-color-bg-page: #f9fafb; /* gray-50 — main page background */ --gismc-color-bg-surface: #ffffff; /* white — card / panel background */ --gismc-color-bg-surface-alt: #f3f4f6; /* gray-100 — secondary surface, table headers */ --gismc-color-bg-overlay: rgba(0, 0, 0, 0.5); /* modal / lightbox backdrop */ --gismc-color-bg-header: rgba(249, 250, 251, 0.8); /* gray-50/80 — sticky nav */ /* --- Text --- */ --gismc-color-text-primary: #111827; /* gray-900 — headings, strong text */ --gismc-color-text-secondary: #4b5563; /* gray-600 — body text */ --gismc-color-text-muted: #9ca3af; /* gray-400 — captions, timestamps */ --gismc-color-text-inverse: #ffffff; /* text on dark backgrounds */ --gismc-color-text-heading: #1e3a8a; /* blue-900 — branded headings */ /* --- Brand / Accent --- */ --gismc-color-primary: #2563eb; /* blue-600 — primary buttons, active links */ --gismc-color-primary-hover: #1d4ed8; /* blue-700 — hover state */ --gismc-color-primary-light: #dbeafe; /* blue-100 — tinted badges, backgrounds */ --gismc-color-primary-text: #1e40af; /* blue-800 — text over primary-light */ /* --- Border & Divider --- */ --gismc-color-border: #e5e7eb; /* gray-200 — card borders, dividers */ --gismc-color-border-focus: #3b82f6; /* blue-500 — input / button focus ring */ --gismc-color-focus-ring: rgba(59, 130, 246, 0.1); /* blue-500/10 — box-shadow focus */ /* --- Admin --- */ --gismc-color-sidebar-active-bg: rgba(59, 130, 246, 0.1); /* --- Status Colors --- */ --gismc-color-success: #16a34a; /* green-600 */ --gismc-color-warning: #ca8a04; /* yellow-600 */ --gismc-color-danger: #dc2626; /* red-600 */ --gismc-color-info: #9333ea; /* purple-600 */ /* --- Scrollbar --- */ --gismc-color-scrollbar-track: #f1f5f9; --gismc-color-scrollbar-thumb: #cbd5e1; --gismc-color-scrollbar-thumb-hover: #94a3b8; /* --- Code Blocks --- */ --gismc-color-code-bg-inline: #f3f4f6; --gismc-color-code-text-inline: #1f2937; --gismc-color-code-bg-block: #1f2937; --gismc-color-code-text-block: #f3f4f6; /* --- Shadows --- */ --gismc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --gismc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --gismc-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04); } /* ============================================================================= DARK THEME — [data-theme="dark"] on ============================================================================= */ [data-theme="dark"] { /* --- Surface / Background --- */ --gismc-color-bg-page: #0f172a; --gismc-color-bg-surface: #1e293b; --gismc-color-bg-surface-alt: #334155; --gismc-color-bg-overlay: rgba(0, 0, 0, 0.7); --gismc-color-bg-header: rgba(15, 23, 42, 0.95); /* --- Text --- */ --gismc-color-text-primary: #f1f5f9; --gismc-color-text-secondary: #94a3b8; --gismc-color-text-muted: #64748b; --gismc-color-text-inverse: #0f172a; --gismc-color-text-heading: #bfdbfe; /* --- Brand / Accent --- */ --gismc-color-primary: #3b82f6; --gismc-color-primary-hover: #2563eb; --gismc-color-primary-light: #1e3a8a; --gismc-color-primary-text: #bfdbfe; /* --- Border & Divider --- */ --gismc-color-border: #334155; --gismc-color-border-focus: #60a5fa; --gismc-color-focus-ring: rgba(96, 165, 250, 0.15); /* --- Admin --- */ --gismc-color-sidebar-active-bg: rgba(59, 130, 246, 0.15); /* --- Status Colors --- */ --gismc-color-success: #22c55e; --gismc-color-warning: #eab308; --gismc-color-danger: #ef4444; --gismc-color-info: #a855f7; /* --- Scrollbar --- */ --gismc-color-scrollbar-track: #1e293b; --gismc-color-scrollbar-thumb: #334155; --gismc-color-scrollbar-thumb-hover: #475569; /* --- Code Blocks --- */ --gismc-color-code-bg-inline: #334155; --gismc-color-code-text-inline: #e2e8f0; /* --- Shadows --- */ --gismc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --gismc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2); --gismc-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 10px 10px -5px rgb(0 0 0 / 0.2); } /* ============================================================================= LEGACY ALIASES — --color-* → --gismc-color-* The admin panel Tailwind config and FOUC scripts reference the old --color-* names. These aliases keep them working without touching every admin file. ============================================================================= */ :root { --color-bg-page: var(--gismc-color-bg-page); --color-bg-surface: var(--gismc-color-bg-surface); --color-bg-surface-alt: var(--gismc-color-bg-surface-alt); --color-text-primary: var(--gismc-color-text-primary); --color-text-secondary: var(--gismc-color-text-secondary); --color-text-muted: var(--gismc-color-text-muted); --color-text-heading: var(--gismc-color-text-heading); --color-primary: var(--gismc-color-primary); --color-primary-hover: var(--gismc-color-primary-hover); --color-primary-light: var(--gismc-color-primary-light); --color-primary-text: var(--gismc-color-primary-text); --color-border: var(--gismc-color-border); --color-border-focus: var(--gismc-color-border-focus); --color-focus-ring: var(--gismc-color-focus-ring); --color-sidebar-active-bg: var(--gismc-color-sidebar-active-bg); --color-success: var(--gismc-color-success); --color-warning: var(--gismc-color-warning); --color-danger: var(--gismc-color-danger); --color-info: var(--gismc-color-info); --color-scrollbar-track: var(--gismc-color-scrollbar-track); --color-scrollbar-thumb: var(--gismc-color-scrollbar-thumb); --color-scrollbar-thumb-hover: var(--gismc-color-scrollbar-thumb-hover); --shadow-lg: var(--gismc-shadow-lg); } /* ============================================================================= NO-TRANSITIONS GUARD Applied by the FOUC script before first paint; removed via rAF after load. ============================================================================= */ .no-transitions, .no-transitions * { transition: none !important; } /* ============================================================================= THEME TRANSITIONS Smooth background/color transitions on theme change. ============================================================================= */ html { transition: background-color 0.2s ease; } body, header, #mobile-menu { transition: background-color 0.2s ease, color 0.2s ease; } /* ============================================================================= GLOBAL DARK MODE TAILWIND OVERRIDES Override hardcoded Tailwind color utilities so existing templates adapt to dark mode without requiring a full migration to th-* semantic classes. Specificity: [data-theme="dark"] .class = (0,2,0) — beats Tailwind's (0,1,0). ============================================================================= */ /* --- Backgrounds --- */ [data-theme="dark"] .bg-white { background-color: var(--gismc-color-bg-surface); } [data-theme="dark"] .bg-white\/80 { background-color: rgba(30, 41, 59, 0.85); } [data-theme="dark"] .bg-gray-50 { background-color: var(--gismc-color-bg-page); } [data-theme="dark"] .bg-gray-100 { background-color: var(--gismc-color-bg-surface-alt); } [data-theme="dark"] .bg-gray-200 { background-color: var(--gismc-color-bg-surface-alt); } [data-theme="dark"] .bg-blue-100 { background-color: var(--gismc-color-primary-light); } /* --- Text --- */ [data-theme="dark"] .text-gray-900 { color: var(--gismc-color-text-primary); } [data-theme="dark"] .text-gray-800 { color: var(--gismc-color-text-primary); } [data-theme="dark"] .text-gray-700 { color: var(--gismc-color-text-secondary); } [data-theme="dark"] .text-gray-600 { color: var(--gismc-color-text-secondary); } [data-theme="dark"] .text-blue-950 { color: var(--gismc-color-text-heading); } [data-theme="dark"] .text-blue-900 { color: var(--gismc-color-text-heading); } [data-theme="dark"] .text-blue-800 { color: var(--gismc-color-primary-text); } [data-theme="dark"] .text-blue-700 { color: var(--gismc-color-primary-text); } [data-theme="dark"] .text-blue-600 { color: var(--gismc-color-primary); } /* --- Borders --- */ [data-theme="dark"] .border-gray-100 { border-color: var(--gismc-color-border); } [data-theme="dark"] .border-gray-200 { border-color: var(--gismc-color-border); } [data-theme="dark"] .border-gray-300 { border-color: var(--gismc-color-border); } /* --- Shadows --- */ [data-theme="dark"] .shadow-md { box-shadow: var(--gismc-shadow-md); } [data-theme="dark"] .shadow-lg { box-shadow: var(--gismc-shadow-lg); } [data-theme="dark"] .shadow-xl { box-shadow: var(--gismc-shadow-lg); } [data-theme="dark"] .shadow-2xl { box-shadow: var(--gismc-shadow-lg); } /* --- Form elements --- */ [data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]), [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--gismc-color-bg-surface); color: var(--gismc-color-text-primary); border-color: var(--gismc-color-border); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--gismc-color-text-muted); opacity: 1; } /* --- Hover state overrides --- */ [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--gismc-color-bg-surface-alt); } [data-theme="dark"] .hover\:text-blue-900:hover { color: var(--gismc-color-text-primary); } [data-theme="dark"] .hover\:text-blue-800:hover { color: var(--gismc-color-primary); } [data-theme="dark"] .hover\:text-blue-700:hover { color: var(--gismc-color-primary); } [data-theme="dark"] .hover\:text-blue-600:hover { color: var(--gismc-color-primary); } [data-theme="dark"] .hover\:border-blue-600:hover { border-color: var(--gismc-color-primary); }