diff --git a/assets/scss/pages/post.scss b/assets/scss/pages/post.scss index 13c84c14f..8bbe167cf 100644 --- a/assets/scss/pages/post.scss +++ b/assets/scss/pages/post.scss @@ -35,6 +35,9 @@ $tocBreakpoint: 1024px; .anchor:hover { color: $darkGrey; + @media (prefers-color-scheme: dark) { + color: $lightGrey; + } } } @@ -45,6 +48,9 @@ $tocBreakpoint: 1024px; a { color: $darkGrey; + @media (prefers-color-scheme: dark) { + color: $lightGrey; + } text-decoration: underline; } } @@ -96,11 +102,17 @@ $tocBreakpoint: 1024px; a { text-decoration: none; color: #9b9b9b; + @media (prefers-color-scheme: dark) { + color: #646464; + } font-size: 0.9rem; } a.active { color: rgb(51, 51, 51); + @media (prefers-color-scheme: dark) { + color: rgb(204, 204, 204); + } } } @@ -175,6 +187,9 @@ $tocBreakpoint: 1024px; } &:hover { background-color: #f6f9fc; + @media (prefers-color-scheme: dark) { + background-color: #090603; + } } } } @@ -186,6 +201,9 @@ $tocBreakpoint: 1024px; .pagination__title { color: $black; + @media (prefers-color-scheme: dark) { + color: $white; + } font-weight: 700; margin-top: 0.25rem; } @@ -194,6 +212,9 @@ footer { text-align: center; padding: 0 1.5rem; background: $white; + @media (prefers-color-scheme: dark) { + background: $black; + } p { margin-top: 1rem; // reduce margin top due to social icons' padding @@ -213,6 +234,9 @@ footer { &::before { content: "-"; color: $darkGrey; + @media (prefers-color-scheme: dark) { + color: $lightGrey; + } position: absolute; margin-left: -15px; } @@ -230,7 +254,10 @@ table { border-spacing: 0; thead { - background: $lightGrey; + color: $lightGrey; + @media (prefers-color-scheme: dark) { + color: $darkGrey; + } } th, diff --git a/assets/scss/pages/posts.scss b/assets/scss/pages/posts.scss index 4a89154ab..4cc16d699 100644 --- a/assets/scss/pages/posts.scss +++ b/assets/scss/pages/posts.scss @@ -47,6 +47,9 @@ &:hover { color: $darkGrey; + @media (prefers-color-scheme: dark) { + color: $lightGrey; + } } } diff --git a/assets/scss/partials/_burger.scss b/assets/scss/partials/_burger.scss index 07d43702f..7798d4212 100644 --- a/assets/scss/partials/_burger.scss +++ b/assets/scss/partials/_burger.scss @@ -6,6 +6,9 @@ position: fixed; width: 100%; background: $white; + @media (prefers-color-scheme: dark) { + background: $black; + } z-index: 2; @media screen and (min-width: $medium) { @@ -25,6 +28,9 @@ width: $meatWidth; height: $meatHeight; background: $black; + @media (prefers-color-scheme: dark) { + background: $white; + } top: calc(50% - #{$meatHeight} / 2); left: calc(50% - #{$meatWidth} / 2); transition: all 150ms ease-in; diff --git a/assets/scss/partials/_github-syntax-highlighting.scss b/assets/scss/partials/_github-syntax-highlighting.scss index c61ab5531..14903dc62 100644 --- a/assets/scss/partials/_github-syntax-highlighting.scss +++ b/assets/scss/partials/_github-syntax-highlighting.scss @@ -1,6 +1,9 @@ code[class*="language-"], pre[class*="language-"] { - color: #24292e; + color: #ffffff; + @media (prefers-color-scheme: dark) { + color: #0d1117; + } -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; diff --git a/assets/scss/partials/_nav.scss b/assets/scss/partials/_nav.scss index e323283d7..6c076020e 100644 --- a/assets/scss/partials/_nav.scss +++ b/assets/scss/partials/_nav.scss @@ -7,6 +7,9 @@ justify-content: center; align-items: center; background: $white; + @media (prefers-color-scheme: dark) { + background: $black; + } visibility: hidden; z-index: 1; @@ -70,10 +73,16 @@ &.active { color: $black; + @media (prefers-color-scheme: dark) { + color: $white; + } } &:hover { color: $black; + @media (prefers-color-scheme: dark) { + color: $white; + } } @media screen and (min-width: $medium) { diff --git a/assets/scss/partials/_post-list.scss b/assets/scss/partials/_post-list.scss index 544bf7071..2a3d09613 100644 --- a/assets/scss/partials/_post-list.scss +++ b/assets/scss/partials/_post-list.scss @@ -24,6 +24,9 @@ a { color: $black; + @media (prefers-color-scheme: dark) { + color: $white; + } text-decoration: none; } } diff --git a/assets/scss/partials/_reset.scss b/assets/scss/partials/_reset.scss index 78ebe1605..fcd7fa622 100644 --- a/assets/scss/partials/_reset.scss +++ b/assets/scss/partials/_reset.scss @@ -2,6 +2,10 @@ html, body { background-color: $white; color: $black; + @media (prefers-color-scheme: dark) { + background-color: $black; + color: $white; + } height: 100%; } diff --git a/assets/scss/partials/_typography.scss b/assets/scss/partials/_typography.scss index c695b0037..034eff265 100644 --- a/assets/scss/partials/_typography.scss +++ b/assets/scss/partials/_typography.scss @@ -87,12 +87,18 @@ blockquote { z-index: -1; color: darken($white, 7%); + @media (prefers-color-scheme: dark) { + color: lighten($black, 7%); + } } margin-top: $leading; margin-bottom: $leading; line-height: $leading; color: $black; + @media (prefers-color-scheme: dark) { + color: $white; + } cite { &::before { @@ -102,6 +108,9 @@ blockquote { font-style: italic; font-size: 0.95em; color: $darkGrey; + @media (prefers-color-scheme: dark) { + color: $lightGrey; + } } } @@ -112,6 +121,9 @@ pre { word-wrap: normal; overflow: auto; background-color: #f6f8fa; + @media (prefers-color-scheme: dark) { + background-color: #090705; + } border-radius: 3px; } @@ -121,6 +133,9 @@ code { padding: 0.2em 0.4em; margin: 0; background-color: rgba(27, 31, 35, 0.05); + @media (prefers-color-scheme: dark) { + background-color: rgba(27, 31, 35, 0.95); + } border-radius: 3px; } diff --git a/static/svg/chevron-left.svg b/static/svg/chevron-left.svg index 3187d4771..80012fdff 100644 --- a/static/svg/chevron-left.svg +++ b/static/svg/chevron-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/svg/email.svg b/static/svg/email.svg index 2af169e83..db5f95b21 100644 --- a/static/svg/email.svg +++ b/static/svg/email.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/svg/facebook.svg b/static/svg/facebook.svg index 2570f56a0..595acbd48 100644 --- a/static/svg/facebook.svg +++ b/static/svg/facebook.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/svg/github.svg b/static/svg/github.svg index 5426bf4e3..35fc52e86 100644 --- a/static/svg/github.svg +++ b/static/svg/github.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/svg/gitlab.svg b/static/svg/gitlab.svg index 85d54a1ea..acf4e7c66 100644 --- a/static/svg/gitlab.svg +++ b/static/svg/gitlab.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/svg/instagram.svg b/static/svg/instagram.svg index 9fdb8e35d..5a5177614 100644 --- a/static/svg/instagram.svg +++ b/static/svg/instagram.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/svg/linkedin.svg b/static/svg/linkedin.svg index 395310945..95c2cf70a 100644 --- a/static/svg/linkedin.svg +++ b/static/svg/linkedin.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/svg/mastodon.svg b/static/svg/mastodon.svg index 13a92c8e8..91d6bb340 100644 --- a/static/svg/mastodon.svg +++ b/static/svg/mastodon.svg @@ -1,63 +1 @@ - - - - - - image/svg+xml - - - - - - - - - - + \ No newline at end of file diff --git a/static/svg/twitter.svg b/static/svg/twitter.svg index 13c97b98c..7bd0cd2d0 100644 --- a/static/svg/twitter.svg +++ b/static/svg/twitter.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/static/svg/youtube.svg b/static/svg/youtube.svg index c48243850..ec4b84933 100644 --- a/static/svg/youtube.svg +++ b/static/svg/youtube.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file