/* ========================================================================== HobbyManager — "IDE" theme family Two palettes (Monokai / Darcula) styled after well-known code-editor color schemes: dark panel background, monospace type, a saturated syntax-color accent palette - but modern/soft chrome (rounded corners, real elevation shadows, filled badge pills), unlike the flat/bracket-quoted Terminal theme family (theme-terminal.css). Different design language on purpose: these are "your IDE at night," not "a mainframe console." Same retinting architecture as theme.css/theme-terminal.css: every rule is scoped so it's inert unless data-bs-theme is exactly "monokai" or "darcula" (a plain comma-separated selector list here, not an attribute prefix like Terminal's "terminal_" - there are only two palettes and no natural shared prefix). Load AFTER theme.css/theme-dark.css/theme-terminal.css/ main.css. Learned from the Terminal theme's first pass (confirmed against a real render, not just reasoned about): Bootstrap's OWN .bg-white/.bg-light/ .bg-body-tertiary/.text-dark utility classes are generated as rgba(var(--bs-X-rgb), opacity) - retinting only the hex --bs-* variable is not enough, the matching --bs-*-rgb variable must be set too, or /the sidenav silently keep rendering Bootstrap's stock light default. Section 1 below sets both for every color from the start. ========================================================================== */ /* -------------------------------------------------------------------------- 0. TYPEFACE Fira Code (Monokai) / JetBrains Mono (Darcula) - loaded via in layout.html, same as Open Sans/Share Tech Mono above them; real monospace fallbacks first in the stack so this still looks right with zero network access. -------------------------------------------------------------------------- */ [data-bs-theme="monokai"], [data-bs-theme="darcula"] { --ide-font: var(--ide-font-family, ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace); } /* -------------------------------------------------------------------------- 1. ROOT TOKENS — Bootstrap variables retinted from the --ide-* palette. A palette block (section 4) only ever needs to redefine --ide-*; it never has to touch a --bs-* variable directly. -------------------------------------------------------------------------- */ [data-bs-theme="monokai"], [data-bs-theme="darcula"] { --bs-body-font-family: var(--ide-font); --bs-font-monospace: var(--ide-font); --bs-primary: var(--ide-primary); --bs-primary-rgb: var(--ide-primary-rgb); --bs-secondary: var(--ide-gray); --bs-secondary-rgb: var(--ide-gray-rgb); --bs-secondary-text-emphasis: var(--ide-gray); --bs-secondary-bg-subtle: rgba(var(--ide-gray-rgb), .18); --bs-secondary-border-subtle: var(--ide-gray); --bs-info: var(--ide-info); --bs-info-rgb: var(--ide-info-rgb); --bs-info-text-emphasis: var(--ide-info); --bs-info-bg-subtle: rgba(var(--ide-info-rgb), .18); --bs-info-border-subtle: var(--ide-info); --bs-success: var(--ide-success); --bs-success-rgb: var(--ide-success-rgb); --bs-success-text-emphasis: var(--ide-success); --bs-success-bg-subtle: rgba(var(--ide-success-rgb), .18); --bs-success-border-subtle: var(--ide-success); --bs-danger: var(--ide-danger); --bs-danger-rgb: var(--ide-danger-rgb); --bs-danger-text-emphasis: var(--ide-danger); --bs-danger-bg-subtle: rgba(var(--ide-danger-rgb), .18); --bs-danger-border-subtle: var(--ide-danger); --bs-warning: var(--ide-warning); --bs-warning-rgb: var(--ide-warning-rgb); --bs-warning-text-emphasis: var(--ide-warning); --bs-warning-bg-subtle: rgba(var(--ide-warning-rgb), .18); --bs-warning-border-subtle: var(--ide-warning); /* -rgb companions for the surfaces Bootstrap's own utilities read via rgba(var(--bs-X-rgb), opacity) - see the file header. */ --bs-body-bg-rgb: var(--ide-bg-rgb); --bs-body-color-rgb: var(--ide-fg-bright-rgb); --bs-secondary-bg-rgb: var(--ide-bg-raised-rgb); --bs-tertiary-bg-rgb: var(--ide-bg-raised-rgb); --bs-body-bg: var(--ide-bg); --bs-body-color: var(--ide-fg); --bs-secondary-bg: var(--ide-bg-raised); --bs-tertiary-bg: var(--ide-bg-raised); --bs-secondary-color: var(--ide-fg-dim); --bs-emphasis-color: var(--ide-fg-bright); --bs-border-color: var(--ide-border); --bs-border-color-translucent: rgba(var(--ide-fg-bright-rgb), .09); /* Moderate rounding - a code editor panel, not a mainframe console */ --bs-border-radius: .375rem; --bs-border-radius-sm: .25rem; --bs-border-radius-lg: .5rem; --bs-border-radius-xl: .75rem; --bs-border-radius-pill: 50rem; /* Real elevation, softened for a dark surface (same reasoning as theme-dark.css's own shadow re-tuning) */ --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --bs-box-shadow: 0 2px 8px rgba(0, 0, 0, .35); --bs-box-shadow-lg: 0 6px 20px rgba(0, 0, 0, .4); --bs-link-color: var(--ide-primary); --bs-link-hover-color: var(--ide-fg-bright); --bs-focus-ring-color: rgba(var(--ide-primary-rgb), .35); } [data-bs-theme="monokai"] body, [data-bs-theme="darcula"] body { background-color: var(--bs-body-bg); font-family: var(--ide-font); } /* -------------------------------------------------------------------------- 2. HARDCODED-SURFACE PATCHES Same fixes theme-dark.css/theme-terminal.css already needed, for the same reason: these Bootstrap utility classes ship their own !important and don't read a --bs-* variable this theme retints elsewhere. -------------------------------------------------------------------------- */ [data-bs-theme="monokai"] .bg-white, [data-bs-theme="darcula"] .bg-white, [data-bs-theme="monokai"] .card, [data-bs-theme="darcula"] .card, [data-bs-theme="monokai"] .offcanvas, [data-bs-theme="darcula"] .offcanvas, [data-bs-theme="monokai"] .modal-content, [data-bs-theme="darcula"] .modal-content, [data-bs-theme="monokai"] .dropdown-menu, [data-bs-theme="darcula"] .dropdown-menu { background-color: var(--ide-bg-raised) !important; border-color: var(--bs-border-color) !important; color: var(--ide-fg-bright); } [data-bs-theme="monokai"] .bg-light, [data-bs-theme="darcula"] .bg-light { background-color: var(--ide-bg-raised) !important; } [data-bs-theme="monokai"] .text-dark, [data-bs-theme="darcula"] .text-dark, [data-bs-theme="monokai"] .text-dark-emphasis, [data-bs-theme="darcula"] .text-dark-emphasis { color: var(--ide-fg-bright) !important; } [data-bs-theme="monokai"] input:-webkit-autofill, [data-bs-theme="darcula"] input:-webkit-autofill, [data-bs-theme="monokai"] input:-webkit-autofill:hover, [data-bs-theme="darcula"] input:-webkit-autofill:hover, [data-bs-theme="monokai"] input:-webkit-autofill:focus, [data-bs-theme="darcula"] input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ide-fg-bright); -webkit-box-shadow: 0 0 0 1000px var(--ide-bg-raised) inset; box-shadow: 0 0 0 1000px var(--ide-bg-raised) inset; caret-color: var(--ide-primary); transition: background-color 9999s ease-in-out 0s; } /* -------------------------------------------------------------------------- 3. COMPONENT OVERRIDES -------------------------------------------------------------------------- */ [data-bs-theme="monokai"] .card, [data-bs-theme="darcula"] .card, [data-bs-theme="monokai"] .offcanvas, [data-bs-theme="darcula"] .offcanvas { box-shadow: var(--bs-box-shadow-sm) !important; } [data-bs-theme="monokai"] .card-header, [data-bs-theme="darcula"] .card-header { background-color: var(--ide-bg-raised) !important; border-bottom: 1px solid var(--bs-border-color) !important; } [data-bs-theme="monokai"] .btn, [data-bs-theme="darcula"] .btn { font-family: var(--ide-font); font-weight: 500; box-shadow: none !important; } [data-bs-theme="monokai"] .btn-primary, [data-bs-theme="darcula"] .btn-primary { --bs-btn-color: var(--ide-bg); --bs-btn-bg: var(--ide-primary); --bs-btn-border-color: var(--ide-primary); --bs-btn-hover-bg: var(--ide-fg-bright); --bs-btn-hover-border-color: var(--ide-fg-bright); --bs-btn-hover-color: var(--ide-bg); --bs-btn-active-bg: var(--ide-fg-bright); --bs-btn-active-border-color: var(--ide-fg-bright); } [data-bs-theme="monokai"] .btn-outline-primary, [data-bs-theme="darcula"] .btn-outline-primary { --bs-btn-color: var(--ide-primary); --bs-btn-border-color: var(--ide-primary); --bs-btn-hover-bg: var(--ide-primary); --bs-btn-hover-border-color: var(--ide-primary); --bs-btn-hover-color: var(--ide-bg); } [data-bs-theme="monokai"] .btn-outline-danger, [data-bs-theme="darcula"] .btn-outline-danger { --bs-btn-color: var(--ide-danger); --bs-btn-border-color: var(--ide-danger); --bs-btn-hover-bg: var(--ide-danger); --bs-btn-hover-border-color: var(--ide-danger); } [data-bs-theme="monokai"] .btn-light, [data-bs-theme="darcula"] .btn-light { --bs-btn-color: var(--ide-fg-bright); --bs-btn-bg: var(--ide-bg-raised); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--ide-bg); } [data-bs-theme="monokai"] .form-select, [data-bs-theme="darcula"] .form-select, [data-bs-theme="monokai"] .form-control, [data-bs-theme="darcula"] .form-control { background-color: var(--ide-bg) !important; border-color: var(--bs-border-color) !important; color: var(--ide-fg-bright) !important; font-family: var(--ide-font); caret-color: var(--ide-primary); } [data-bs-theme="monokai"] .form-select:focus, [data-bs-theme="darcula"] .form-select:focus, [data-bs-theme="monokai"] .form-control:focus, [data-bs-theme="darcula"] .form-control:focus { border-color: var(--ide-primary) !important; box-shadow: 0 0 0 3px rgba(var(--ide-primary-rgb), .25) !important; } [data-bs-theme="monokai"] .form-control::placeholder, [data-bs-theme="darcula"] .form-control::placeholder { color: var(--ide-fg-dim); opacity: 1; } /* Tables: a soft tinted-accent row hover, not full reverse-video - this family reads as "editor panel," not "terminal selection." */ [data-bs-theme="monokai"] .table, [data-bs-theme="darcula"] .table { --bs-table-bg: transparent; --bs-table-color: var(--ide-fg); --bs-table-border-color: var(--bs-border-color); font-family: var(--ide-font); } [data-bs-theme="monokai"] .table thead th, [data-bs-theme="darcula"] .table thead th { color: var(--ide-fg-dim); font-weight: 600; text-transform: none; border-bottom-width: 2px !important; } [data-bs-theme="monokai"] .table-hover > tbody > tr:hover > *, [data-bs-theme="darcula"] .table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(var(--ide-primary-rgb), .12); color: var(--ide-fg-bright); } /* Badges: filled subtle pills (like the app's original "Soft Muted" theme), not the Terminal family's bracket-outline chips - this theme is soft/ modern, not retro. */ [data-bs-theme="monokai"] .badge, [data-bs-theme="darcula"] .badge { font-family: var(--ide-font); font-weight: 600; } [data-bs-theme="monokai"] .progress, [data-bs-theme="darcula"] .progress { background-color: var(--ide-bg); } [data-bs-theme="monokai"] .progress-bar, [data-bs-theme="darcula"] .progress-bar { background-color: var(--ide-primary) !important; } [data-bs-theme="monokai"] ::-webkit-scrollbar, [data-bs-theme="darcula"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-bs-theme="monokai"] ::-webkit-scrollbar-track, [data-bs-theme="darcula"] ::-webkit-scrollbar-track { background: var(--ide-bg); } [data-bs-theme="monokai"] ::-webkit-scrollbar-thumb, [data-bs-theme="darcula"] ::-webkit-scrollbar-thumb { background: var(--ide-bg-raised); border: 2px solid var(--ide-bg); } [data-bs-theme="monokai"] ::-webkit-scrollbar-thumb:hover, [data-bs-theme="darcula"] ::-webkit-scrollbar-thumb:hover { background: var(--ide-border); } /* Both properties are set explicitly so this rule stays self-contained: the generic ::selection in theme.css now also declares `color`, and with only `background` here that generic color would leak in and recolor selected syntax-highlighted text. */ [data-bs-theme="monokai"] ::selection, [data-bs-theme="darcula"] ::selection { background: rgba(var(--ide-primary-rgb), .35); color: var(--ide-fg-bright); } /* Hobby accent dot/edge: same --h-hue mechanism as theme.css/theme-terminal.css */ [data-bs-theme="monokai"] .hobby-edge, [data-bs-theme="darcula"] .hobby-edge, [data-bs-theme="monokai"] .hobby-dot, [data-bs-theme="darcula"] .hobby-dot { --hobby-accent: hsl(var(--h, 200), 70%, 65%); } [data-bs-theme="monokai"] .hobby-edge, [data-bs-theme="darcula"] .hobby-edge { border-left: 4px solid var(--hobby-accent) !important; } [data-bs-theme="monokai"] .hobby-dot, [data-bs-theme="darcula"] .hobby-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: var(--hobby-accent); flex-shrink: 0; } /* -------------------------------------------------------------------------- 4. PALETTES Each block below is the ONLY place that differs between the two IDE themes - just the raw --ide-* tokens sections 1-3 above are built from. -------------------------------------------------------------------------- */ /* Palette: MONOKAI — the classic Sublime Text/TextMate scheme (warm dark olive-black, hot pink/orange/green/blue/purple accents). Font: Fira Code. */ [data-bs-theme="monokai"] { --ide-font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* bg-raised/border/fg-dim are deliberately lifted well above Monokai's stock values (which put bg-raised, border and body text at contrast ratios of ~1.08, ~1.6 and ~3.0 against bg/each other - cards, dividers and muted text were nearly invisible against the page). Ratios below checked with WCAG's relative-luminance formula: bg vs bg-raised 1.69 (a real, visible lift for cards/modals/dropdowns), bg/bg-raised vs border 3.41/2.02 (dividers actually read as lines), bg-raised vs fg-dim 4.70 (AA-passing muted text). */ --ide-bg: #272822; --ide-bg-rgb: 39, 40, 34; --ide-bg-raised: #4C4B3E; --ide-bg-raised-rgb: 76, 75, 62; --ide-border: #9C9A82; --ide-fg: #F8F8F2; --ide-fg-rgb: 248, 248, 242; --ide-fg-bright: #F8F8F2; --ide-fg-bright-rgb: 248, 248, 242; --ide-fg-dim: #C1BEAA; --ide-gray: #C1BEAA; --ide-gray-rgb: 193, 190, 170; --ide-primary: #66D9EF; --ide-primary-rgb: 102, 217, 239; --ide-info: #AE81FF; --ide-info-rgb: 174, 129, 255; --ide-success: #A6E22E; --ide-success-rgb: 166, 226, 46; --ide-danger: #F92672; --ide-danger-rgb: 249, 38, 114; --ide-warning: #FD971F; --ide-warning-rgb: 253, 151, 31; } /* Palette: DARCULA — JetBrains/IntelliJ IDEA's iconic dark theme (cool neutral charcoal, desaturated blue-gray text, orange keyword accent). Font: JetBrains Mono. */ [data-bs-theme="darcula"] { --ide-font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Same rebalancing as Monokai's palette above, for the same reason (see its comment) - stock Darcula put bg vs bg-raised at ~1.33 and bg-raised vs border at ~1.34, so panels/dividers barely showed up. Body text (--ide-fg) and the primary accent are also nudged brighter here specifically because they now sit on a lighter bg-raised: unchanged, they'd drop to ~3.75/2.63 contrast against it, below the ~4.5/~3.0 needed to stay readable. */ --ide-bg: #2B2B2B; --ide-bg-rgb: 43, 43, 43; --ide-bg-raised: #4F5457; --ide-bg-raised-rgb: 79, 84, 87; --ide-border: #9DA4A8; --ide-fg: #BDC9D3; --ide-fg-rgb: 189, 201, 211; --ide-fg-bright: #E8E8E8; --ide-fg-bright-rgb: 232, 232, 232; --ide-fg-dim: #C4C9CC; --ide-gray: #C4C9CC; --ide-gray-rgb: 196, 201, 204; --ide-primary: #6FB9E8; --ide-primary-rgb: 111, 185, 232; --ide-info: #6897BB; --ide-info-rgb: 104, 151, 187; --ide-success: #629755; --ide-success-rgb: 98, 151, 85; --ide-danger: #C75450; --ide-danger-rgb: 199, 84, 80; --ide-warning: #CC7832; --ide-warning-rgb: 204, 120, 50; }