/* * Loforo Dark Mode * Approach: CSS custom properties on :root (light defaults), * overridden by [data-theme="dark"] on . * @media prefers-color-scheme: dark applies dark vars when no explicit * override is set (i.e. user hasn't toggled manually). */ /* ─── Light defaults (also used when data-theme="light") ─────────────────── */ :root { --bg: #f2f2f2; --bg-surface: #ffffff; --bg-surface-2: #f9f9f9; --bg-surface-3: #f2f2f2; --bg-header: rgba(255, 255, 255, 0.92); --bg-input: #ffffff; --bg-code: #f7f7f7; --bg-dropdown: #f9f9f9; --bg-tabs: rgba(242, 242, 242, 0.92); --bg-footer: rgba(255, 255, 255, 0.7); --bg-hover: rgba(152, 216, 236, 0.1); --bg-nav-hover: rgba(224, 224, 224, 0.15); --bg-btn-follow: #eeeeee; --bg-alert: rgba(252, 248, 227, 0.6); --bg-site-header: #fdfdfd; --text: #444444; --text-heading: #1a202c; --text-muted: rgba(0, 0, 0, 0.5); --text-muted-2: #727272; --text-nav: rgba(33, 33, 33, 0.8); --text-nav-icon: rgba(33, 33, 33, 0.65); --text-subhead: #aaaaaa; --text-small-label: #666666; --text-author: #666666; --link: rgb(33, 150, 243); --link-heading: rgba(33, 33, 33, 0.9); --link-heading-hover: rgba(25, 118, 210, 0.9); --link-site: #1a73e8; --link-user: #3b5999; --border: #eeeeee; --border-2: #cccccc; --border-input: #cccccc; --border-3: #dbdbdb; --border-dashed: #dddddd; --border-archive: #d0d0d0; --shadow-header: rgba(128, 128, 128, 0.15); --shadow-article: rgba(0, 0, 0, 0.08); --shadow-card: rgba(34, 25, 25, 0.1); --accent: rgb(28, 184, 65); --accent-border: rgba(28, 184, 65, 0.6); --nav-active-border: rgba(28, 184, 65, 0.6); --toggle-icon: "🌙"; } /* ─── Dark overrides ──────────────────────────────────────────────────────── */ [data-theme="dark"], html[data-theme="dark"] { --bg: #0f1117; --bg-surface: #1c1f26; --bg-surface-2: #242830; --bg-surface-3: #0f1117; --bg-header: rgba(15, 17, 23, 0.96); --bg-input: #1c1f26; --bg-code: #181b22; --bg-dropdown: #1c1f26; --bg-tabs: rgba(15, 17, 23, 0.95); --bg-footer: rgba(28, 31, 38, 0.7); --bg-hover: rgba(255, 255, 255, 0.04); --bg-nav-hover: rgba(255, 255, 255, 0.07); --bg-btn-follow: #2a2d35; --bg-alert: rgba(60, 50, 20, 0.5); --bg-site-header: #1c1f26; --text: #c8cdd8; --text-heading: #e2e6f0; --text-muted: rgba(255, 255, 255, 0.42); --text-muted-2: #8892a4; --text-nav: rgba(210, 215, 225, 0.88); --text-nav-icon: rgba(200, 210, 225, 0.6); --text-subhead: #4a5568; --text-small-label: #8892a4; --text-author: #8892a4; --link: #58a6ff; --link-heading: #e2e6f0; --link-heading-hover: #58a6ff; --link-site: #58a6ff; --link-user: #7eb8f7; --border: #262b35; --border-2: #363c4a; --border-input: #363c4a; --border-3: #2a2f3a; --border-dashed: #2e3441; --border-archive: #363c4a; --shadow-header: rgba(0, 0, 0, 0.5); --shadow-article: rgba(0, 0, 0, 0.3); --shadow-card: rgba(0, 0, 0, 0.4); --accent: rgb(35, 197, 75); --accent-border: rgba(35, 197, 75, 0.5); --nav-active-border: rgba(35, 197, 75, 0.6); --toggle-icon: "☀"; } /* ─── Auto dark from OS preference (when no manual override is set) ───────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1117; --bg-surface: #1c1f26; --bg-surface-2: #242830; --bg-surface-3: #0f1117; --bg-header: rgba(15, 17, 23, 0.96); --bg-input: #1c1f26; --bg-code: #181b22; --bg-dropdown: #1c1f26; --bg-tabs: rgba(15, 17, 23, 0.95); --bg-footer: rgba(28, 31, 38, 0.7); --bg-hover: rgba(255, 255, 255, 0.04); --bg-nav-hover: rgba(255, 255, 255, 0.07); --bg-btn-follow: #2a2d35; --bg-alert: rgba(60, 50, 20, 0.5); --bg-site-header: #1c1f26; --text: #c8cdd8; --text-heading: #e2e6f0; --text-muted: rgba(255, 255, 255, 0.42); --text-muted-2: #8892a4; --text-nav: rgba(210, 215, 225, 0.88); --text-nav-icon: rgba(200, 210, 225, 0.6); --text-subhead: #4a5568; --text-small-label: #8892a4; --text-author: #8892a4; --link: #58a6ff; --link-heading: #e2e6f0; --link-heading-hover: #58a6ff; --link-site: #58a6ff; --link-user: #7eb8f7; --border: #262b35; --border-2: #363c4a; --border-input: #363c4a; --border-3: #2a2f3a; --border-dashed: #2e3441; --border-archive: #363c4a; --shadow-header: rgba(0, 0, 0, 0.5); --shadow-article: rgba(0, 0, 0, 0.3); --shadow-card: rgba(0, 0, 0, 0.4); --accent: rgb(35, 197, 75); --accent-border: rgba(35, 197, 75, 0.5); --nav-active-border: rgba(35, 197, 75, 0.6); } } /* ─── Apply vars to elements ──────────────────────────────────────────────── */ /* Base */ body { background-color: var(--bg); color: var(--text); } /* shared.css overrides */ .a-cell { border-bottom-color: var(--border); } .join-cta { background: var(--bg-surface); border-color: var(--border-2); } .join-cta p { color: var(--text-muted-2); } /* style.css overrides */ body > header { background-color: var(--bg-header); box-shadow: 0 0 20px var(--shadow-header); } .lf-container { background-color: var(--bg-surface); } header .lf-container { background-color: transparent; } h1, h2, h3, h4, h5, h6 { color: var(--text-heading); } h1 a, h2 a, h3 a, h4 a { color: var(--link-heading); } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover { color: var(--link-heading-hover); } a { color: var(--link); } label, small { color: var(--text-muted); } hr { border-top-color: var(--border); border-bottom-color: transparent; } blockquote { border-left-color: var(--border-2); } pre, code { background-color: var(--bg-code); color: var(--text); } [data-theme="dark"] .alert { background-color: var(--bg-alert); border-color: #6b5a2e; color: var(--text-muted-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .alert { background-color: var(--bg-alert); border-color: #6b5a2e; color: var(--text-muted-2); } } nav ul li a { color: var(--text-nav); } nav ul li a .icon { color: var(--text-nav-icon); } nav ul li a:hover, nav ul li a:active, nav ul li a:focus, nav .selected { background-color: var(--bg-nav-hover); border-bottom-color: var(--nav-active-border); color: var(--text-heading); } .pure-menu-children { background-color: var(--bg-dropdown); border-color: var(--border-2); } /* Pure menu links in dropdown */ .pure-menu-link { color: var(--text-nav); } .pure-menu-link:hover, .pure-menu-active > .pure-menu-link, .pure-menu-link:focus { background-color: var(--bg-nav-hover); color: var(--text-heading); } /* Pure buttons — dark mode only */ [data-theme="dark"] .pure-button:not(.button-success):not(.button-error):not(.button-warning):not(.button-secondary):not(.pure-button-primary):not(.pure-button-selected), [data-theme="dark"] .pure-button:not(.button-success):not(.button-error):not(.button-warning):not(.button-secondary):not(.pure-button-primary):not(.pure-button-selected):hover, [data-theme="dark"] .pure-button:not(.button-success):not(.button-error):not(.button-warning):not(.button-secondary):not(.pure-button-primary):not(.pure-button-selected):focus { background-color: var(--bg-surface-2); color: var(--text); background-image: none; filter: none; } [data-theme="dark"] .button-generic { border-color: var(--border-2); color: var(--text-nav); } [data-theme="dark"] .button-generic:hover { border-color: var(--border-2); } [data-theme="dark"] .button-success:hover { background-color: var(--bg-surface); color: var(--accent); border-color: var(--accent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pure-button:not(.button-success):not(.button-error):not(.button-warning):not(.button-secondary):not(.pure-button-primary):not(.pure-button-selected) { background-color: var(--bg-surface-2); color: var(--text); background-image: none; filter: none; } :root:not([data-theme="light"]) .button-generic { border-color: var(--border-2); color: var(--text-nav); } :root:not([data-theme="light"]) .button-generic:hover { border-color: var(--border-2); } :root:not([data-theme="light"]) .button-success:hover { background-color: var(--bg-surface); color: var(--accent); border-color: var(--accent); } } /* Pure form inputs */ .pure-form input[type=text], .pure-form input[type=email], .pure-form input[type=password], .pure-form input[type=search], .pure-form input[type=url], .pure-form input[type=number], .pure-form textarea, .pure-form select { background-color: var(--bg-input); border-color: var(--border-input); color: var(--text); box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); } .pure-form select { background-color: var(--bg-input); border-color: var(--border-input); color: var(--text); } /* Pure table — dark mode only */ [data-theme="dark"] .pure-table { border-color: var(--border-2); } [data-theme="dark"] .pure-table td, [data-theme="dark"] .pure-table th { border-left-color: var(--border-2); border-bottom-color: var(--border-2); color: var(--text); background-color: transparent; } [data-theme="dark"] .pure-table thead { background-color: var(--bg-surface-2); color: var(--text-heading); } [data-theme="dark"] .pure-table-horizontal td, [data-theme="dark"] .pure-table-horizontal th { border-bottom-color: var(--border-2); } [data-theme="dark"] .pure-table-striped tr:nth-child(2n-1) td { background-color: var(--bg-surface-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pure-table { border-color: var(--border-2); } :root:not([data-theme="light"]) .pure-table td, :root:not([data-theme="light"]) .pure-table th { border-left-color: var(--border-2); border-bottom-color: var(--border-2); color: var(--text); background-color: transparent; } :root:not([data-theme="light"]) .pure-table thead { background-color: var(--bg-surface-2); color: var(--text-heading); } :root:not([data-theme="light"]) .pure-table-horizontal td, :root:not([data-theme="light"]) .pure-table-horizontal th { border-bottom-color: var(--border-2); } } /* Subhead */ .subhead { color: var(--text-subhead); border-bottom-color: var(--border); } /* Tabs (explore feed tabs) */ .tabs { background: var(--bg-tabs); } /* Footer */ footer { background-color: var(--bg-footer); } /* Hover bg */ .hover-bg:hover { background-color: var(--bg-hover); } /* Files */ #files-contain .item { border-color: var(--border); background-color: var(--bg-surface-2); } /* Stats */ .boxed .box-label { color: var(--text-muted-2); } .notify-date { color: var(--text-muted-2); } /* site.css overrides */ #lf-site article { background-color: var(--bg-surface); box-shadow: 0 1px 4px var(--shadow-article); } #lf-site header { background-color: var(--bg-site-header); } #lf-site a { color: var(--link-site); } #lf-site hr { border-color: var(--border-dashed); } #lf-site footer.site { background-color: var(--bg-surface); border-color: var(--border-2); } #lf-site article .author_name a { color: var(--text-author); } #lf-site article h1 a { color: var(--link-user); } #lf-site .post-footer { color: var(--text-small-label); } #lf-site .post-footer a { color: var(--text-small-label) !important; } #lf-site .post-controls { border-top-color: var(--border); } #lf-site button { color: var(--text-muted-2); } #lf-site button:hover { background-color: var(--bg-surface-2); } #lf-site .post-control-report { color: var(--text-subhead); } #lf-site .tags a { background-color: var(--bg-surface-2); color: var(--link-user); } #lf-site .reposted_via { color: var(--text-small-label); } /* Button states */ .btn { color: var(--text-muted-2); } .btn-follow { background-color: var(--bg-btn-follow) !important; border-color: var(--border-2) !important; } .btn-block { background-color: var(--bg-btn-follow) !important; border-color: var(--border-2) !important; } /* Button dropdown */ .button-dropdown ul { background-color: var(--bg-dropdown); box-shadow: 0 0 4px var(--shadow-card); } .button-dropdown ul li:hover { background-color: var(--bg-surface-2); } .button-dropdown ul a { color: var(--text); } /* User/group lists */ .user_list { background-color: rgba(255,255,255,0.02); } .user_list .user_item { border-bottom-color: var(--border); } .user_list .user_link { color: var(--text-small-label); } .user_list .user_data small { color: var(--text-subhead); } .group_list { background-color: var(--bg-surface); } .group_list .group_item { border-bottom-color: var(--border); } /* Friends bar */ .friends-bar { background-color: rgba(255,255,255,0.03); } #lf-site .friends-bar a { color: var(--link-user); } /* Friend list */ .friend-list { background-color: rgba(255,255,255,0.03); } /* Post card */ .post-card { background-color: rgba(255,255,255,0.03); border-color: var(--border); } .post-card .author a { color: var(--text-small-label); } /* Archive */ .archive-month-header { color: var(--text-heading); border-bottom-color: var(--border); } .archive-thumb { background-color: var(--bg-surface-2); border-color: var(--border-archive); } .archive-thumb-text { color: var(--text-small-label); background-color: var(--bg-surface-2); } .archive-thumb-placeholder { background: linear-gradient(135deg, var(--bg-surface-2) 0%, var(--bg-surface-3) 100%); color: var(--text-subhead); } .archive-loader { color: var(--text-small-label); } .archive-loader-spinner { border-color: var(--border-2); border-top-color: var(--text-small-label); } /* Tagify dark */ [data-theme="dark"] .tagify, html[data-theme="dark"] .tagify { --tags-border-color: #363c4a; --tags-hover-border-color: #4a5168; --tag-bg: #2a2d35; --tag-hover: #323642; --tag-text-color: #c8cdd8; --tag-remove-btn-color: #c8cdd8; --input-color: #c8cdd8; --placeholder-color: rgba(200, 205, 216, 0.35); --tagify-dd-bg-color: #1c1f26; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tagify { --tags-border-color: #363c4a; --tags-hover-border-color: #4a5168; --tag-bg: #2a2d35; --tag-hover: #323642; --tag-text-color: #c8cdd8; --tag-remove-btn-color: #c8cdd8; --input-color: #c8cdd8; --placeholder-color: rgba(200, 205, 216, 0.35); --tagify-dd-bg-color: #1c1f26; } } /* Header nav text — needs explicit color fix for dark mode */ [data-theme="dark"] body > header, [data-theme="dark"] nav ul li a, [data-theme="dark"] .lf-logo-text { color: var(--text-nav); } /* Log In / Sign Up buttons in header */ [data-theme="dark"] .button-generic { border-color: rgba(255,255,255,0.25); color: rgba(220,220,220,0.85); background-color: transparent; } [data-theme="dark"] .button-success { background-color: var(--accent); border-color: var(--accent-border); color: #fff; } [data-theme="dark"] .button-success:hover { background-color: transparent; color: var(--accent); border-color: var(--accent); } /* pure-button default (Log In / generic unstyled buttons) */ [data-theme="dark"] .pure-button:not(.button-success):not(.button-error):not(.button-warning):not(.button-secondary):not(.pure-button-primary):not(.pure-button-selected) { background-color: var(--bg-surface-2); color: var(--text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .button-generic { border-color: rgba(255,255,255,0.25); color: rgba(220,220,220,0.85); background-color: transparent; } :root:not([data-theme="light"]) .button-success { background-color: var(--accent); border-color: var(--accent-border); color: #fff; } :root:not([data-theme="light"]) .pure-button:not(.button-success):not(.button-error):not(.button-warning):not(.button-secondary):not(.pure-button-primary):not(.pure-button-selected) { background-color: var(--bg-surface-2); color: var(--text); } } /* Dark mode toggle button in dropdown */ #dark-mode-toggle { cursor: pointer; user-select: none; width: 100%; } /* Loforo wordmark image — invert to white in dark mode */ [data-theme="dark"] .lf-logo-text, [data-theme="dark"] img.lf-logo-text { filter: invert(1) brightness(1.8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lf-logo-text, :root:not([data-theme="light"]) img.lf-logo-text { filter: invert(1) brightness(1.8); } } /* Comment form textarea */ [data-theme="dark"] #lf-site textarea, [data-theme="dark"] #lf-site input[type=text], [data-theme="dark"] .post-control-comments textarea, [data-theme="dark"] .post-control-comments input[type=text] { background-color: var(--bg-input); color: var(--text); border-color: var(--border-input) !important; } [data-theme="dark"] #lf-site textarea::placeholder, [data-theme="dark"] .post-control-comments textarea::placeholder { color: var(--text-muted); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #lf-site textarea, :root:not([data-theme="light"]) #lf-site input[type=text], :root:not([data-theme="light"]) .post-control-comments textarea, :root:not([data-theme="light"]) .post-control-comments input[type=text] { background-color: var(--bg-input); color: var(--text); border-color: var(--border-input) !important; } :root:not([data-theme="light"]) #lf-site textarea::placeholder, :root:not([data-theme="light"]) .post-control-comments textarea::placeholder { color: var(--text-muted); } } /* Comment text/date colors */ [data-theme="dark"] .comment-text { color: var(--text); } [data-theme="dark"] .comment-date { color: var(--text-muted) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .comment-text { color: var(--text); } :root:not([data-theme="light"]) .comment-date { color: var(--text-muted) !important; } } /* Comment separator */ .comment-item { border-bottom-color: var(--border); } [data-theme="dark"] .comment-item { border-bottom-color: rgba(255,255,255,0.06) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .comment-item { border-bottom-color: rgba(255,255,255,0.06) !important; } } /* Site switcher dropdown in nav menu */ [data-theme="dark"] .site_dropdown { background-color: var(--bg-input); color: var(--text); border-color: var(--border-input); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site_dropdown { background-color: var(--bg-input); color: var(--text); border-color: var(--border-input); } }