diff --git a/source/assets/stylesheets/base/_base.scss b/source/assets/stylesheets/base/_base.scss index c671410..78dc08c 100644 --- a/source/assets/stylesheets/base/_base.scss +++ b/source/assets/stylesheets/base/_base.scss @@ -19,6 +19,14 @@ a { color: $base-link-color--hover; outline: 0; } + + @include dark-color-scheme { + color: $base-link-color--dark; + + &:hover { + color: $base-link-color--hover--dark; + } + } } abbr { @@ -31,6 +39,11 @@ blockquote { color: lighten($base-text-color, 25); margin: 0 0 $base-spacing; padding-left: 20px; + + @include dark-color-scheme { + border-color: $base-border-color--dark; + color: $base-text-color--dark; + } } body { @@ -43,6 +56,11 @@ body { overflow-x: hidden; padding-top: 15px; border-top: 5px solid $color-green; + + @include dark-color-scheme { + background-color: $base-background-color--dark; + color: $base-text-color--dark; + } } main { @@ -75,6 +93,11 @@ cite { &:before { content: '\2014 \00A0'; } + + @include dark-color-scheme { + border-color: $base-border-color--dark; + color: $base-text-color--dark; + } } code, @@ -88,6 +111,10 @@ code { background: $code-background-color; border-radius: 3px; padding: 3px 6px; + + @include dark-color-scheme { + background: $code-background-color--dark; + } } h1, @@ -101,6 +128,10 @@ h6 { font-weight: bold; line-height: $heading-line-height; margin: 0 0 $base-spacing; + + @include dark-color-scheme { + color: $heading-color--dark; + } } h1 { diff --git a/source/assets/stylesheets/base/_mixins.scss b/source/assets/stylesheets/base/_mixins.scss index 01f91f7..6aed9b2 100644 --- a/source/assets/stylesheets/base/_mixins.scss +++ b/source/assets/stylesheets/base/_mixins.scss @@ -15,3 +15,9 @@ @content; } } + +@mixin dark-color-scheme() { + @media (prefers-color-scheme: dark) { + @content; + } +} diff --git a/source/assets/stylesheets/base/_syntax.scss b/source/assets/stylesheets/base/_syntax.scss index 0fb2b61..e5f3d49 100644 --- a/source/assets/stylesheets/base/_syntax.scss +++ b/source/assets/stylesheets/base/_syntax.scss @@ -8,6 +8,10 @@ $block: '.highlight > .highlight'; padding: 15px; white-space: pre; word-wrap: normal; + + @include dark-color-scheme { + background: $code-background-color--dark; + } } #{$block} code { diff --git a/source/assets/stylesheets/base/_variables.scss b/source/assets/stylesheets/base/_variables.scss index 9c4cf51..d73d141 100644 --- a/source/assets/stylesheets/base/_variables.scss +++ b/source/assets/stylesheets/base/_variables.scss @@ -17,6 +17,7 @@ $font-family-sans-serif: "Lato", sans-serif; // Base: Default color scheme $base-background-color: $color-white; +$base-contrast-background-color: $color-blue-grey--dark; $base-border-color: $color-grey--light; $base-text-color: lighten($color-blue-grey--dark, 10); $base-link-color: $color-green; @@ -24,6 +25,16 @@ $base-link-color--hover: $color-green--dark; $heading-color: $color-blue-grey--dark; $code-background-color: #f7f7f7; +// Base: Dark color scheme +$base-background-color--dark: #1d2021; +$base-contrast-background-color--dark: lighten($base-background-color--dark, 5); +$base-border-color--dark: $color-grey--dark; +$base-text-color--dark: $color-grey--light; +$base-link-color--dark: $color-green; +$base-link-color--hover--dark: $color-green--dark; +$heading-color--dark: $color-blue-grey--light; +$code-background-color--dark: $color-blue-grey--dark; + $base-font-family: $font-family-sans-serif; $base-font-size: 16px; $base-line-height: 1.5; diff --git a/source/assets/stylesheets/layout/_footer.scss b/source/assets/stylesheets/layout/_footer.scss index dc78ce7..345a1c5 100644 --- a/source/assets/stylesheets/layout/_footer.scss +++ b/source/assets/stylesheets/layout/_footer.scss @@ -15,6 +15,10 @@ $block: '.footer'; color: $color-green; } } + + @include dark-color-scheme { + border-color: $color-grey--dark; + } } #{$block}__about { diff --git a/source/assets/stylesheets/modules/_clients.scss b/source/assets/stylesheets/modules/_clients.scss index 5f8b3e8..f8e596d 100644 --- a/source/assets/stylesheets/modules/_clients.scss +++ b/source/assets/stylesheets/modules/_clients.scss @@ -26,4 +26,10 @@ $block: '.clients'; border-width: 1px; } } + + #{$subblock}__image { + @include dark-color-scheme { + filter: drop-shadow(0 0 5px $base-background-color--dark); + } + } } diff --git a/source/assets/stylesheets/modules/_home.scss b/source/assets/stylesheets/modules/_home.scss index 6a88729..33a211c 100644 --- a/source/assets/stylesheets/modules/_home.scss +++ b/source/assets/stylesheets/modules/_home.scss @@ -23,8 +23,12 @@ $block: '.home'; margin-top: 10px; font-family: $font-family-monospace; font-size: 1rem; - background-color: $color-blue-grey--dark; + background-color: $base-contrast-background-color; color: $color-white; + + @include dark-color-scheme { + background-color: $base-contrast-background-color--dark; + } } @include mq-large { @@ -66,6 +70,14 @@ $block: '.home'; &:hover { color: $color-blue-grey--dark; } + + @include dark-color-scheme { + color: $color-blue-grey--light; + + &:hover { + color: $color-blue-grey--light; + } + } } } } @@ -74,6 +86,10 @@ $block: '.home'; position: relative; padding: 30px 0 10px; background-color: $color-grey--light; + + @include dark-color-scheme { + background-color: $base-contrast-background-color--dark; + } } #{$block}__latest-articles {