github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-05-10 15:49:25 -05:00
Code Issues 81 Packages Projects Releases 24 Wiki Activity

fix(styles): improve contrast for links, blockquotes, and footer in dark mode

Browse Source 
Address user feedback on dark mode readability:

1. Links: Increase default brightness from base crimson to 10% lighter
   for better readability without straining. Hover state now 25% lighter
   for excellent contrast. Applies to all links including callouts and
   footer.

2. Blockquotes: Significantly improve contrast with:
   - Brighter text (#e0e0e0 vs #d0d0d0) for easier reading
   - Lighter background (#2a2a2a vs #232323)
   - More visible border (#8a93a0 vs #6c757d)
   - Kept distinct from callouts with muted styling

3. Footer: Add comprehensive dark mode support with:
   - Multiple class selectors (.page-footer, .footer, footer)
   - Dark background matching navbar
   - Proper text color for all elements
   - Bright link colors matching global style

These changes maintain visual hierarchy while significantly improving
readability and reducing eye strain in dark mode.
This commit is contained in:
Vijay Janapa Reddi
2025-10-26 14:52:32 -04:00
parent c3e356c1c2
commit bb349213f3
1 changed files with 43 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
quarto/assets/styles/dark-mode.scss
View File

@@ -26,17 +26,17 @@ body {
color: $body-color-dark;
}
// Links in dark mode - brighter crimson
// Links in dark mode - brighter crimson with better contrast
a {
color: $link-color-dark;
color: lighten($crimson, 10%) !important; // Brighter default state for better readability
&:hover {
color: lighten($crimson, 20%) !important; // Bright crimson on hover
color: lighten($crimson, 25%) !important; // Super bright on hover
text-decoration: underline;
}
&:visited {
color: lighten($crimson, 10%);
color: lighten($crimson, 8%) !important; // Slightly dimmer than unvisited
}
}
@@ -342,18 +342,44 @@ div[class*="margin"] {
}
}
// Footer
.page-footer {
background-color: $navbar-bg-dark;
border-top-color: $border-color-dark;
color: #adb5bd;
// Footer - support both class names Quarto might use
.page-footer,
.footer,
footer {
background-color: $navbar-bg-dark !important;
border-top-color: $border-color-dark !important;
color: #adb5bd !important;
// Footer text elements
p, span, div {
color: #adb5bd !important;
}
// Footer links
a {
color: lighten($crimson, 10%) !important;
&:hover {
color: lighten($crimson, 25%) !important;
}
}
}
// Blockquotes
// Blockquotes - higher contrast but distinct from callouts
blockquote {
border-left-color: #6c757d;
background-color: #232323;
color: #d0d0d0;
border-left-color: #8a93a0 !important; // Lighter border for better visibility
background-color: #2a2a2a !important; // Slightly lighter background
color: #e0e0e0 !important; // Much brighter text for readability
// Ensure nested elements inherit the brighter color
p, cite, em, strong {
color: #e0e0e0 !important;
}
// Attribution text
cite {
color: #c0c0c0 !important;
}
}
// Announcement bar - enhanced dark mode visibility
@@ -609,7 +635,7 @@ details.callout-definition code {
color: #e6e6e6 !important;
}
// Links inside foldbox callouts - ensure bright hover
// Links inside foldbox callouts - match global link brightness
details.fbx-default a,
details.fbx-answer a,
details.fbx-question a,
@@ -624,15 +650,15 @@ details.callout-resource-slides a,
details.callout-resource-videos a,
details.callout-resource-exercises a,
details.callout-code a {
color: $crimson-dark !important;
color: lighten($crimson, 10%) !important; // Brighter default
&:hover {
color: lighten($crimson, 20%) !important;
color: lighten($crimson, 25%) !important; // Super bright on hover
text-decoration: underline !important;
}
&:visited {
color: lighten($crimson, 10%) !important;
color: lighten($crimson, 8%) !important;
}
}