From 04473a6660ab4ab9d69528381b6db610e7de323c Mon Sep 17 00:00:00 2001 From: Ariejan de Vroom Date: Mon, 27 May 2024 16:05:54 +0200 Subject: [PATCH] Dark/Light mode --- .../assets/scss/_colors_dark.scss | 19 ++++++++ .../assets/scss/_colors_light.scss | 19 ++++++++ .../assets/scss/{devroom.scss => _site.scss} | 46 ++++++++++-------- .../assets/scss/devroom_dark.scss | 2 + .../assets/scss/devroom_light.scss | 2 + .../devroom-2024/layouts/_default/baseof.html | 47 ++++++++++++++++--- .../devroom-2024/layouts/partials/header.html | 11 +++++ 7 files changed, 119 insertions(+), 27 deletions(-) create mode 100644 themes/devroom-2024/assets/scss/_colors_dark.scss create mode 100644 themes/devroom-2024/assets/scss/_colors_light.scss rename themes/devroom-2024/assets/scss/{devroom.scss => _site.scss} (93%) create mode 100644 themes/devroom-2024/assets/scss/devroom_dark.scss create mode 100644 themes/devroom-2024/assets/scss/devroom_light.scss diff --git a/themes/devroom-2024/assets/scss/_colors_dark.scss b/themes/devroom-2024/assets/scss/_colors_dark.scss new file mode 100644 index 0000000..43b1b16 --- /dev/null +++ b/themes/devroom-2024/assets/scss/_colors_dark.scss @@ -0,0 +1,19 @@ +$accent: rgb(90, 126, 193); +$background: rgb(40, 44, 53); +$backdrop: darken($background, 5%); +$text: rgb(226, 226, 226); +$subtext: #868686; +$links: $accent; +$footer: $subtext; +$meta: $text; +$header: $text; +$highlight: $links; +$blockquote_border: $accent; +$important_border: #f00; +$code_background: $text; +$code_border_color: $text; +$code: $background; +$separator: darken(desaturate($accent, 20%), 20%); +$darkmode_icon: $text; +$tag_background: $accent; +$tag_color: $text; \ No newline at end of file diff --git a/themes/devroom-2024/assets/scss/_colors_light.scss b/themes/devroom-2024/assets/scss/_colors_light.scss new file mode 100644 index 0000000..0c3db18 --- /dev/null +++ b/themes/devroom-2024/assets/scss/_colors_light.scss @@ -0,0 +1,19 @@ +$accent: rgb(90, 126, 193); +$background: #fafafa; +$backdrop: darken($background, 5%); +$text: #333333; +$subtext: #868686; +$links: $accent; +$footer: $subtext; +$meta: $text; +$header: $text; +$highlight: $links; +$blockquote_border: $accent; +$important_border: #f00; +$code_background: $text; +$code_border_color: $text; +$code: $background; +$separator: lighten($accent, 35%); +$darkmode_icon: $text; +$tag_background: $accent; +$tag_color: $background; \ No newline at end of file diff --git a/themes/devroom-2024/assets/scss/devroom.scss b/themes/devroom-2024/assets/scss/_site.scss similarity index 93% rename from themes/devroom-2024/assets/scss/devroom.scss rename to themes/devroom-2024/assets/scss/_site.scss index a39c76b..0282aa7 100644 --- a/themes/devroom-2024/assets/scss/devroom.scss +++ b/themes/devroom-2024/assets/scss/_site.scss @@ -4,27 +4,11 @@ $h1_font_size: 2.0rem; $h2_font_size: 1.7rem; $header_size: 1.2rem; -$font_size: 16px; +$font_size: 18px; $code_font_size: 14px; $code_line_height: 17px; $line-height: 1.6; -$accent: rgb(90, 126, 193); -$background: rgb(40, 44, 53); -$backdrop: darken($background, 5%); -$text: rgb(226, 226, 226); -$subtext: #868686; -$links: $accent; -$footer: $subtext; -$meta: $text; -$header: $text; -$highlight: $links; -$blockquote_border: $accent; -$important_border: #f00; -$code_background: $text; -$code_border_color: $text; -$code: $background; -$separator: darken(desaturate($accent, 20%), 20%); html, body { background-color: $background; @@ -33,6 +17,9 @@ html, body { font-size: $font_size; line-height: $line-height; -moz-osx-font-smoothing: grayscale; + + transition: color 0.2s ease-in-out, + background-color 0.2s ease-in-out; } code, pre { @@ -49,7 +36,7 @@ code, pre { } .container { - background-color: $background; + padding: 1rem 1.5rem; margin: 1rem auto; max-width: 1200px; @@ -394,13 +381,16 @@ article.full { } a.tag { - background-color: $accent; - color: $text; + background-color: $tag_background; + color: $tag_color; padding: 2px 8px 4px; margin: 0 2px; border-radius: 6px; font-size: 13px; text-transform: lowercase; + + transition: color 0.2s ease-in-out, + background-color 0.2s ease-in-out; } .article-about { @@ -467,3 +457,19 @@ form { } } + +.btn-dark { + width: 1.25rem; + height: 1.25rem; + cursor: pointer; + margin-left: 1rem; + display: block; + padding: 0.35rem; + + svg { + fill: $darkmode_icon; + + transition: color 0.2s ease-in-out, + background-color 0.2s ease-in-out; + } +} \ No newline at end of file diff --git a/themes/devroom-2024/assets/scss/devroom_dark.scss b/themes/devroom-2024/assets/scss/devroom_dark.scss new file mode 100644 index 0000000..1ea77e4 --- /dev/null +++ b/themes/devroom-2024/assets/scss/devroom_dark.scss @@ -0,0 +1,2 @@ +@import "_colors_dark"; +@import "_site"; \ No newline at end of file diff --git a/themes/devroom-2024/assets/scss/devroom_light.scss b/themes/devroom-2024/assets/scss/devroom_light.scss new file mode 100644 index 0000000..aaf725b --- /dev/null +++ b/themes/devroom-2024/assets/scss/devroom_light.scss @@ -0,0 +1,2 @@ +@import "_colors_light"; +@import "_site"; \ No newline at end of file diff --git a/themes/devroom-2024/layouts/_default/baseof.html b/themes/devroom-2024/layouts/_default/baseof.html index 1dd97c5..7621431 100644 --- a/themes/devroom-2024/layouts/_default/baseof.html +++ b/themes/devroom-2024/layouts/_default/baseof.html @@ -16,21 +16,41 @@ {{ block "title" . }}{{ .Site.Title }}{{ end }} {{ hugo.Generator }} - {{ if .Site.IsServer }} {{ $cssOpts := (dict "targetPath" "css/devroom.css" - "enableSourceMap" true ) }} {{ $styles := resources.Get "scss/devroom.scss" - | resources.ExecuteAsTemplate "style.devroom.css" . | toCSS $cssOpts }} - - {{ else }} {{ $cssOpts := (dict "targetPath" "css/devroom.css" ) }} {{ - $styles := resources.Get "scss/devroom.scss" | resources.ExecuteAsTemplate - "style.devroom.css" . | toCSS $cssOpts | minify | fingerprint }} + + {{ if .Site.IsServer }} {{ $cssOpts := (dict "targetPath" "css/devroom_light.css" + "enableSourceMap" true ) }} {{ $styles := resources.Get "scss/devroom_light.scss" + | resources.ExecuteAsTemplate "style.devroom_light.css" . | toCSS $cssOpts }} + + {{ else }} {{ $cssOpts := (dict "targetPath" "css/devroom_light.css" ) }} {{ + $styles := resources.Get "scss/devroom_light.scss" | resources.ExecuteAsTemplate + "style.devroom_light.css" . | toCSS $cssOpts | minify | fingerprint }} {{ end }} + + {{ if .Site.IsServer }} {{ $cssOpts := (dict "targetPath" "css/devroom_dark.css" + "enableSourceMap" true ) }} {{ $styles := resources.Get "scss/devroom_dark.scss" + | resources.ExecuteAsTemplate "style.devroom_dark.css" . | toCSS $cssOpts }} + + {{ else }} {{ $cssOpts := (dict "targetPath" "css/devroom_dark.css" ) }} {{ + $styles := resources.Get "scss/devroom_dark.scss" | resources.ExecuteAsTemplate + "style.devroom_dark.css" . | toCSS $cssOpts | minify | fingerprint }} + + {{ end }} + + diff --git a/themes/devroom-2024/layouts/partials/header.html b/themes/devroom-2024/layouts/partials/header.html index f05de85..156ce77 100644 --- a/themes/devroom-2024/layouts/partials/header.html +++ b/themes/devroom-2024/layouts/partials/header.html @@ -1,6 +1,8 @@