Skip to content

Commit

Permalink
feat: add support for dark mode
Browse files Browse the repository at this point in the history
Signed-off-by: Jakob Steiner <[email protected]>
  • Loading branch information
kosmoz committed Feb 28, 2024
1 parent 2c3a57b commit ea9839a
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 39 deletions.
2 changes: 1 addition & 1 deletion index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
@import "@fontsource/poppins/latin-600.css";
71 changes: 40 additions & 31 deletions scss/_variables.scss
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -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;
Expand All @@ -60,4 +69,4 @@ $btn-padding-y-sm: 0.375rem;
$alert-padding-x: 1rem;
$alert-padding-y: 1rem;

$modal-inner-padding: 1rem;
$modal-inner-padding: 1rem;
4 changes: 2 additions & 2 deletions scss/components/_list.scss
Original file line number Diff line number Diff line change
@@ -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=');

&,
Expand All @@ -9,4 +9,4 @@ ul:not(.dropdown-menu, .navbar-nav, .list-unstyled, .list-inline) {
padding-inline-start: 8px;
}
}
}
}
20 changes: 15 additions & 5 deletions scss/components/_resources.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
}
}
}

0 comments on commit ea9839a

Please sign in to comment.