cs249r_book/shared/styles/_site-dark.scss

// =============================================================================
// SITE PAGES DARK MODE — Lightweight dark overrides for website pages
// =============================================================================
// Site pages (community, about, newsletter, landing) handle their own dark
// mode via CSS custom properties in .quarto-dark blocks within their page CSS.
// This file provides ONLY the structural dark overrides that those CSS files
// don't cover: body background, navbar, footer, and basic text colors.
//
// IMPORTANT: Do NOT add !important overrides here that would conflict with
// the page-specific .quarto-dark CSS custom properties.
// =============================================================================

// Dark mode specific colors
$body-bg-dark: #1a1a1a;
$body-color-dark: #e6e6e6;

// Main body styling
body {
  background-color: $body-bg-dark;
  color: $body-color-dark;
}

// Navbar dark mode
.navbar {
  background-color: #212529 !important;
  border-bottom-color: #454d55 !important;
}

// Navbar brand dark mode handled by shared _navbar.scss (body.quarto-dark .navbar-brand)

.navbar-nav .nav-link {
  color: #adb5bd !important;

  &:hover {
    color: $accent-dark !important;
  }

  &.active {
    color: $accent-dark !important;
  }
}

// Dark mode toggle icon
.quarto-color-scheme-toggle {
  color: #adb5bd !important;

  &:hover {
    color: $accent-dark !important;
  }
}

// Headers - use accent-dark for bars
.content h2,
main h2,
article h2,
#quarto-content h2 {
  border-left-color: $accent-dark;
  border-bottom-color: rgba($accent-dark, 0.3);
  color: #e6e6e6;
}

.content h3,
main h3,
article h3,
#quarto-content h3 {
  border-left-color: $accent-dark;
  border-bottom-color: rgba($accent-dark, 0.25);
  color: #d1d5db;
}

.content h4,
main h4,
article h4,
#quarto-content h4 {
  border-left-color: $accent-dark;
  border-bottom-color: rgba($accent-dark, 0.2);
  color: #d1d5db;
}

.content h5,
main h5,
article h5,
#quarto-content h5 {
  border-left-color: $accent-dark;
  border-bottom-color: rgba($accent-dark, 0.15);
  color: #9ca3af;
}

// TOC dark mode
.table-of-contents,
#TOC,
.quarto-toc,
nav[role="doc-toc"] {
  border-left-color: $accent-dark;

  a, .nav-link {
    color: #adb5bd;

    &:hover {
      color: $accent-dark;
    }
  }

  .active,
  .nav-link.active {
    color: $accent-dark !important;
  }

  > ul > li > a {
    color: #d1d5db;
  }
}

// Links - gentle override, no !important so page CSS can win
a {
  color: $accent-dark;

  &:hover {
    color: lighten($accent-dark, 15%);
  }
}

// Tables dark mode
table {
  th {
    background-color: #2d2d2d;
    color: #e6e6e6;
    border-bottom-color: #454d55;
  }

  td {
    color: #d1d5db;
    border-bottom-color: #3a3a3a;
  }

  tbody tr:nth-child(even) {
    background-color: #252525;
  }

  tbody tr:hover {
    background-color: #2d2d2d;
  }
}

// Footer dark mode
.page-footer {
  background-color: #212529;
  border-top-color: #454d55;
  color: #adb5bd;
}

// Buttons
.btn-primary {
  background-color: $accent-dark;
  border-color: $accent-dark;
}

// Blockquotes (only unstyled/default blockquotes, not custom-classed ones)
blockquote:not([class]) {
  background-color: #252525;
  border-left-color: #6c757d;
  color: #d1d5db;
}

// Search
.aa-Form {
  background-color: #2d2d2d !important;
  border-color: #454d55 !important;
}

// Ensure card headings and body text are visible in dark mode
// Site page CSS uses var(--cm-text) etc., but some elements may not
// have explicit color set and inherit from hardcoded light-mode values
.content p,
.content li,
main p,
main li {
  color: #d1d5db;
}