fix: light mode link/primary colors unreadable on white background (#10457)

Gold #FFD700 has 1.4:1 contrast ratio on white — barely visible.
Replace with dark amber palette (#8B6508 primary, #7A5800 links)
that passes WCAG AA (5.3:1 and 6.5:1 respectively).

Changes:
- :root primary palette → dark amber tones for light mode
- Explicit light mode link colors (#7A5800 / #5A4100 hover)
- Light mode sidebar active state with amber accent
- Light mode table header/border styling
- Footer hover color split by theme (gold for dark, amber for light)

Dark mode is completely unchanged.

Reported by @AbrahamMat7632
This commit is contained in:
Teknium 2026-04-15 11:17:44 -07:00 committed by GitHub
parent f61cc464f0
commit 2dc5f9d2d3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -8,20 +8,24 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root { :root {
/* Gold/Amber palette from landing page */ /* Dark amber palette for light mode readable on white (WCAG AA compliant)
--ifm-color-primary: #FFD700; Current gold #FFD700 has only 1.4:1 contrast on white; these tones pass 4.5:1+ */
--ifm-color-primary-dark: #E6C200; --ifm-color-primary: #8B6508;
--ifm-color-primary-darker: #D9B700; --ifm-color-primary-dark: #7A5800;
--ifm-color-primary-darkest: #B39600; --ifm-color-primary-darker: #6E4F00;
--ifm-color-primary-light: #FFDD33; --ifm-color-primary-darkest: #5A4100;
--ifm-color-primary-lighter: #FFE14D; --ifm-color-primary-light: #9E7410;
--ifm-color-primary-lightest: #FFEB80; --ifm-color-primary-lighter: #B38319;
--ifm-color-primary-lightest: #C89222;
--ifm-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ifm-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--ifm-font-family-monospace: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --ifm-font-family-monospace: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
--ifm-code-font-size: 90%; --ifm-code-font-size: 90%;
--ifm-heading-font-weight: 600; --ifm-heading-font-weight: 600;
--ifm-link-color: #7A5800;
--ifm-link-hover-color: #5A4100;
} }
/* Dark mode — the PRIMARY mode, matches landing page */ /* Dark mode — the PRIMARY mode, matches landing page */
@ -91,6 +95,13 @@
padding-left: calc(var(--ifm-menu-link-padding-horizontal) - 3px); padding-left: calc(var(--ifm-menu-link-padding-horizontal) - 3px);
} }
/* Light mode sidebar active */
[data-theme='light'] .menu__link--active:not(.menu__link--sublist) {
background-color: rgba(139, 101, 8, 0.08);
border-left: 3px solid #8B6508;
padding-left: calc(var(--ifm-menu-link-padding-horizontal) - 3px);
}
/* Code blocks */ /* Code blocks */
[data-theme='dark'] .prism-code { [data-theme='dark'] .prism-code {
background-color: #0a0a12 !important; background-color: #0a0a12 !important;
@ -167,6 +178,16 @@ pre.prism-code.language-ascii code {
border-color: rgba(255, 215, 0, 0.06); border-color: rgba(255, 215, 0, 0.06);
} }
/* Light mode table styling */
[data-theme='light'] table th {
background-color: rgba(139, 101, 8, 0.06);
border-color: rgba(139, 101, 8, 0.15);
}
[data-theme='light'] table td {
border-color: rgba(139, 101, 8, 0.10);
}
/* Footer */ /* Footer */
.footer { .footer {
border-top: 1px solid rgba(255, 215, 0, 0.08); border-top: 1px solid rgba(255, 215, 0, 0.08);
@ -177,11 +198,16 @@ pre.prism-code.language-ascii code {
transition: color 0.2s; transition: color 0.2s;
} }
.footer a:hover { [data-theme='dark'] .footer a:hover {
color: #FFD700; color: #FFD700;
text-decoration: none; text-decoration: none;
} }
[data-theme='light'] .footer a:hover {
color: #7A5800;
text-decoration: none;
}
/* Scrollbar */ /* Scrollbar */
[data-theme='dark'] ::-webkit-scrollbar { [data-theme='dark'] ::-webkit-scrollbar {
width: 8px; width: 8px;