/* ========================================================= appstorrent — light theme Activated by . PHILOSOPHY: change colors only. Every layout/border/radius/ shadow/transform rule stays in theme.css. We only override CSS variables + the handful of literal hex values that theme.css hard-codes (e.g. #2e2e2e active row, #333 hovers). Accent stays the same blue (#1a73ff) as the dark theme. ========================================================= */ html.theme-light { /* Same blue accent + link blue as dark — per user request */ --accent: #1a73ff; --accent-hover: #3a86ff; --link: #1a73ff; --green: #3dbd5f; --orange: #ff9f1a; --red: #ff453a; /* Inverted surfaces */ --bg: #f5f5f5; /* page background */ --surface: #ffffff; /* sidebar */ --card: #ffffff; --card-hover: #f0f0f0; --card-border: rgba(0,0,0,0.10); --topbar-bg: #ffffff; --input-bg: #ececec; /* Card borders: in dark mode rgba(255,255,255,0.04) is faint but visible because the white tint lifts off the dark surface. On light bg that same alpha against black disappears, so we bump opacity until the card edge reads the same way as the dark version. */ /* Inverted text */ --text: #1a1a1a; --text-dim: #555555; --text-faint: #888888; --text-muted: #9a9a9a; /* Inverted borders */ --border: rgba(0,0,0,0.08); --border-strong: rgba(0,0,0,0.14); /* Softer shadows on light bg */ --shadow-md: 0 6px 20px rgba(0,0,0,0.08); --shadow-lg: 0 16px 40px rgba(0,0,0,0.14); } /* --- Overrides for literal hex values hard-coded in theme.css --- */ /* (can't be reached through CSS variables, so we redeclare here) */ /* Sidebar hamburger indicator chip: theme.css uses rgba(255,255,255,0.04) */ html.theme-light .sn-sub-indicator { background: rgba(0,0,0,0.06); color: var(--text-faint); } /* Flyout submenu popup: theme.css hard-codes background: #2a2a2a */ html.theme-light .sn-flyout { background: #ffffff; border: 1px solid var(--border-strong); } /* Flyout sublink hover: var(--surface) is white in light, same as the flyout bg so hover vanishes. Give it a visible grey instead. */ html.theme-light .sn-sublink:hover { background: #f0f0f0; color: var(--accent); } /* Sidebar active row: theme.css uses #2e2e2e */ html.theme-light .sn-link.active { background: #eaeaea; color: var(--text); } /* Sidebar / view-toggle / filter / pill hovers: theme.css uses #333, #3a3a3a */ html.theme-light .sn-link:hover { background: #f0f0f0; } html.theme-light .view-toggle button.active { background: #e4e4e4; color: var(--text); } html.theme-light .filter-btn:hover { background: #ececec; } html.theme-light .pill-bar .pill:hover { background: #ececec; color: var(--text); } /* Product card cover placeholder: theme.css uses #2a2a2a */ html.theme-light .product-card__cover { background: #ededed; } /* Post-card avatar placeholder: theme.css uses #4a4a4a */ html.theme-light .post-card__avatar { background: #cccccc; } /* Badge update uses literal #4a9eff — swap to the shared accent blue */ html.theme-light .badge-update { background: var(--accent); color: #fff; } /* Download button: theme.css uses #32a652 hover — keep green family */ html.theme-light .btn-download { background: var(--green); color: #fff; } html.theme-light .btn-download:hover { background: #32a652; } /* Inline link hover: theme.css uses #6eb0ff — darken for white bg */ html.theme-light a:hover { color: var(--accent-hover); } /* Hero banner CTA — dark translucent disappears on pink→orange gradient when the rest of the page is light; white translucent reads better */ html.theme-light .hero-banner__cta { background: rgba(255,255,255,0.9); color: #1a1a1a; } html.theme-light .hero-banner__cta:hover { background: #ffffff; color: #1a1a1a; } /* Brand mark — the skull has #1e1e1e cut-outs that vanish on a white sidebar. Flip them to white so the mark reads. */ html.theme-light .sidebar-brand svg circle[fill="#1e1e1e"], html.theme-light .sidebar-brand svg path[fill="#1e1e1e"] { fill: #ffffff; }