cs249r_book/shared/styles/_book-only-dark.scss

// =============================================================================
// BOOK-ONLY DARK — Dark mode styles specific to the textbook (Vol1 & Vol2)
// =============================================================================
// This file contains dark mode overrides for textbook-specific components:
// foldbox callouts, announcement bar, book cards, code listings.
//
// Import AFTER _ecosystem-base-dark. Theme ($accent-dark) must already be set.
// =============================================================================

// Book card on homepage - dark gradient background
.book-card {
  background: linear-gradient(135deg, #2a2a2a 0%, #232323 50%, #1e1e1e 100%) !important;
  border-color: #454d55 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0,0,0,0.2) !important;
}

.book-card-link:hover .book-card {
  box-shadow: 0 12px 40px rgba($accent-dark, 0.25), 0 4px 12px rgba(0,0,0,0.3) !important;
}

.book-title {
  color: #e0e0e0 !important;
}

.book-subtitle {
  color: #adb5bd !important;
}

// Announcement bar - solid background (no transparency)
.alert-primary,
.announcement {
  background: linear-gradient(135deg,
    darken($accent-dark, 35%) 0%,
    darken($accent-dark, 38%) 100%) !important;
  border-color: rgba($accent-dark, 0.4) !important;
  border-left: 4px solid $accent-dark !important;
  color: #f0f0f0 !important;

  // All text elements in the banner
  p, span, strong, em {
    color: #f0f0f0 !important;
  }

  // Dismiss button (X) - ensure it's visible in dark mode
  .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.8 !important;

    &:hover {
      opacity: 1 !important;
    }
  }

  // Links in the banner
  a {
    color: lighten($accent-dark, 25%) !important;
    font-weight: 500;
    text-decoration: none;

    &:hover {
      color: lighten($accent-dark, 35%) !important;
      text-decoration: underline !important;
    }

    &:visited {
      color: lighten($accent-dark, 25%) !important;
    }
  }

  // Icons in the banner (if using Bootstrap icons)
  .bi {
    color: $accent-dark !important;
  }
}

// Code listings
.listing figure {
  border-color: #454d55;
  background: linear-gradient(135deg, #2c2c2c 0%, #232323 100%);
}

.listing figcaption,
.listing .listing-caption {
  background: linear-gradient(135deg, #2c2c2c 0%, #252525 100%) !important;
  border-bottom-color: #454d55 !important;
  color: #e6e6e6 !important;
}

.listing .sourceCode {
  background-color: #1e1e1e !important;

  // Syntax highlighting within listings (higher specificity)
  .op { color: #56b6c2 !important; }
  .va { color: #e6e6e6 !important; }
  .kw { color: #c678dd !important; }
  .cf { color: #e06c75 !important; }
  .fu { color: #61afef !important; }
  .bu { color: #e5c07b !important; }
  .st { color: #98c379 !important; }
  .co { color: #7f848e !important; }
  .dv, .fl { color: #d19a66 !important; }
  .im { color: #61afef !important; }
  .at { color: #e06c75 !important; }
  .dt { color: #e5c07b !important; }
  .sc { color: #56b6c2 !important; }
}

// ============================================================================
// CALLOUT/FOLDBOX DARK MODE STYLING - Manual Toggle Support
// ============================================================================

// Base dark mode for all foldbox callouts
details.fbx-default,
details.fbx-answer,
details.fbx-question,
details[class*="callout-"] {
  --text-color: #e6e6e6 !important;
  // Use pre-computed dark mode colors from Lua (falls back to light mode values)
  --background-color: var(--dark-background-color, var(--background-color)) !important;
  --title-background-color: var(--dark-title-background-color, var(--title-background-color)) !important;
  border-color: var(--border-color, #454d55) !important;
}

// Summary headers - bright text for all callout types
details[class*="callout-"] summary,
details[class*="callout-"] summary strong,
details[class*="callout-"] > summary {
  color: #f0f0f0 !important;
}

// Content body backgrounds
details.fbx-default > div,
details.fbx-answer > div,
details.fbx-question > div,
details[class*="callout-"] > div {
  background-color: #212529 !important;
  color: #e6e6e6 !important;
}

// Arrows in dark mode
details.fbx-default > summary::after,
details.fbx-answer > summary::after,
details.fbx-question > summary::after,
details[class*="callout-"] > summary::after {
  background-color: #e6e6e6 !important;
}

// Code elements in dark mode
details[class*="callout-"] code {
  color: #e6e6e6 !important;
}

// Links inside callouts
details.fbx-default a,
details.fbx-answer a,
details.fbx-question a,
details[class*="callout-"] a {
  color: lighten($accent-dark, 10%) !important;

  &:hover {
    color: lighten($accent-dark, 25%) !important;
    text-decoration: underline !important;
  }

  &:visited {
    color: lighten($accent-dark, 8%) !important;
  }
}