From ce191eb44e5c10f513b23bf194f17675888a77ac Mon Sep 17 00:00:00 2001 From: Jitendra Verma Date: Sun, 11 Aug 2024 21:44:23 +0530 Subject: [PATCH 1/3] Added Dark Theme --- _quarto.yml | 1 + theming/theme-dark.scss | 48 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 theming/theme-dark.scss diff --git a/_quarto.yml b/_quarto.yml index 7989d9fa1..8a3339b55 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -62,6 +62,7 @@ format: html: theme: light: cosmo + dark: [solar, theming/theme-dark.scss] css: theming/styles.css toc: true smooth-scroll: true diff --git a/theming/theme-dark.scss b/theming/theme-dark.scss new file mode 100644 index 000000000..849f7433e --- /dev/null +++ b/theming/theme-dark.scss @@ -0,0 +1,48 @@ +/*-- scss:defaults --*/ + +$navbar-bg: #192222; +$navbar-fg: #1bb3ac; +$footer-bg: #192222; +$footer-fg: #1bb3ac; +$body-color: #fff; +$body-bg: #131818; + +a { + color: #2aa198 !important; +} + +a:hover { + color: #31dce6 !important; +} + +code { + background-color: #172424 !important; +} + +.menu-text:hover { + color: #31dce6 !important; +} + +.quarto-title-banner { + background-color: #073c44 !important; +} + +.title { + color: #ffffff !important; +} + +.listing-description a { + color: #979c9c !important; +} + +p { + color: #979c9c !important; +} + +.team-member { + background-color: #192222 !important; +} + +.level4 { + color: #1bb3ac !important; +} From d6e37b379b3e3a11da8ab88d87c0f93ba8fb2bb1 Mon Sep 17 00:00:00 2001 From: Jitendra Verma Date: Mon, 12 Aug 2024 11:59:42 +0530 Subject: [PATCH 2/3] updated dark theme & added Text Selection color --- theming/theme-dark.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/theming/theme-dark.scss b/theming/theme-dark.scss index 849f7433e..70f99555b 100644 --- a/theming/theme-dark.scss +++ b/theming/theme-dark.scss @@ -15,8 +15,13 @@ a:hover { color: #31dce6 !important; } -code { +code, p code { background-color: #172424 !important; + color: #2aa198; +} + +li { + color: #979c9c !important; } .menu-text:hover { @@ -46,3 +51,8 @@ p { .level4 { color: #1bb3ac !important; } + +::selection { + color: #31dce6; + background: #192222; +} From c68ab4fe92a15e9f761816bbe53e5d5716faa751 Mon Sep 17 00:00:00 2001 From: Jitendra Verma Date: Sun, 15 Sep 2024 14:39:00 +0530 Subject: [PATCH 3/3] Dark theme file updated with cosmo --- _quarto.yml | 2 +- theming/theme-dark.scss | 120 ++++++++++++++++++++++++++++++++-------- 2 files changed, 99 insertions(+), 23 deletions(-) diff --git a/_quarto.yml b/_quarto.yml index 8a3339b55..66222198d 100644 --- a/_quarto.yml +++ b/_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 diff --git a/theming/theme-dark.scss b/theming/theme-dark.scss index 70f99555b..783f25212 100644 --- a/theming/theme-dark.scss +++ b/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; }