Dark theme file updated with cosmo

Author: jitendravjh

_quarto.yml

@@ -62,7 +62,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,58 +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;
+
+// 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: #2aa198 !important;
+    color: $links !important;
 }
 
 a:hover {
-    color: #31dce6 !important;
+    color: $links-hover !important;
 }
 
 code, p code {
-    background-color: #172424 !important;
-    color: #2aa198;
+    background-color: $code-background-color !important;
+    color: $links;
 }
 
 li {
-    color: #979c9c !important;
+    color: $li !important;
 }
 
 .menu-text:hover {   
-    color: #31dce6 !important;
+    color: $links-hover !important;
 }
 
 .quarto-title-banner {
-    background-color: #073c44 !important;
+    background-color: $foreground-dark !important;
 }
 
 .title {
-    color: #ffffff !important;
+    color: $white !important;
 }
 
 .listing-description a {
-    color: #979c9c !important;
+    color: $li !important;
 }
 
 p {
-    color: #979c9c !important;
+    color: $li !important;
 }
 
-.team-member {
-    background-color: #192222 !important;   
+
+.team-member, .input-group-text {
+    background-color: $background-nav !important;   
 }
 
-.level4 {
-    color: #1bb3ac !important;
+.level4, .listing-category {
+    color: $foreground !important;
 }
 
 ::selection {
-    color: #31dce6;
-    background: #192222;
+    color: $links-hover;
+    background: $background-nav;
 }