/* ============================================================================ VK Investing — theme overlay ---------------------------------------------------------------------------- ADD-ONLY. This file introduces four selectable themes without changing the existing look. The site's current colours live in styles.css :root and stay exactly as they are — that is the "Dark" theme and the default. Selecting a theme sets data-theme on , which overrides the same variables here. Nothing is removed. With no theme chosen, the site renders identically to how it does live today. ============================================================================ */ /* Warm paper — cream stock, navy ink, gold accent (the app's default light). */ html[data-theme="light"] { --bg: #faf6ec; --bg-2: #ffffff; --bg-3: #f2ebdb; --ink: #111726; --ink-2: #3b4354; --ink-muted: #736d5d; --line: rgba(17,23,38,0.10); --line-strong:rgba(17,23,38,0.20); --gold: #8a6420; --gold-2: #a97d2c; --gold-deep: #6b4d17; --gold-dark: #6b4d17; --green: #2f6b3a; --red: #a53b2c; --whatsapp: #1a8f4a; } /* Cool grey-white — blue-grey tint, accent shifts to blue. */ html[data-theme="coolGrey"] { --bg: #f4f6f9; --bg-2: #ffffff; --bg-3: #eaeef3; --ink: #0f1a2e; --ink-2: #3a4658; --ink-muted: #646e7d; --line: rgba(15,26,46,0.10); --line-strong:rgba(15,26,46,0.20); --gold: #1a5f9c; --gold-2: #2f7bc0; --gold-deep: #124770; --gold-dark: #124770; --green: #2f7a4a; --red: #c0392b; --whatsapp: #1a8f4a; } /* Pure white — crisp, high-contrast, gold accent. */ html[data-theme="pureWhite"] { --bg: #ffffff; --bg-2: #ffffff; --bg-3: #f5f5f3; --ink: #111726; --ink-2: #3b4354; --ink-muted: #736e60; --line: rgba(17,23,38,0.09); --line-strong:rgba(17,23,38,0.18); --gold: #8a6420; --gold-2: #a97d2c; --gold-deep: #6b4d17; --gold-dark: #6b4d17; --green: #2f6b3a; --red: #a53b2c; --whatsapp: #1a8f4a; } /* Dark — the site's existing look, named explicitly so the picker can select it back after another theme has been chosen. Mirrors styles.css :root. */ html[data-theme="dark"] { --bg: #0a0e17; --bg-2: #0f1522; --bg-3: #141c2d; --ink: #f3ead8; --ink-2: #d8cdb6; --ink-muted: #8a8674; --line: rgba(243,234,216,0.10); --line-strong:rgba(243,234,216,0.20); --gold: #d4a857; --gold-2: #e8c179; --gold-deep: #8a6b2a; --gold-dark: #8a6b2a; --green: #7fb685; --red: #d77a6e; --whatsapp: #25d366; } /* Smooth the switch so colours ease rather than snap. Scoped to backgrounds, text and borders — never to transforms, so nothing layout-related animates. */ html[data-theme] body, html[data-theme] body * { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ---- Fix hardcoded-dark elements so they follow the theme --------------- Several elements in styles.css use fixed dark hex values (#05080f, #0a0e17) that looked right only in the dark theme. These overrides re-point them at theme variables, but only when a non-dark theme is active — the dark theme still uses its original values, so its look is untouched. */ html[data-theme="light"] .ticker, html[data-theme="coolGrey"] .ticker, html[data-theme="pureWhite"] .ticker { background: var(--bg-3); } html[data-theme="light"] .events-terminal, html[data-theme="coolGrey"] .events-terminal, html[data-theme="pureWhite"] .events-terminal, html[data-theme="light"] .terminal-main, html[data-theme="coolGrey"] .terminal-main, html[data-theme="pureWhite"] .terminal-main { background: var(--bg-3); } html[data-theme="light"] .terminal-filters, html[data-theme="coolGrey"] .terminal-filters, html[data-theme="pureWhite"] .terminal-filters, html[data-theme="light"] .terminal-table thead, html[data-theme="coolGrey"] .terminal-table thead, html[data-theme="pureWhite"] .terminal-table thead, html[data-theme="light"] .terminal-stats, html[data-theme="coolGrey"] .terminal-stats, html[data-theme="pureWhite"] .terminal-stats { background: var(--bg-2); } html[data-theme="light"] .terminal-topbar, html[data-theme="coolGrey"] .terminal-topbar, html[data-theme="pureWhite"] .terminal-topbar { background: linear-gradient(180deg, var(--bg-2), var(--bg-3)); } /* The picker widget */ .vk-theme-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--gold); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(0,0,0,0.28); } .vk-theme-toggle:hover { border-color: var(--gold); } .vk-theme-menu { position: fixed; right: 18px; bottom: 74px; z-index: 9999; width: 210px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 12px; padding: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.35); display: none; } .vk-theme-menu.open { display: block; } .vk-theme-menu h4 { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-muted); padding: 6px 8px 10px; font-weight: 700; } .vk-theme-opt { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; } .vk-theme-opt:hover { background: var(--bg-3); } .vk-theme-opt[aria-current="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); } .vk-theme-swatch { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-strong); position: relative; flex: none; } .vk-theme-swatch .dot { position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px; border-radius: 50%; } .vk-theme-opt .tick { margin-left: auto; color: var(--gold); font-weight: 700; } @media (max-width: 640px) { .vk-theme-toggle { right: 14px; bottom: 78px; } /* clear of any bottom bar */ .vk-theme-menu { right: 14px; bottom: 134px; } }