diff --git a/src/styles/custom.css b/src/styles/custom.css index 8386570..7181c7a 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -2,24 +2,40 @@ * Green accent color reminiscent of classic radio displays */ +/* Starlight gray convention: gray-1 = LIGHTEST, gray-6 = DARKEST (both modes) + text = gray-2, nav/sidebar bg = gray-6, inline-code bg = gray-5 */ :root { --sl-color-accent-low: #1a3d2e; - --sl-color-accent: #2d8659; - --sl-color-accent-high: #4ade80; + --sl-color-accent: #22c55e; + --sl-color-accent-high: #bbf7d0; --sl-color-white: #ffffff; - --sl-color-gray-1: #f0fdf4; - --sl-color-gray-2: #dcfce7; + --sl-color-black: #0d1510; + --sl-color-gray-1: #e5ede8; + --sl-color-gray-2: #bcc3bf; + --sl-color-gray-3: #798380; + --sl-color-gray-4: #464f4a; + --sl-color-gray-5: #1f2a24; + --sl-color-gray-6: #131e18; /* Table styling */ --sl-color-table-header: var(--sl-color-accent-low); } -:root[data-theme='dark'] { - --sl-color-accent-low: #1a3d2e; - --sl-color-accent: #22c55e; - --sl-color-accent-high: #bbf7d0; - --sl-color-gray-1: #0f1f17; - --sl-color-gray-2: #162b1f; +/* Light mode: gray-1 = DARKEST, gray-7 = LIGHTEST (inverted from dark mode) + white = dark text color, black = light bg color */ +:root[data-theme='light'] { + --sl-color-accent-low: #dcfce7; + --sl-color-accent: #16a34a; + --sl-color-accent-high: #14532d; + --sl-color-white: #1a2e23; + --sl-color-black: #ffffff; + --sl-color-gray-1: #1f2a24; + --sl-color-gray-2: #364039; + --sl-color-gray-3: #546158; + --sl-color-gray-4: #798380; + --sl-color-gray-5: #bcc3bf; + --sl-color-gray-6: #e5ede8; + --sl-color-gray-7: #f2f6f3; } /* Command code blocks - give them the terminal look */ @@ -51,11 +67,11 @@ code { .sl-markdown-content td { padding: 0.5rem 0.75rem; - border-bottom: 1px solid var(--sl-color-gray-5); + border-bottom: 1px solid var(--sl-color-gray-3); } .sl-markdown-content tr:hover { - background-color: var(--sl-color-gray-6); + background-color: var(--sl-color-gray-2); } /* Aside/callout styling */