From cb4379e19f22b0e389f369a048c5cce9321366c6 Mon Sep 17 00:00:00 2001 From: danix Date: Thu, 23 Feb 2023 13:30:25 +0100 Subject: [PATCH] =?utf8?q?added=20dark=20theme=20option.=20It=20=C3=ACs=20?= =?utf8?q?selected=20automagically=20based=20on=20system=20choiche=20of=20?= =?utf8?q?dark=20or=20light=20theme.?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- assets/sass/base/_page.scss | 5 ++- assets/sass/base/_typography.scss | 40 +++++++++++++---- assets/sass/components/_box.scss | 5 ++- assets/sass/components/_button.scss | 58 +++++++++++++++++++------ assets/sass/components/_form.scss | 34 +++++++-------- assets/sass/components/_icon.scss | 18 ++++++-- assets/sass/components/_image.scss | 5 ++- assets/sass/components/_list.scss | 5 ++- assets/sass/components/_pagination.scss | 21 ++++++--- assets/sass/components/_section.scss | 5 ++- assets/sass/components/_spotlights.scss | 15 +++++-- assets/sass/components/_table.scss | 30 ++++++++++--- assets/sass/components/_tiles.scss | 35 ++++++++++++--- assets/sass/layout/_banner.scss | 26 ++++++++--- assets/sass/layout/_contact.scss | 15 +++++-- assets/sass/layout/_header.scss | 53 ++++++++++++++++------ assets/sass/layout/_main.scss | 15 +++++-- assets/sass/layout/_menu.scss | 25 ++++++++--- assets/sass/libs/_functions.scss | 13 ++++-- assets/sass/libs/_vars.scss | 50 +++++++++++++-------- assets/sass/main.scss | 1 - layouts/partials/head.html | 2 + 22 files changed, 355 insertions(+), 121 deletions(-) diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss index bb2827a..8c91e4f 100644 --- a/assets/sass/base/_page.scss +++ b/assets/sass/base/_page.scss @@ -34,7 +34,10 @@ } body { - background: _palette(bg); + background: _palette_light(bg); + @media screen and (prefers-color-scheme: dark) { + background: _palette_dark(bg); + } // Stops initial animations until page loads. &.is-preload { diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss index 2009f4d..82a5b18 100644 --- a/assets/sass/base/_typography.scss +++ b/assets/sass/base/_typography.scss @@ -7,7 +7,10 @@ /* Type */ body, input, select, textarea { - color: _palette(fg); + color: _palette_light(fg); + @media screen and (prefers-color-scheme: dark) { + color: _palette_dark(fg); + } font-family: _font(family); font-size: 17pt; font-weight: _font(weight); @@ -38,16 +41,25 @@ &:hover { border-bottom-color: transparent; - color: _palette(highlight) !important; + color: _palette_light(highlight) !important; + @media screen and (prefers-color-scheme: dark) { + color: _palette_dark(highlight); + } } &:active { - color: desaturate(darken(_palette(highlight), 15), 5) !important; + color: desaturate(darken(_palette_light(highlight), 15), 5) !important; + @media screen and (prefers-color-scheme: dark) { + color: desaturate(darken(_palette_dark(highlight), 15), 5) !important; + } } } strong, b { - color: _palette(fg-bold); + color: _palette_light(fg-bold); + @media screen and (prefers-color-scheme: dark) { + color: _palette_dark(fg-bold); + } font-weight: _font(weight-bold); } @@ -60,7 +72,10 @@ } h1, h2, h3, h4, h5, h6 { - color: _palette(fg-bold); + color: _palette_light(fg-bold); + @media screen and (prefers-color-scheme: dark) { + color: _palette_dark(fg-bold); + } font-weight: _font(weight-bold); line-height: 1.65; margin: 0 0 (_size(element-margin) * 0.5) 0; @@ -122,14 +137,20 @@ } blockquote { - border-left: solid 4px _palette(border); + border-left: solid 4px _palette_light(border); + @media screen and (prefers-color-scheme: dark) { + border-left: solid 4px _palette_dark(border); + } font-style: italic; margin: 0 0 _size(element-margin) 0; padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin); } code { - background: _palette(border-bg); + background: _palette_light(border-bg); + @media screen and (prefers-color-scheme: dark) { + background: _palette_dark(border-bg); + } font-family: _font(family-fixed); font-size: 0.9em; margin: 0 0.25em; @@ -152,7 +173,10 @@ hr { border: 0; - border-bottom: solid 1px _palette(border); + border-bottom: solid 1px _palette_light(border); + @media screen and (prefers-color-scheme: dark) { + border-bottom: solid 1px _palette_dark(border); + } margin: _size(element-margin) 0; &.major { diff --git a/assets/sass/components/_box.scss b/assets/sass/components/_box.scss index 45a37a0..c48c687 100644 --- a/assets/sass/components/_box.scss +++ b/assets/sass/components/_box.scss @@ -7,7 +7,10 @@ /* Box */ .box { - border: solid 1px _palette(border); + border: solid 1px _palette_light(border); + @media screen and (prefers-color-scheme: dark) { + border-bottom: solid 1px _palette_dark(border); + } margin-bottom: _size(element-margin); padding: 1.5em; diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss index fc903c1..a23e8d8 100644 --- a/assets/sass/components/_button.scss +++ b/assets/sass/components/_button.scss @@ -20,8 +20,12 @@ background-color: transparent; border: 0; border-radius: 0; - box-shadow: inset 0 0 0 2px _palette(fg-bold); - color: _palette(fg-bold); + box-shadow: inset 0 0 0 2px _palette_light(fg-bold); + color: _palette_light(fg-bold); + @media screen and (prefers-color-scheme: dark) { + box-shadow: inset 0 0 0 2px _palette_dark(fg-bold); + color: _palette_dark(fg-bold); + } cursor: pointer; display: inline-block; font-size: 0.8em; @@ -36,14 +40,23 @@ white-space: nowrap; &:hover, &:active { - box-shadow: inset 0 0 0 2px _palette(highlight); - color: _palette(highlight); + box-shadow: inset 0 0 0 2px _palette_light(highlight); + color: _palette_light(highlight); + @media screen and (prefers-color-scheme: dark) { + box-shadow: inset 0 0 0 2px _palette_dark(highlight); + color: _palette_dark(highlight); + } } &:active { - background-color: transparentize(_palette(highlight), 0.9); - box-shadow: inset 0 0 0 2px desaturate(darken(_palette(highlight), 15), 5); - color: desaturate(darken(_palette(highlight), 15), 5); + background-color: transparentize(_palette_light(highlight), 0.9); + box-shadow: inset 0 0 0 2px desaturate(darken(_palette_light(highlight), 15), 5); + color: desaturate(darken(_palette_light(highlight), 15), 5); + @media screen and (prefers-color-scheme: dark) { + background-color: transparentize(_palette_dark(highlight), 0.9); + box-shadow: inset 0 0 0 2px desaturate(darken(_palette_dark(highlight), 15), 5); + color: desaturate(darken(_palette_dark(highlight), 15), 5); + } } &.icon { @@ -86,11 +99,17 @@ } &:before { - background-image: svg-url(''); + background-image: svg-url(''); + @media screen and (prefers-color-scheme: dark) { + background-image: svg-url(''); + } } &:after { - background-image: svg-url(''); + background-image: svg-url(''); + @media screen and (prefers-color-scheme: dark) { + background-image: svg-url(''); + } opacity: 0; z-index: 1; } @@ -107,17 +126,28 @@ } &.primary { - background-color: _palette(fg-bold); + background-color: _palette_light(fg-bold); box-shadow: none; - color: _palette(bg); + color: _palette_light(bg); + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(fg-bold); + color: _palette_dark(bg); + } &:hover, &:active { - background-color: _palette(highlight); - color: _palette(bg) !important; + background-color: _palette_light(highlight); + color: _palette_light(bg) !important; + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(highlight); + color: _palette_dark(bg) !important; + } } &:active { - background-color: desaturate(darken(_palette(highlight), 15), 5); + background-color: desaturate(darken(_palette_light(highlight), 15), 5); + @media screen and (prefers-color-scheme: dark) { + background-color: desaturate(darken(_palette_dark(highlight), 15), 5); + } } } diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss index fed297d..5d20c58 100644 --- a/assets/sass/components/_form.scss +++ b/assets/sass/components/_form.scss @@ -69,7 +69,7 @@ } label { - color: _palette(fg-bold); + color: _palette_light(fg-bold); display: block; font-size: 0.8em; font-weight: _font(weight-bold); @@ -87,7 +87,7 @@ select, textarea { @include vendor('appearance', 'none'); - background: _palette(border-bg); + background: _palette_light(border-bg); border: none; border-radius: 0; color: inherit; @@ -102,13 +102,13 @@ } &:focus { - border-color: _palette(highlight); - box-shadow: 0 0 0 2px _palette(highlight); + border-color: _palette_light(highlight); + box-shadow: 0 0 0 2px _palette_light(highlight); } } select { - background-image: svg-url(""); + background-image: svg-url(""); background-size: 1.25rem; background-repeat: no-repeat; background-position: calc(100% - 1rem) center; @@ -117,8 +117,8 @@ text-overflow: ellipsis; option { - color: _palette(fg-bold); - background: _palette(bg); + color: _palette_light(fg-bold); + background: _palette_light(bg); } &:focus { @@ -158,7 +158,7 @@ & + label { @include icon(false, solid); - color: _palette(fg); + color: _palette_light(fg); cursor: pointer; display: inline-block; font-weight: _font(weight); @@ -167,7 +167,7 @@ position: relative; &:before { - background: _palette(border-bg); + background: _palette_light(border-bg); content: ''; display: inline-block; font-size: 0.8em; @@ -184,16 +184,16 @@ &:checked + label { &:before { - background: _palette(fg-bold); - border-color: _palette(highlight); + background: _palette_light(fg-bold); + border-color: _palette_light(highlight); content: '\f00c'; - color: _palette(bg); + color: _palette_light(bg); } } &:focus + label { &:before { - box-shadow: 0 0 0 2px _palette(highlight); + box-shadow: 0 0 0 2px _palette_light(highlight); } } } @@ -214,21 +214,21 @@ } ::-webkit-input-placeholder { - color: _palette(fg-light) !important; + color: _palette_light(fg-light) !important; opacity: 1.0; } :-moz-placeholder { - color: _palette(fg-light) !important; + color: _palette_light(fg-light) !important; opacity: 1.0; } ::-moz-placeholder { - color: _palette(fg-light) !important; + color: _palette_light(fg-light) !important; opacity: 1.0; } :-ms-input-placeholder { - color: _palette(fg-light) !important; + color: _palette_light(fg-light) !important; opacity: 1.0; } \ No newline at end of file diff --git a/assets/sass/components/_icon.scss b/assets/sass/components/_icon.scss index 212f337..86ad81c 100644 --- a/assets/sass/components/_icon.scss +++ b/assets/sass/components/_icon.scss @@ -33,14 +33,18 @@ &.alt { &:before { - background-color: _palette(fg-bold); + background-color: _palette_light(fg-bold); border-radius: 100%; - color: _palette(bg); + color: _palette_light(bg); display: inline-block; height: 2em; line-height: 2em; text-align: center; width: 2em; + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(fg-bold); + color: _palette_dark(bg); + } } } } @@ -53,13 +57,19 @@ &:hover { &:before { - background-color: _palette(accent1); + background-color: _palette_light(accent1); + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(accent1); + } } } &:active { &:before { - background-color: desaturate(darken(_palette(accent1), 15), 5); + background-color: desaturate(darken(_palette_light(accent1), 15), 5); + @media screen and (prefers-color-scheme: dark) { + background-color: desaturate(darken(_palette_dark(accent1), 15), 5); + } } } } diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss index 6e1388e..6f7981c 100644 --- a/assets/sass/components/_image.scss +++ b/assets/sass/components/_image.scss @@ -63,7 +63,10 @@ .circle > img { @include circle(200px, "block"); - @include box-shadow(-5px, 5px, 5px, _palette(fg-bold)); + @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold)); + @media screen and (prefers-color-scheme: dark) { + @include box-shadow(-5px, 5px, 5px, _palette_dark(fg-bold)); + } } video { diff --git a/assets/sass/components/_list.scss b/assets/sass/components/_list.scss index 56989df..f29066f 100644 --- a/assets/sass/components/_list.scss +++ b/assets/sass/components/_list.scss @@ -30,7 +30,10 @@ padding-left: 0; li { - border-top: solid 1px _palette(border); + border-top: solid 1px _palette_light(border); + @media screen and (prefers-color-scheme: dark) { + border-top: solid 1px _palette_dark(border); + } padding: 0.5em 0; &:first-child { diff --git a/assets/sass/components/_pagination.scss b/assets/sass/components/_pagination.scss index cb39c39..1a7ef05 100644 --- a/assets/sass/components/_pagination.scss +++ b/assets/sass/components/_pagination.scss @@ -33,16 +33,27 @@ text-align: center; &.active { - background-color: _palette(fg-bold); - color: _palette(bg); + background-color: _palette_light(fg-bold); + color: _palette_light(bg); + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(fg-bold); + color: _palette_dark(bg); + } &:hover { - background-color: _palette(highlight); - color: _palette(bg) !important; + background-color: _palette_light(highlight); + color: _palette_light(bg) !important; + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(highlight); + color: _palette_dark(bg) !important; + } } &:active { - background-color: desaturate(darken(_palette(highlight), 15), 5); + background-color: desaturate(darken(_palette_light(highlight), 15), 5); + @media screen and (prefers-color-scheme: dark) { + background-color: desaturate(darken(_palette_dark(highlight), 15), 5); + } } } } diff --git a/assets/sass/components/_section.scss b/assets/sass/components/_section.scss index 2bdad69..b12e1e1 100644 --- a/assets/sass/components/_section.scss +++ b/assets/sass/components/_section.scss @@ -26,11 +26,14 @@ &:after { content: ''; - background-color: _palette(fg-bold); + background-color: _palette_light(fg-bold); display: block; height: 2px; margin: 0.325em 0 0.5em 0; width: 100%; + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(fg-bold); + } } } diff --git a/assets/sass/components/_spotlights.scss b/assets/sass/components/_spotlights.scss index 337bc1a..882ebe4 100644 --- a/assets/sass/components/_spotlights.scss +++ b/assets/sass/components/_spotlights.scss @@ -16,7 +16,10 @@ > section { @include vendor('display', 'flex'); @include vendor('flex-direction', 'row'); - background-color: desaturate(lighten(_palette(bg-alt), 2), 1); + background-color: desaturate(lighten(_palette_light(bg-alt), 2), 1); + @media screen and (prefers-color-scheme: dark) { + background-color: desaturate(lighten(_palette_dark(bg-alt), 2), 1); + } > .image { background-position: center center; @@ -33,7 +36,7 @@ } &:before { - background: transparentize(_palette(bg), 0.1); + background: transparentize(_palette_light(bg), 0.1); content: ''; display: block; height: 100%; @@ -42,6 +45,9 @@ position: absolute; top: 0; width: 100%; + @media screen and (prefers-color-scheme: dark) { + background: transparentize(_palette_dark(bg), 0.1); + } } } @@ -62,7 +68,10 @@ &:nth-child(2n) { @include vendor('flex-direction', 'row-reverse'); - background-color: desaturate(lighten(_palette(bg-alt), 4), 2); + background-color: desaturate(lighten(_palette_light(bg-alt), 4), 2); + @media screen and (prefers-color-scheme: dark) { + background-color: desaturate(lighten(_palette_dark(bg-alt), 4), 2); + } > .content { @include vendor('align-items', 'flex-end'); diff --git a/assets/sass/components/_table.scss b/assets/sass/components/_table.scss index e020928..081ac22 100644 --- a/assets/sass/components/_table.scss +++ b/assets/sass/components/_table.scss @@ -17,12 +17,18 @@ tbody { tr { - border: solid 1px _palette(border); + border: solid 1px _palette_light(border); border-left: 0; border-right: 0; + @media screen and (prefers-color-scheme: dark) { + border: solid 1px _palette_dark(border); + } &:nth-child(2n + 1) { - background-color: _palette(border-bg); + background-color: _palette_light(border-bg); + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(border-bg); + } } } } @@ -32,19 +38,28 @@ } th { - color: _palette(fg-bold); + color: _palette_light(fg-bold); font-size: 0.9em; font-weight: _font(weight-bold); padding: 0 0.75em 0.75em 0.75em; text-align: left; + @media screen and (prefers-color-scheme: dark) { + color: _palette_dark(fg-bold); + } } thead { - border-bottom: solid 2px _palette(border); + border-bottom: solid 2px _palette_light(border); + @media screen and (prefers-color-scheme: dark) { + border-bottom: solid 2px _palette_dark(border); + } } tfoot { - border-top: solid 2px _palette(border); + border-top: solid 2px _palette_light(border); + @media screen and (prefers-color-scheme: dark) { + border-top: solid 2px _palette_dark(border); + } } &.alt { @@ -53,9 +68,12 @@ tbody { tr { td { - border: solid 1px _palette(border); + border: solid 1px _palette_light(border); border-left-width: 0; border-top-width: 0; + @media screen and (prefers-color-scheme: dark) { + border-top: solid 1px _palette_dark(border); + } &:first-child { border-left-width: 1px; diff --git a/assets/sass/components/_tiles.scss b/assets/sass/components/_tiles.scss index 71745cf..4e199ae 100644 --- a/assets/sass/components/_tiles.scss +++ b/assets/sass/components/_tiles.scss @@ -79,7 +79,7 @@ } &:after { - background-color: transparentize(_palette(bg), 0.75); + background-color: transparentize(_palette_light(bg), 0.75); content: ''; display: block; height: 100%; @@ -88,6 +88,9 @@ top: 0; width: 100%; z-index: 1; + @media screen and (prefers-color-scheme: dark) { + background-color: transparentize(_palette_dark(bg), 0.75); + } } &:hover { @@ -109,37 +112,55 @@ &:nth-child(6n - 5) { &:before { - background-color: _palette(accent1); + background-color: _palette_light(accent1); + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(accent1); + } } } &:nth-child(6n - 4) { &:before { - background-color: _palette(accent2); + background-color: _palette_light(accent2); + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(accent2); + } } } &:nth-child(6n - 3) { &:before { - background-color: _palette(accent3); + background-color: _palette_light(accent3); + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(accent3); + } } } &:nth-child(6n - 2) { &:before { - background-color: _palette(accent4); + background-color: _palette_light(accent4); + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(accent4); + } } } &:nth-child(6n - 1) { &:before { - background-color: _palette(accent5); + background-color: _palette_light(accent5); + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(accent5); + } } } &:nth-child(6n) { &:before { - background-color: _palette(accent6); + background-color: _palette_light(accent6); + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(accent6); + } } } } diff --git a/assets/sass/layout/_banner.scss b/assets/sass/layout/_banner.scss index 64481d7..1470f92 100644 --- a/assets/sass/layout/_banner.scss +++ b/assets/sass/layout/_banner.scss @@ -28,7 +28,7 @@ @include vendor('transition', 'opacity #{_duration(banner)} ease'); @include vendor('transition-delay', '0.75s'); @include vendor('pointer-events', 'none'); - background-color: _palette(bg); + background-color: _palette_light(bg); content: ''; display: block; height: 100%; @@ -38,6 +38,9 @@ top: 0; width: 100%; z-index: 1; + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(bg); + } } h1 { @@ -104,12 +107,21 @@ } } - &.style1 { &:after { background-color: _palette(accent1); } } - &.style2 { &:after { background-color: _palette(accent2); } } - &.style3 { &:after { background-color: _palette(accent3); } } - &.style4 { &:after { background-color: _palette(accent4); } } - &.style5 { &:after { background-color: _palette(accent5); } } - &.style6 { &:after { background-color: _palette(accent6); } } + &.style1 { &:after { background-color: _palette_light(accent1); } } + &.style2 { &:after { background-color: _palette_light(accent2); } } + &.style3 { &:after { background-color: _palette_light(accent3); } } + &.style4 { &:after { background-color: _palette_light(accent4); } } + &.style5 { &:after { background-color: _palette_light(accent5); } } + &.style6 { &:after { background-color: _palette_light(accent6); } } + + @media screen and (prefers-color-scheme: dark) { + &.style1 { &:after { background-color: _palette_dark(accent1); } } + &.style2 { &:after { background-color: _palette_dark(accent2); } } + &.style3 { &:after { background-color: _palette_dark(accent3); } } + &.style4 { &:after { background-color: _palette_dark(accent4); } } + &.style5 { &:after { background-color: _palette_dark(accent5); } } + &.style6 { &:after { background-color: _palette_dark(accent6); } } + } body.is-preload & { &:after { diff --git a/assets/sass/layout/_contact.scss b/assets/sass/layout/_contact.scss index e9364bb..f224d4a 100644 --- a/assets/sass/layout/_contact.scss +++ b/assets/sass/layout/_contact.scss @@ -7,8 +7,11 @@ /* Contact */ #contact { - border-bottom: solid 1px _palette(border); + border-bottom: solid 1px _palette_light(border); overflow-x: hidden; + @media screen and (prefers-color-scheme: dark) { + border-bottom: solid 1px _palette_dark(border); + } > .inner { @include vendor('display', 'flex'); @@ -16,8 +19,11 @@ > :nth-child(2n - 1) { @include padding(4em, 0, (0, 3em, 0, 0)); - border-right: solid 1px _palette(border); + border-right: solid 1px _palette_light(border); width: 60%; + @media screen and (prefers-color-scheme: dark) { + border-right: solid 1px _palette_dark(border); + } } > :nth-child(2n) { @@ -33,13 +39,16 @@ position: relative; &:before { - border-top: solid 1px _palette(border); + border-top: solid 1px _palette_light(border); content: ''; display: block; margin-left: -3em; position: absolute; top: 0; width: calc(100vw + 3em); + @media screen and (prefers-color-scheme: dark) { + border-top: solid 1px _palette_dark(border); + } } } diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss index eb7d7e3..696bf4a 100644 --- a/assets/sass/layout/_header.scss +++ b/assets/sass/layout/_header.scss @@ -13,7 +13,7 @@ #header { @include vendor('display', 'flex'); - background-color: _palette(bg-alt); + background-color: _palette_light(bg-alt); box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.15); cursor: default; font-weight: _font(weight-bold); @@ -27,6 +27,9 @@ top: 0; width: 100%; z-index: _misc(z-index-base); + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(bg-alt); + } .logo { border: 0; @@ -41,23 +44,33 @@ 'background-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out' )); - background-color: _palette(fg-bold); - color: _palette(bg); + background-color: _palette_light(fg-bold); + color: _palette_light(bg); display: inline-block; line-height: 1.65em; margin-right: 0.325em; padding: 0 0.125em 0 (_font(letter-spacing-alt) + 0.125em); + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(fg-bold); + color: _palette_dark(bg); + } } &:hover { strong { - background-color: _palette(highlight); + background-color: _palette_light(highlight); + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(highlight); + } } } &:active { strong { - background-color: desaturate(darken(_palette(highlight), 15), 5); + background-color: desaturate(darken(_palette_light(highlight), 15), 5); + @media screen and (prefers-color-scheme: dark) { + background-color: desaturate(darken(_palette_dark(highlight), 15), 5); + } } } } @@ -87,7 +100,7 @@ padding-right: 3.325em !important; &:before, &:after { - background-image: svg-url(''); + background-image: svg-url(''); background-position: center; background-repeat: no-repeat; background-size: 24px 32px; @@ -99,13 +112,19 @@ top: 0; vertical-align: middle; width: 24px; + @media screen and (prefers-color-scheme: dark) { + background-image: svg-url(''); + } } &:after { @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); - background-image: svg-url(''); + background-image: svg-url(''); opacity: 0; z-index: 1; + @media screen and (prefers-color-scheme: dark) { + background-image: svg-url(''); + } } &:hover, &:active { @@ -137,12 +156,20 @@ box-shadow: none; position: absolute; - &.style1 { .logo { strong { color: _palette(accent1); } } } - &.style2 { .logo { strong { color: _palette(accent2); } } } - &.style3 { .logo { strong { color: _palette(accent3); } } } - &.style4 { .logo { strong { color: _palette(accent4); } } } - &.style5 { .logo { strong { color: _palette(accent5); } } } - &.style6 { .logo { strong { color: _palette(accent6); } } } + &.style1 { .logo { strong { color: _palette_light(accent1); } } } + &.style2 { .logo { strong { color: _palette_light(accent2); } } } + &.style3 { .logo { strong { color: _palette_light(accent3); } } } + &.style4 { .logo { strong { color: _palette_light(accent4); } } } + &.style5 { .logo { strong { color: _palette_light(accent5); } } } + &.style6 { .logo { strong { color: _palette_light(accent6); } } } + @media screen and (prefers-color-scheme: dark) { + &.style1 { .logo { strong { color: _palette_dark(accent1); } } } + &.style2 { .logo { strong { color: _palette_dark(accent2); } } } + &.style3 { .logo { strong { color: _palette_dark(accent3); } } } + &.style4 { .logo { strong { color: _palette_dark(accent4); } } } + &.style5 { .logo { strong { color: _palette_dark(accent5); } } } + &.style6 { .logo { strong { color: _palette_dark(accent6); } } } + } } body.is-preload & { diff --git a/assets/sass/layout/_main.scss b/assets/sass/layout/_main.scss index f1d7239..a673a3b 100644 --- a/assets/sass/layout/_main.scss +++ b/assets/sass/layout/_main.scss @@ -7,10 +7,16 @@ /* Main */ #main { - background-color: _palette(bg-alt); + background-color: _palette_light(bg-alt); + @media screen and (prefers-color-scheme: dark) { + background-color: _palette_dark(bg-alt); + } > * { - border-top: solid 1px _palette(border); + border-top: solid 1px _palette_light(border); + @media screen and (prefers-color-scheme: dark) { + border-top: solid 1px _palette_dark(border); + } &:first-child { border-top: 0; @@ -21,6 +27,9 @@ &.alt { background-color: transparent; - border-bottom: solid 1px _palette(border); + border-bottom: solid 1px _palette_light(border); + @media screen and (prefers-color-scheme: dark) { + border-bottom: solid 1px _palette_dark(border); + } } } \ No newline at end of file diff --git a/assets/sass/layout/_menu.scss b/assets/sass/layout/_menu.scss index e53f21f..a12dca2 100644 --- a/assets/sass/layout/_menu.scss +++ b/assets/sass/layout/_menu.scss @@ -16,7 +16,7 @@ @include vendor('display', 'flex'); @include vendor('justify-content', 'center'); @include vendor('pointer-events', 'none'); - background: transparentize(_palette(bg), 0.1); + background: transparentize(_palette_light(bg), 0.1); box-shadow: none; height: 100%; left: 0; @@ -28,6 +28,9 @@ visibility: hidden; width: 100%; z-index: _misc(z-index-base) + 2; + @media screen and (prefers-color-scheme: dark) { + background: transparentize(_palette_dark(bg), 0.1); + } .inner { @include vendor('transition', ( @@ -66,7 +69,7 @@ > a:not(.button) { border: 0; - border-top: solid 1px _palette(border); + border-top: solid 1px _palette_light(border); display: block; font-size: 0.8em; font-weight: _font(weight-bold); @@ -74,6 +77,9 @@ line-height: 4em; text-decoration: none; text-transform: uppercase; + @media screen and (prefers-color-scheme: dark) { + border-top: solid 1px _palette_dark(border); + } } > .button { @@ -123,12 +129,18 @@ } &:before { - background-image: svg-url(''); + background-image: svg-url(''); + @media screen and (prefers-color-scheme: dark) { + background-image: svg-url(''); + } } &:after { - background-image: svg-url(''); + background-image: svg-url(''); opacity: 0; + @media screen and (prefers-color-scheme: dark) { + background-image: svg-url(''); + } } &:hover, &:active { @@ -141,7 +153,10 @@ body.is-ie { #menu { - background: transparentize(_palette(bg-alt), 0.025); + background: transparentize(_palette_light(bg-alt), 0.025); + @media screen and (prefers-color-scheme: dark) { + background: transparentize(_palette_dark(bg-alt), 0.025); + } } } diff --git a/assets/sass/libs/_functions.scss b/assets/sass/libs/_functions.scss index f563aab..ada16cb 100644 --- a/assets/sass/libs/_functions.scss +++ b/assets/sass/libs/_functions.scss @@ -75,11 +75,18 @@ @return val($misc, $keys...); } -/// Gets a palette value. +/// Gets a dark palette value. /// @param {string} $keys Key(s). /// @return {string} Value. -@function _palette($keys...) { - @return val($palette, $keys...); +@function _palette_dark($keys...) { + @return val($palette_dark, $keys...); +} + +/// Gets a light palette value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _palette_light($keys...) { + @return val($palette_light, $keys...); } /// Gets a size value. diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss index da67b83..ae20d8f 100644 --- a/assets/sass/libs/_vars.scss +++ b/assets/sass/libs/_vars.scss @@ -28,20 +28,36 @@ letter-spacing-alt: 0.25em ); -// Palette. - $palette: ( - bg: #D8D9CF, - bg-alt: #F0EEED, - fg: #393E46, - fg-bold: #222831, - fg-light: rgba(216,217,207,0.2), - border: rgba(57,62,70,0.1), - border-bg: rgba(34,40,49,0.035), - highlight: #FD7014, - accent1: #FF8B13, - accent2: #CF4DCE, - accent3: #F273E6, - accent4: #e7b788, - accent5: #8ea9e8, - accent6: #609EA2 - ); \ No newline at end of file + // Palette. + $palette_light: ( + bg: #D8D9CF, + bg-alt: #F0EEED, + fg: #393E46, + fg-bold: #222831, + fg-light: rgba(216,217,207,0.2), + border: rgba(57,62,70,0.1), + border-bg: rgba(34,40,49,0.035), + highlight: #FD7014, + accent1: #FF8B13, + accent2: #CF4DCE, + accent3: #F273E6, + accent4: #e7b788, + accent5: #8ea9e8, + accent6: #609EA2 + ); + $palette_dark: ( + bg: #393E46, + bg-alt: #222831, + fg: #D8D9CF, + fg-bold: #F0EEED, + fg-light: rgba(216,217,207,0.2), + border: rgba(57,62,70,0.1), + border-bg: rgba(34,40,49,0.035), + highlight: #FD7014, + accent1: #FF8B13, + accent2: #CF4DCE, + accent3: #F273E6, + accent4: #e7b788, + accent5: #8ea9e8, + accent6: #609EA2 + ); diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 4f838e9..37f5678 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -20,7 +20,6 @@ xxsmall: (null, 360px ) )); - // Mixins. @mixin inner { diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 46f5ee3..0f5757b 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,8 +1,10 @@ + + {{ $style_options := (dict "targetPath" "css/style.css" "outputStyle" "compressed" "transpiler" "dartsass" "enableSourceMap" (not hugo.IsProduction)) }} {{ $style := resources.Get "sass/main.scss" | resources.ToCSS $style_options }} -- 2.20.1