diff --git a/quarto/assets/styles/dark-mode.scss b/quarto/assets/styles/dark-mode.scss index 01ff0cf70..540ee7815 100644 --- a/quarto/assets/styles/dark-mode.scss +++ b/quarto/assets/styles/dark-mode.scss @@ -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; } }