/** * @file * Platform-wide Dark Mode Theme for Opigno/Aristotle * * Uses CSS custom properties for seamless theme switching. * Toggle via data-theme="dark" on element. */ /* ========================================================================== Light Mode (Default) - Root Variables ========================================================================== */ :root { /* -------- Background Colors -------- */ --bg-primary: #F2EFE9; --bg-secondary: #F5F3EE; --bg-tertiary: #EDEAE3; --bg-elevated: #FFFFFF; --bg-hover: rgba(0, 0, 0, 0.04); /* -------- Text Colors -------- */ --text-primary: #1A1714; --text-secondary: #55504A; --text-tertiary: #9A948D; --text-inverse: #ffffff; /* -------- Border Colors -------- */ --border-default: #E4E0D8; --border-subtle: #EDEAE3; --border-strong: #C8C2B8; /* -------- Brand/Accent Colors -------- */ --accent-primary: #1B7A6E; --accent-primary-hover: #145E55; --accent-success: #16A34A; --accent-danger: #C0392B; --accent-warning: #C47C2B; --accent-info: #2563EB; /* -------- Surface Colors -------- */ --surface-card: #FFFFFF; --surface-modal: #FFFFFF; --surface-overlay: rgba(26, 23, 20, 0.5); --surface-input: #F5F3EE; /* -------- Shadow System -------- */ --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.07); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.14); /* -------- Interaction States -------- */ --focus-ring: 0 0 0 3px color-mix(in srgb, #1B7A6E 12%, transparent); --active-bg: rgba(0, 0, 0, 0.06); /* -------- Component-Specific -------- */ --header-bg: color-mix(in srgb, #FFFFFF 92%, transparent); --sidebar-bg: #F5F3EE; --card-bg: #FFFFFF; --dropdown-bg: #FFFFFF; --tooltip-bg: rgba(26, 23, 20, 0.75); --tooltip-text: #ffffff; /* -------- Scrollbar -------- */ --scrollbar-track: transparent; --scrollbar-thumb: #C8C2B8; --scrollbar-thumb-hover: #9A948D; /* -------- F-Skill Feed Tokens -------- */ --fk-radius: 12px; --fk-radius-sm: 8px; --fk-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); --fk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --fk-teal: #1B7A6E; --fk-teal-dim: #EAF4F2; --fk-teal-mid: #B8D8D4; --fk-amber: #C47C2B; --fk-amber-dim: #FBF3E8; --fk-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --fk-font-serif: 'Fraunces', Georgia, serif; --fk-nav-h: 56px; } /* ========================================================================== Global Body Styling — Matches fskill-feed.html body rule Overrides Bootstrap's body{background:#fff;font-family:system-ui} from main.css ========================================================================== */ body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; background: var(--bg-primary) !important; color: var(--text-primary) !important; font-size: 14px !important; line-height: 1.5 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Heading typography — Fraunces serif from fskill-feed.html */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Fraunces', Georgia, serif !important; letter-spacing: -0.02em; color: var(--text-primary); } /* Card base — matches fskill-feed.html .card */ .content-box { background: var(--surface-card) !important; border: 1px solid var(--border-default) !important; border-radius: var(--fk-radius) !important; box-shadow: var(--shadow-md) !important; transition: background 0.3s, border-color 0.3s; } /* Link default - teal accent */ a { color: var(--accent-primary); transition: color 0.15s; } a:hover { color: var(--accent-primary-hover); } /* ========================================================================== Dark Mode Variables ========================================================================== */ [data-theme="dark"], html.dark-mode { /* -------- Background Colors - Dark -------- */ --bg-primary: #0F0F0E; --bg-secondary: #1A1918; --bg-tertiary: #222120; --bg-elevated: #2A2927; --bg-hover: rgba(255, 255, 255, 0.06); /* -------- Text Colors - Dark -------- */ --text-primary: #F0EDE7; --text-secondary: #A8A29C; --text-tertiary: #68625C; --text-inverse: #0F0F0E; /* -------- Border Colors - Dark -------- */ --border-default: #2E2C2A; --border-subtle: #222120; --border-strong: #44423E; /* -------- Brand/Accent Colors - Dark (Brightened for contrast) -------- */ --accent-primary: #3DBDAD; --accent-primary-hover: #5CCFBF; --accent-success: #4ADE80; --accent-danger: #E05A4A; --accent-warning: #E09440; --accent-info: #60A5FA; /* -------- Surface Colors - Dark -------- */ --surface-card: #1A1918; --surface-modal: #222120; --surface-overlay: rgba(0, 0, 0, 0.7); --surface-input: #1A1918; /* -------- Shadow System - Dark (Deeper shadows) -------- */ --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.15); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6); /* -------- Interaction States - Dark -------- */ --focus-ring: 0 0 0 3px rgba(61, 189, 173, 0.4); --active-bg: rgba(255, 255, 255, 0.1); /* -------- Component-Specific - Dark -------- */ --header-bg: #0F0F0E; --sidebar-bg: #0F0F0E; --card-bg: #1A1918; --dropdown-bg: #222120; --tooltip-bg: rgba(240, 237, 231, 0.9); --tooltip-text: #0F0F0E; /* -------- Scrollbar - Dark -------- */ --scrollbar-track: #1A1918; --scrollbar-thumb: #44423E; --scrollbar-thumb-hover: #68625C; /* -------- F-Skill Feed Tokens - Dark -------- */ --fk-teal-dim: #192C2A; --fk-teal-mid: #2A4844; --fk-amber-dim: #2A1F12; } /* ========================================================================== System Preference Auto-Detection ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Background Colors */ --bg-primary: #0F0F0E; --bg-secondary: #1A1918; --bg-tertiary: #222120; --bg-elevated: #2A2927; --bg-hover: rgba(255, 255, 255, 0.06); /* Text Colors */ --text-primary: #F0EDE7; --text-secondary: #A8A29C; --text-tertiary: #68625C; --text-inverse: #0F0F0E; /* Border Colors */ --border-default: #2E2C2A; --border-subtle: #222120; --border-strong: #44423E; /* Accent Colors */ --accent-primary: #3DBDAD; --accent-primary-hover: #5CCFBF; --accent-success: #4ADE80; --accent-danger: #E05A4A; --accent-warning: #E09440; --accent-info: #60A5FA; /* Surfaces */ --surface-card: #1A1918; --surface-modal: #222120; --surface-overlay: rgba(0, 0, 0, 0.7); --surface-input: #1A1918; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); /* Component */ --header-bg: #0F0F0E; --sidebar-bg: #0F0F0E; --card-bg: #1A1918; --dropdown-bg: #222120; /* Scrollbar */ --scrollbar-track: #1A1918; --scrollbar-thumb: #44423E; --scrollbar-thumb-hover: #68625C; /* F-Skill Feed Tokens */ --fk-teal-dim: #192C2A; --fk-teal-mid: #2A4844; --fk-amber-dim: #2A1F12; } } /* ========================================================================== Global Dark Mode Styles ========================================================================== */ /* Body/HTML */ [data-theme="dark"] body, html.dark-mode body { background-color: var(--bg-primary); color: var(--text-primary); } /* Scrollbar Styling */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--scrollbar-track); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ========================================================================== Layout Components ========================================================================== */ /* Header/Navigation */ [data-theme="dark"] header, [data-theme="dark"] .header, [data-theme="dark"] .top-header, [data-theme="dark"] .main-menu-container { background: var(--header-bg); border-bottom: 1px solid var(--border-default); } [data-theme="dark"] .header a, [data-theme="dark"] .header-main-menu a { color: var(--text-primary); } [data-theme="dark"] .header a:hover, [data-theme="dark"] .header-main-menu a:hover { color: var(--accent-primary); } /* Sidebar */ [data-theme="dark"] .sidebar, [data-theme="dark"] aside, [data-theme="dark"] .region-sidebar { background: var(--sidebar-bg); border-color: var(--border-default); } /* Main Content Area */ [data-theme="dark"] .main-content, [data-theme="dark"] .content-wrapper, [data-theme="dark"] .region-content { background: var(--bg-primary); } /* Footer */ [data-theme="dark"] footer, [data-theme="dark"] .footer { background: var(--bg-secondary); border-top: 1px solid var(--border-default); color: var(--text-secondary); } /* ========================================================================== Content Boxes & Cards ========================================================================== */ [data-theme="dark"] .content-box, [data-theme="dark"] .comment-item__container, [data-theme="dark"] .block-inner, [data-theme="dark"] .card { background: var(--surface-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); } [data-theme="dark"] .content-box:hover { box-shadow: var(--shadow-md); } /* ========================================================================== Feed & Social Components ========================================================================== */ /* Feed Section */ [data-theme="dark"] .feed-section { background: var(--bg-primary); } /* Post Creation Form */ [data-theme="dark"] .comment-form__container { background: var(--surface-card); border: 1px solid var(--border-default); } /* Awards/Attachment List */ [data-theme="dark"] .awards-list__item { border-color: var(--accent-primary); color: var(--text-primary); } [data-theme="dark"] .awards-list__item:hover { background: var(--bg-hover); } /* Post Author Info */ [data-theme="dark"] .comment-item__name a { color: var(--text-primary); } [data-theme="dark"] .comment-item__date { color: var(--text-secondary); } /* Post Body */ [data-theme="dark"] .comment-item__body { color: var(--text-primary); } [data-theme="dark"] .comment-item__body a { color: var(--accent-primary); } /* Post Actions */ [data-theme="dark"] .comment-item__actions { border-top-color: var(--border-default); } [data-theme="dark"] .comment-item__actions a, [data-theme="dark"] .comment-item__actions span { color: var(--text-secondary) !important; } [data-theme="dark"] .comment-item__actions a:hover, [data-theme="dark"] .comment-item__actions span:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } /* Comments */ [data-theme="dark"] .comment-item__comment--list .body { background: var(--bg-tertiary); color: var(--text-primary); } /* New Comment Divider */ [data-theme="dark"] .new-comment-devider::after { background: var(--border-default); } [data-theme="dark"] .new-comment-devider span { background: var(--bg-primary); color: var(--text-secondary); } /* Pinned Post */ [data-theme="dark"] .pinned-post { color: var(--text-secondary); } /* ========================================================================== Reactions & Interactions ========================================================================== */ [data-theme="dark"] .reaction-trigger { border-color: var(--border-default); color: var(--text-secondary); } [data-theme="dark"] .reaction-trigger:hover { background: var(--bg-hover); border-color: var(--border-strong); } [data-theme="dark"] .reaction-picker { background: var(--dropdown-bg) !important; border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); } [data-theme="dark"] .reaction-picker::after { background: var(--dropdown-bg); } [data-theme="dark"] .reaction-summary, [data-theme="dark"] .reaction-count { color: var(--text-secondary); } [data-theme="dark"] .reaction-count:hover { color: var(--accent-primary); } /* ========================================================================== Repost/Quote Styles ========================================================================== */ [data-theme="dark"] .repost-embed { background: var(--bg-tertiary); border-color: var(--border-default); } [data-theme="dark"] .repost-embed:hover { background: var(--bg-elevated); } [data-theme="dark"] .repost-embed__author { color: var(--text-primary); } [data-theme="dark"] .repost-embed__time { color: var(--text-secondary); } [data-theme="dark"] .repost-embed__text { color: var(--text-primary); } [data-theme="dark"] .repost-embed--unavailable { background: var(--bg-tertiary); } /* ========================================================================== Forms & Inputs ========================================================================== */ [data-theme="dark"] .form-text, [data-theme="dark"] .form-textarea, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="search"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--surface-input); border: 1px solid var(--border-default); color: var(--text-primary); } [data-theme="dark"] .form-text:focus, [data-theme="dark"] .form-textarea:focus, [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--accent-primary); box-shadow: var(--focus-ring); } [data-theme="dark"] .form-text::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-tertiary); } [data-theme="dark"] label { color: var(--text-secondary); } /* ========================================================================== Buttons ========================================================================== */ [data-theme="dark"] .btn-primary { background: var(--accent-primary); color: var(--text-inverse); } [data-theme="dark"] .btn-primary:hover { background: var(--accent-primary-hover); } [data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-primary); } [data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn-outline:hover { background: var(--bg-hover); border-color: var(--accent-primary); } [data-theme="dark"] .btn-success { background: var(--accent-success); } [data-theme="dark"] .btn-danger { background: var(--accent-danger); } [data-theme="dark"] .btn-warning { background: var(--accent-warning); color: var(--text-inverse); } /* ========================================================================== Dropdowns & Menus ========================================================================== */ [data-theme="dark"] .dropdown-menu { background: var(--dropdown-bg); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); } [data-theme="dark"] .dropdown-item { color: var(--text-primary); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background: var(--bg-hover); color: var(--text-primary); } [data-theme="dark"] .dropdown-divider { border-color: var(--border-default); } /* ========================================================================== Modals & Dialogs ========================================================================== */ [data-theme="dark"] .ui-dialog, [data-theme="dark"] .modal-content { background: var(--surface-modal); border: 1px solid var(--border-default); box-shadow: var(--shadow-xl); } [data-theme="dark"] .ui-dialog-titlebar, [data-theme="dark"] .modal-header { background: var(--bg-tertiary); border-bottom: 1px solid var(--border-default); color: var(--text-primary); } [data-theme="dark"] .ui-dialog-content, [data-theme="dark"] .modal-body { color: var(--text-primary); } [data-theme="dark"] .modal-footer { background: var(--bg-tertiary); border-top: 1px solid var(--border-default); } /* Close button */ [data-theme="dark"] .ui-dialog-titlebar-close, [data-theme="dark"] .close { color: var(--text-secondary); } [data-theme="dark"] .ui-dialog-titlebar-close:hover, [data-theme="dark"] .close:hover { color: var(--text-primary); } /* ========================================================================== Alerts & Messages ========================================================================== */ [data-theme="dark"] .messages--status { background: rgba(108, 186, 103, 0.15); border-color: var(--accent-success); color: var(--accent-success); } [data-theme="dark"] .messages--warning { background: rgba(210, 153, 34, 0.15); border-color: var(--accent-warning); color: var(--accent-warning); } [data-theme="dark"] .messages--error { background: rgba(248, 81, 73, 0.15); border-color: var(--accent-danger); color: var(--accent-danger); } /* ========================================================================== Profile & User Components ========================================================================== */ [data-theme="dark"] .profile-pic { border: 2px solid var(--border-subtle); } [data-theme="dark"] .user-info, [data-theme="dark"] .user-name { color: var(--text-primary); } /* ========================================================================== Dashboard Specific ========================================================================== */ [data-theme="dark"] .dashboard-block { background: var(--bg-tertiary) !important; color: var(--text-primary); } [data-theme="dark"] .dashboard-drupal-block { background: var(--surface-card); border: 1px solid var(--border-default); } /* ========================================================================== Tables ========================================================================== */ [data-theme="dark"] table { background: var(--surface-card); } [data-theme="dark"] th { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-default); } [data-theme="dark"] td { color: var(--text-primary); border-color: var(--border-default); } [data-theme="dark"] tr:hover td { background: var(--bg-hover); } /* ========================================================================== Link Previews ========================================================================== */ [data-theme="dark"] .post-text-preview-container, [data-theme="dark"] .link-preview-card { background: var(--bg-tertiary); border-color: var(--border-default); } [data-theme="dark"] .link-preview-title { color: var(--text-primary); } [data-theme="dark"] .link-preview-description { color: var(--text-secondary); } /* ========================================================================== Poll Styles ========================================================================== */ [data-theme="dark"] .poll-option { background: var(--bg-tertiary); border-color: var(--border-default); } [data-theme="dark"] .poll-option:hover { background: var(--bg-elevated); } /* ========================================================================== Theme Toggle Button ========================================================================== */ .theme-toggle { position: relative; width: 40px; height: 40px; border: none; background: var(--bg-tertiary); border-radius: 50%; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; display: flex; align-items: center; justify-content: center; padding: 0; } .theme-toggle:hover { background: var(--bg-hover); transform: scale(1.05); } .theme-toggle:focus { outline: none; box-shadow: var(--focus-ring); } .theme-icon--light, .theme-icon--dark { position: absolute; font-size: 20px; transition: transform 0.4s ease, opacity 0.3s ease; } /* Light mode: show sun */ .theme-icon--light { opacity: 1; transform: rotate(0deg) scale(1); color: #f59e0b; } .theme-icon--dark { opacity: 0; transform: rotate(-90deg) scale(0.5); color: #fbbf24; } /* Dark mode: show moon */ [data-theme="dark"] .theme-icon--light { opacity: 0; transform: rotate(90deg) scale(0.5); } [data-theme="dark"] .theme-icon--dark { opacity: 1; transform: rotate(0deg) scale(1); } /* Toggle button animation */ .theme-toggle.transitioning .theme-icon--light, .theme-toggle.transitioning .theme-icon--dark { animation: themeIconBounce 0.4s ease; } @keyframes themeIconBounce { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } /* ========================================================================== Smooth Transitions ========================================================================== */ /* Global transition for theme switching */ html { transition: background-color 0.3s ease, color 0.3s ease; } body, .content-box, .header, .sidebar, .dropdown-menu, .modal-content, .ui-dialog, input, textarea, select, button { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease, box-shadow 0.2s ease; } /* ========================================================================== Utility Classes ========================================================================== */ .dark-only { display: none; } [data-theme="dark"] .dark-only { display: block; } [data-theme="dark"] .light-only { display: none; } .force-dark { background: var(--bg-primary) !important; color: var(--text-primary) !important; }