From 7857455414b5dad7f65703636b55c7786a09ebc3 Mon Sep 17 00:00:00 2001 From: Daniel Jr Date: Mon, 6 Oct 2025 15:54:36 -0300 Subject: [PATCH] switch light/dark theme automatically as change browser preference Signed-off-by: Daniel Jr --- assets/scss/partial/_theme.scss | 224 +++++++++++++++++++++++++++++++ assets/scss/style.scss | 231 ++------------------------------ hugo.toml | 1 - layouts/index.html | 4 +- layouts/partials/head.html | 5 - 5 files changed, 234 insertions(+), 231 deletions(-) create mode 100644 assets/scss/partial/_theme.scss diff --git a/assets/scss/partial/_theme.scss b/assets/scss/partial/_theme.scss new file mode 100644 index 0000000..60d3a07 --- /dev/null +++ b/assets/scss/partial/_theme.scss @@ -0,0 +1,224 @@ +// global-reset() + +*, +*:before, +*:after { + box-sizing: border-box; +} +html { + margin: 0; + padding: 0; + height: 100%; + border-top: 2px solid $color-text; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +body { + margin: 0; + height: 100%; + background-color: $color-background; + color: $color-text; + font-display: swap; + font-weight: 400; + font-size: $font-size; + font-family: $font-family-body; + line-height: $line-height; + text-rendering: geometricPrecision; + flex: 1; + + @include antialias(); + + @extend $base-style !optional; +} +.content { + position: relative; + display: flex; + flex-direction: column; + min-height: 100%; + overflow-wrap: break-word; + + p { + @include hyphens(auto); + } + code { + @include hyphens(manual); + } + a { + color: $color-text; + text-decoration: none; + + @include underline(5px, $color-text); + + &:hover { + background-image: linear-gradient(transparent, transparent 4px, $color-link 4px, $color-link); + } + } + a.icon { + background: none; + + &:hover { + color: $color-link; + } + } + h1 a, + .h1 a, + h2 a, + h3 a, + h4 a, + h5 a, + h6 a { + background: none; + color: inherit; + text-decoration: none; + } + h1 a:hover, + .h1 a:hover, + h2 a:hover, + h3 a:hover, + h4 a:hover, + h5 a:hover, + h6 a:hover { + @include underline(6px, $color-link); + } + h6 { + a { + background: none; + color: inherit; + text-decoration: none; + } + } + h6 { + a:hover { + @include underline(6px, $color-link); + } + } +} +@media (min-width: 540px) { + .image-wrap { + flex-direction: row; + margin-bottom: 2rem; + + .image-block { + flex: 1 0 35%; + margin-right: 2rem; + } + p { + flex: 1 0 65%; + } + } +} +.max-width { + max-width: $page-width; +} +@media (max-width: 480px) { // smaller margins at smaller screen widths + .px3 { + padding-right: 1rem; + padding-left: 1rem; + } + .my4 { + margin-top: 2rem; + margin-bottom: 2rem; + } +} + +@media (min-width: 480px) { + p { + text-align: justify; + } +} + +@import "header"; +@import "post/actions_desktop"; +@import "post/actions_mobile"; +@import "index"; +@import "article"; +@import "archive"; +@import "comments"; +@import "footer"; +@import "pagination"; +@import "search"; +@import "tags"; +@import "tooltip"; +@import "categories"; + +pre { + overflow-x: auto; + padding: 15px 15px 10px 15px; + border: 1px dotted $color-border; + border-radius: 2px; + -webkit-border-radius: 2px; + font-size: 13px; + font-family: $font-family-mono; + line-height: 22px; + position: relative; + + .code-copy-btn { + position: absolute; + top: 0; + right: 0; + border: 0; + border-radius: 0 2px; + padding: 0; + font-family: "JetBrains Mono", monospace; + font-weight: 800; + font-size: 0.9em; + line-height: 1.7; + color: #fff; + background-color: #8c8c8c; + min-width: 60px; + text-align: center; + cursor: pointer; + letter-spacing: 0em; + } + + .code-copy-btn:hover { + background-color: #666; + color: #2bbc8a; + } + + code { + display: block; + padding: 0; + border: none; + } +} + +code { + font-family: $font-family-mono; + padding: 0 5px; + border: 1px dotted $color-border; + border-radius: 2px; + -webkit-border-radius: 2px; +} + +.highlight { + + & > div { + border-radius: 2px; + -webkit-border-radius: 2px; + } + + pre { + border: none; + background: none; + } + + table { + + pre { + margin-top: 0; + } + + td:first-child { + pre { + padding-right: 0; + } + } + + td:last-child { + pre { + padding-left: 0; + } + } + } +} diff --git a/assets/scss/style.scss b/assets/scss/style.scss index f8215d4..0243f58 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -1,231 +1,16 @@ @import "variables"; -@import "colors/{{ site.Params.colortheme | default "white" }}"; @import "util"; @import "mixins"; -@import "extend"; @import "fonts"; -// global-reset() - -*, -*:before, -*:after { - box-sizing: border-box; -} -html { - margin: 0; - padding: 0; - height: 100%; - border-top: 2px solid $color-text; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} -body { - margin: 0; - height: 100%; - background-color: $color-background; - color: $color-text; - font-display: swap; - font-weight: 400; - font-size: $font-size; - font-family: $font-family-body; - line-height: $line-height; - text-rendering: geometricPrecision; - flex: 1; - - @include antialias(); - - @extend $base-style !optional; +@media (prefers-color-scheme: light) { + @import "colors/white"; + @import "extend"; + @import "partial/theme"; } -.content { - position: relative; - display: flex; - flex-direction: column; - min-height: 100%; - overflow-wrap: break-word; - - p { - @include hyphens(auto); - } - code { - @include hyphens(manual); - } - a { - color: $color-text; - text-decoration: none; - - @include underline(5px, $color-text); - - &:hover { - background-image: linear-gradient(transparent, transparent 4px, $color-link 4px, $color-link); - } - } - a.icon { - background: none; - &:hover { - color: $color-link; - } - } - h1 a, - .h1 a, - h2 a, - h3 a, - h4 a, - h5 a, - h6 a { - background: none; - color: inherit; - text-decoration: none; - } - h1 a:hover, - .h1 a:hover, - h2 a:hover, - h3 a:hover, - h4 a:hover, - h5 a:hover, - h6 a:hover { - @include underline(6px, $color-link); - } - h6 { - a { - background: none; - color: inherit; - text-decoration: none; - } - } - h6 { - a:hover { - @include underline(6px, $color-link); - } - } +@media (prefers-color-scheme: dark) { + @import "colors/dark"; + @import "extend"; + @import "partial/theme"; } -@media (min-width: 540px) { - .image-wrap { - flex-direction: row; - margin-bottom: 2rem; - - .image-block { - flex: 1 0 35%; - margin-right: 2rem; - } - p { - flex: 1 0 65%; - } - } -} -.max-width { - max-width: $page-width; -} -@media (max-width: 480px) { // smaller margins at smaller screen widths - .px3 { - padding-right: 1rem; - padding-left: 1rem; - } - .my4 { - margin-top: 2rem; - margin-bottom: 2rem; - } -} - -@media (min-width: 480px) { - p { - text-align: justify; - } -} - -@import "partial/header"; -@import "partial/post/actions_desktop"; -@import "partial/post/actions_mobile"; -@import "partial/index"; -@import "partial/article"; -@import "partial/archive"; -@import "partial/comments"; -@import "partial/footer"; -@import "partial/pagination"; -@import "partial/search"; -@import "partial/tags"; -@import "partial/tooltip"; -@import "partial/categories"; - -pre { - overflow-x: auto; - padding: 15px 15px 10px 15px; - border: 1px dotted $color-border; - border-radius: 2px; - -webkit-border-radius: 2px; - font-size: 13px; - font-family: $font-family-mono; - line-height: 22px; - position: relative; - - .code-copy-btn { - position: absolute; - top: 0; - right: 0; - border: 0; - border-radius: 0 2px; - padding: 0; - font-family: "JetBrains Mono", monospace; - font-weight: 800; - font-size: 0.9em; - line-height: 1.7; - color: #fff; - background-color: #8c8c8c; - min-width: 60px; - text-align: center; - cursor: pointer; - letter-spacing: 0em; - } - - .code-copy-btn:hover { - background-color: #666; - color: #2bbc8a; - } - - code { - display: block; - padding: 0; - border: none; - } -} - -code { - font-family: $font-family-mono; - padding: 0 5px; - border: 1px dotted $color-border; - border-radius: 2px; - -webkit-border-radius: 2px; -} - -.highlight { - - & > div { - border-radius: 2px; - -webkit-border-radius: 2px; - } - - pre { - border: none; - background: none; - } - - table { - - pre { - margin-top: 0; - } - - td:first-child { - pre { - padding-right: 0; - } - } - - td:last-child { - pre { - padding-left: 0; - } - } - } -} \ No newline at end of file diff --git a/hugo.toml b/hugo.toml index 32646a1..11ba01b 100644 --- a/hugo.toml +++ b/hugo.toml @@ -25,7 +25,6 @@ style = "gruvbox" tabWidth = 4 [params] -colortheme = "dark" rss = false tocInline = true description = "Since 2021 I have been developing web services in microservice architecture for critical, efficient, and scalable systems. I also love Linux, cloud, cli-tools, hardware, and all about computers." diff --git a/layouts/index.html b/layouts/index.html index ccb16d5..d19121a 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -44,7 +44,7 @@
  • {{ .name }}: {{ .desc | markdownify }} {{ range .tags }} - {{ .name }} + {{ .name }} {{ end }}
    • {{ end }} @@ -57,7 +57,7 @@
  • {{ .name }}: {{ .desc | markdownify }} {{ range .tags }} - {{ .name }} + {{ .name }} {{ end }}
    • {{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index b46ee84..ef615b6 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -17,11 +17,6 @@ {{ template "_internal/opengraph.html" . }} {{ template "_internal/twitter_cards.html" . }} - {{ .Scratch.Set "colortheme" "white"}} - {{ if .Site.Params.Colortheme }} - {{ .Scratch.Set "colortheme" .Site.Params.Colortheme }} - {{ end }} - {{ $colortheme := .Scratch.Get "colortheme" }} {{- $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "enableSourceMap" "true") -}} {{- $styles := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "scss/style.scss" . | resources.ToCSS $options | resources.Fingerprint "sha512" }} -- 2.47.3