Updated Code

_quarto.yml

@@ -142,7 +142,7 @@ format:
   html:
     theme:
       light: cosmo
-      dark: [solar, theming/theme-dark.scss]
+      dark: [cosmo, theming/theme-dark.scss]
     css: theming/styles.css
     toc: true
     smooth-scroll: true

theming/theme-dark.scss

@@ -1,51 +1,134 @@
 /*-- scss:defaults --*/
+// Cosmo 5.3.3
+// Bootswatch
 
-$navbar-bg: #192222;
-$navbar-fg: #1bb3ac;
-$footer-bg: #192222;
-$footer-fg: #1bb3ac;
-$body-color: #fff;
-$body-bg: #131818;
+$theme: "cosmo" !default;
 
-a {
-    color: #2aa198 !important;
+//
+// Color system
+//
+// manually-added color
+//
+$background-nav: #192222;
+$background-body: #131818;
+$foreground: #1bb3ac;
+// $body-color: #ffffff;
+$links:#2aa198;
+$links-hover: #31dce6;
+$code-background-color: #172424;
+$li: #979c9c;
+
+$white:    #ffffff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #373a3c !default;
+$gray-900: #212529 !default;
+$black:    #000000 !default;
+
+$blue:    $links-hover !default;
+$indigo:  #6610f2 !default;
+$purple:  #613d7c !default;
+$pink:    #e83e8c !default;
+$red:     #ff0039 !default;
+$orange:  #f0ad4e !default;
+$yellow:  #ff7518 !default;
+$green:   #3fb618 !default;
+$teal:    #20c997 !default;
+$cyan:    #9954bb !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-800 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+$min-contrast-ratio:   2.6 !default;
+
+// Options
+
+$enable-rounded: false !default;
+
+// Body
+
+// $body-color:    $gray-800 !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:    "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$headings-font-weight:      400 !default;
+
+// Tables
+
+$table-color:               initial !default;
+
+// Navbar
+
+// $navbar-dark-hover-color:       rgba($white, 1) !default;
+// $navbar-light-hover-color:      rgba($black, .9) !default;
+
+// Alerts
+
+$alert-border-width:            0 !default;
+
+// Progress bars
+
+$progress-height:               .5rem !default;
+
+$navbar-bg: $background-nav;
+$navbar-fg: $foreground;
+$footer-bg: $background-nav;
+$footer-fg: $foreground;
+$body-color: $white;
+$body-bg: $background-body;
+
+a, pre code {
+    color: $links !important;
 }
 
 a:hover {
-    color: #31dce6 !important;
+    color: $links-hover !important;
 }
 
 code, p code, ol code, li code, h1 code {
-    background-color: #172424 !important;
-    color: #2aa198;
+    background-color: $code-background-color !important;
+    color: $links;
 }
 
 .cell, .anchored code {
-    background-color: #172424 !important;
-    color: #2aa198;
+    background-color: $code-background-color !important;
+    color: $links;
 }
 
 div.sourceCode {
-    background-color: #172424 !important;
+    background-color: $code-background-color !important;
 }
 
 li {
-    color: #979c9c !important;
+    color: $li !important;
 }
 
 .menu-text:hover {   
-    color: #31dce6 !important;
+    color: $links-hover !important;
 }
 
 p {
-    color: #979c9c !important;
+    color: $li !important;
 }
 
 .breadcrumb {
-    background-color: #131818 !important;
+    background-color: $background-body !important;
 }
 
 ::selection {
-    color: #31dce6;
-    background: #192222;
+    color: $links-hover;
+    background: $background-nav;
 }