From ea9839a8b2b245faeb4ba456770be292928a74e3 Mon Sep 17 00:00:00 2001 From: Jakob Steiner Date: Wed, 28 Feb 2024 15:02:27 +0100 Subject: [PATCH] feat: add support for dark mode Signed-off-by: Jakob Steiner --- index.scss | 2 +- scss/_variables.scss | 71 +++++++++++++++++++-------------- scss/components/_list.scss | 4 +- scss/components/_resources.scss | 20 +++++++--- 4 files changed, 58 insertions(+), 39 deletions(-) diff --git a/index.scss b/index.scss index 456a838..cb392c1 100644 --- a/index.scss +++ b/index.scss @@ -76,4 +76,4 @@ $theme-colors: map-merge($theme-colors, $custom-colors); @import "@fontsource/inter/latin-400.css"; @import "@fontsource/inter/latin-600.css"; @import "@fontsource/inter/latin-700.css"; -@import "@fontsource/poppins/latin-600.css"; \ No newline at end of file +@import "@fontsource/poppins/latin-600.css"; diff --git a/scss/_variables.scss b/scss/_variables.scss index aed70af..669600a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,42 +1,50 @@ -$main-1: #0c263b; -$main-2: #174c76; -$main-3: #00b5eb; -$main-light: #ebf8fb; // $main-3 with 7% opacity -$grey-0: #101010; -$grey-7: #fbfbfb; -$red: #ff4136; -$pink: #e03466; - $font-family-main: Inter, system-ui, sans-serif !default; $font-family-display: Poppins, Inter, system-ui, sans-serif !default; -/* Currently unused. These will probably be removed in the future. */ -$cube-1: #63c5e3; -$cube-2: #0f498f; -$cube-3: #3169b1; -$cube-4: #4d92cf; -$blue-grey-1: #EBFAFE; -$blue-grey-2: #EAEFF1; -$blue-3: #09BAEE; -$blue-7: #C0EDFB; +$gk-bg-light: #edf4f5; +$gk-surface-light: #f7fbfc; +$gk-fg-light: #101010; +$gk-primary-light: #00b5eb; +$gk-secondary-light: #174c76; +$gk-accent-light: #e03466; +$gk-success-light: #33b73b; +$gk-danger-light: #ff4136; + +$gk-bg-dark: #0f1a24; +$gk-surface-dark: #1f2933; +$gk-fg-dark: #e0e0e0; +$gk-primary-dark: #3386a6; +$gk-secondary-dark: #1d4165; +$gk-accent-dark: #e04c68; +$gk-success-dark: #70a957; /* Override Bootstrap color definitions */ -$black: $grey-0; +$black: $gk-bg-dark; +$white: $gk-bg-light; /* Override Bootstrap theme colors */ -$primary: $main-3; -$secondary: $main-2; -$accent: $pink; -$danger: $red; -$dark: $main-1; -$light: $main-light; +$primary: $gk-primary-light; +$secondary: $gk-secondary-light; +$accent: $gk-accent-light; +$info: $gk-primary-light; +$success: $gk-success-light; +$danger: $gk-danger-light; +$dark: $gk-surface-dark; +$light: $gk-surface-light; // Bootstrap overrides and generic aliases $spacer: 2rem; $border-width: 2px; -$body-color: $black; +$body-bg: $gk-bg-light; +$body-bg-dark: $gk-bg-dark; +$body-secondary-bg: $gk-surface-light; +$body-secondary-bg-dark: $gk-surface-dark; +$body-tertiary-bg: $gk-surface-light; +$body-tertiary-bg-dark: $gk-surface-dark; +$body-color: $gk-fg-light; +$body-color-dark: $gk-fg-dark; $min-contrast-ratio: 2; @@ -45,11 +53,12 @@ $font-weight-bolder: 600; $headings-font-family: $font-family-display; $headings-font-weight: 700; -$headings-color: $secondary; +$headings-color: $gk-secondary-light; +$headings-color-dark: $gk-primary-dark; -$navbar-dark-color: rgba($light, 0.85); -$navbar-dark-hover-color: var(--bs-white); -$navbar-dark-active-color: var(--bs-white); +$navbar-dark-color: rgba($gk-fg-dark, 0.85); +$navbar-dark-hover-color: $gk-fg-dark; +$navbar-dark-active-color: $gk-fg-dark; $btn-font-weight: 700; $btn-padding-x: 1.5rem; @@ -60,4 +69,4 @@ $btn-padding-y-sm: 0.375rem; $alert-padding-x: 1rem; $alert-padding-y: 1rem; -$modal-inner-padding: 1rem; \ No newline at end of file +$modal-inner-padding: 1rem; diff --git a/scss/components/_list.scss b/scss/components/_list.scss index 13418c8..5a061ef 100644 --- a/scss/components/_list.scss +++ b/scss/components/_list.scss @@ -1,4 +1,4 @@ -ul:not(.dropdown-menu, .navbar-nav, .list-unstyled, .list-inline) { +ul:not(.dropdown-menu, .navbar-nav, .list-unstyled, .list-inline, .nav) { list-style: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzFfMikiPgo8Y2lyY2xlIGN4PSI2IiBjeT0iNiIgcj0iNiIgZmlsbD0iIzAwQjVFQiIgZmlsbC1vcGFjaXR5PSIwLjE1Ii8+CjxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSIzIiBmaWxsPSIjMDBCNUVCIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMV8yIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo='); &, @@ -9,4 +9,4 @@ ul:not(.dropdown-menu, .navbar-nav, .list-unstyled, .list-inline) { padding-inline-start: 8px; } } -} \ No newline at end of file +} diff --git a/scss/components/_resources.scss b/scss/components/_resources.scss index 1133f57..08c68ae 100644 --- a/scss/components/_resources.scss +++ b/scss/components/_resources.scss @@ -1,3 +1,13 @@ +:root { + --prose-primary: #{$gk-primary-light}; + --prose-bg: #{$gk-bg-light}; +} + +@include color-mode(dark) { + --prose-primary: #{$gk-primary-dark}; + --prose-bg: #{$gk-bg-dark}; +} + .prose-content { h2 { margin-top: 3rem; @@ -12,19 +22,19 @@ } blockquote { - border-left: 0.4rem solid $primary; + border-left: 0.4rem solid var(--prose-primary); padding-left: 1rem; margin: 2rem 0; } pre { - background: $grey-7; + background: var(--prose-bg); padding: 1.4rem; @include card-shadow; } code { - background: $grey-7; - color: $secondary; + background: var(--prose-bg); + color: var(--prose-primary); } -} \ No newline at end of file +}