Added Dark Theme

_quarto.yml

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

theming/theme-dark.scss

@@ -0,0 +1,134 @@
+/*-- scss:defaults --*/
+// Cosmo 5.3.3
+// Bootswatch
+
+$theme: "cosmo" !default;
+
+// Manually-added colors
+
+$background-nav: #192222;
+$background-body: #131818;
+$foreground: #1bb3ac;
+$foreground-dark: #073c44;
+$links:#2aa198;
+$links-hover: #31dce6;
+$code-background-color: #172424;
+$li: #bcbcbc;
+
+// Quarto default colors
+
+$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;
+
+$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:       $links-hover !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;
+
+// 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;
+
+// Alerts
+
+$alert-border-width:            0 !default;
+
+// Progress bars
+
+$progress-height:               .5rem !default;
+
+
+// Custom tweaks for Quarto-Cosmo 
+
+$navbar-bg: $background-nav;
+$navbar-fg: $foreground;
+$footer-bg: $background-nav;
+$footer-fg: $foreground;
+$body-color: $white;
+$body-bg: $background-body;
+
+a {
+    color: $links !important;
+}
+
+a:hover {
+    color: $links-hover !important;
+}
+
+code, p code {
+    background-color: $code-background-color !important;
+    color: $links;
+}
+
+li {
+    color: $li !important;
+}
+
+.menu-text:hover {   
+    color: $links-hover !important;
+}
+
+.quarto-title-banner {
+    background-color: $foreground-dark !important;
+}
+
+.title {
+    color: $white !important;
+}
+
+.listing-description a {
+    color: $li !important;
+}
+
+p {
+    color: $li !important;
+}
+
+
+.team-member, .input-group-text {
+    background-color: $background-nav !important;   
+}
+
+.level4, .listing-category {
+    color: $foreground !important;
+}
+
+::selection {
+    color: $links-hover;
+    background: $background-nav;
+}