Dark/Light mode

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;

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;

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;
+    }
+}

themes/devroom-2024/assets/scss/devroom_dark.scss

@@ -0,0 +1,2 @@
+@import "_colors_dark";
+@import "_site";

themes/devroom-2024/assets/scss/devroom_light.scss

@@ -0,0 +1,2 @@
+@import "_colors_light";
+@import "_site";

themes/devroom-2024/layouts/_default/baseof.html

@@ -16,21 +16,41 @@
     <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
     {{ hugo.Generator }}
     <link rel="stylesheet" href="/css/lightbox.min.css" />
-    {{ if .Site.IsServer }} {{ $cssOpts := (dict "targetPath" "css/devroom.css"
-    "enableSourceMap" true ) }} {{ $styles := resources.Get "scss/devroom.scss"
-    | resources.ExecuteAsTemplate "style.devroom.css" . | toCSS $cssOpts }}
-    <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen" />
-    {{ 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 }}
+    <link id="style-light" rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen" />
+    {{ 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 }}
     <link
       rel="stylesheet"
+      id="style-light" 
       href="{{ $styles.RelPermalink }}"
       integrity="{{ $styles.Data.Integrity }}"
       crossorigin="anonymous"
       media="screen"
     />
     {{ 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 }}
+    <link id="style-dark" rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen" />
+    {{ 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 }}
+    <link
+      rel="stylesheet"
+      id="style-dark" 
+      href="{{ $styles.RelPermalink }}"
+      integrity="{{ $styles.Data.Integrity }}"
+      crossorigin="anonymous"
+      media="screen"
+    />
+    {{ end }}    
+
     <link
       rel="alternate"
       type="application/rss+xml"
@@ -49,5 +69,18 @@
       {{ partial "footer.html" . }}
     </div>
     <script src="/js/lightbox-plus-jquery.min.js"></script>
+    <script>
+      function theme_set(toggled) {
+        document.getElementById('style-light').disabled = toggled;
+        document.getElementById('style-dark').disabled = !toggled;
+        localStorage.setItem('theme-toggled', toggled ? '1' : '');
+      }
+
+      function theme_toggle() {
+        theme_set(!document.getElementById('style-light').disabled);
+      }
+
+      theme_set(localStorage.getItem('theme-toggled'));
+    </script>
   </body>
 </html>

themes/devroom-2024/layouts/partials/header.html

@@ -1,6 +1,8 @@
 <header>
   <nav>
     <a href="/" class="brand">devroom.io</a>
+
+  
     <div class="menu">
       <a href="/" class="menu-item">Blog</a>
       <a href="/projects/" class="menu-item">Projects</a>
@@ -9,5 +11,14 @@
       <a href="/privacy/" class="menu-item">Privacy</a>
       <a href="/contact/" class="menu-item">Contact</a>
     </div>
+
+    <div class="btn-dark" onclick="theme_toggle(); return false;" role="button">
+  
+      <svg id="glyphicons-halflings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+        <path id="contrast" d="M10,2a8,8,0,1,0,8,8A8.00917,8.00917,0,0,0,10,2Zm0,14A6,6,0,0,1,10,4Z"></path>
+      </svg>
+
+    </div>
+
   </nav>
 </header>