dark_custom.scss

/*-- scss:defaults --*/
/* Dark mode adjustments for 'superhero' theme */

/* Adjust font sizes */
$small-font-size:             .75rem !default;
$code-font-size:              .85em !default;

/* Primary color */
$primary:                     #DF691A !default; /* Vibrant orange for primary accents */

/* Background and text colors for code */
$code-block-bg:               #1A2732 !default; /* Dark blue-gray background for code blocks */
$code-bg:                     #1A2732 !default; /* Background for inline code */
$code-color:                  #FFDD88 !default; /* Soft yellow text for code blocks */
$btn-code-copy-color:         $primary; /* Button color for 'copy code' */

/* Callout box styling */
$callout-bg:                  #34495E !default; /* Dark background for callout boxes */
$callout-border-color:        $primary !default; /* Accent color for callout box border */
$callout-text-color:          #F5F5F5 !default; /* Light text color for callout content */
$callout-title-color:         $primary !default; /* Accent color for callout titles */

/*-- scss:rules --*/

body {
  background-color: #2B3E50; /* Dark background matching superhero theme */
  color: #F5F5F5; /* Light text color */
}

code {
  color: $code-color; /* Soft yellow for code text */
  background-color: $code-bg; /* Dark background for inline code */
  /* Removed border */
}

pre {
  background-color: $code-block-bg; /* Background for preformatted code blocks */
  color: $code-color; /* Code block text color */
  /* Removed border */
}

button.copy-code {
  background-color: $code-block-bg; /* Button blends with block background */
  color: $btn-code-copy-color; /* Primary accent color for button text */
}

h1, h2, h3, h4, h5, h6 {
  color: #F5F5F5; /* Ensure headers are readable in dark mode */
}

/* Callout box styling */
.callout {
  background-color: $callout-bg; /* Dark background for callout boxes */
  color: $callout-text-color; /* Light text color inside callouts */
  border-left: 4px solid $callout-border-color; /* Accent border in primary color */
}

.callout-title {
  color: $callout-title-color; /* Title color matching primary theme */
}