feat: implement dark mode

9 files changed, 196 insertions, 64 deletions

diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index ce629f7..3d1eb50 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -147,26 +147,50 @@ $spacings: ();
 // Colors
 //============================================================================
 
-$color_black: hsl(207, 47%, 11%);
-$color_blue: hsl(206, 75%, 31%);
-$color_blue-o30: hsla(206, 75%, 31%, 0.3);
-$color_blue-bright: hsl(206, 77%, 36%);
-$color_blue-brighter: hsl(200, 75%, 45%);
-$color_blue-dark: hsl(206, 76%, 25%);
-$color_blue-darker: hsl(206, 60%, 20%);
-$color_grey: hsl(206, 15%, 80%);
-$color_grey-bright: hsl(206, 20%, 86%);
-$color_grey-brighter: hsl(206, 20%, 92%);
-$color_grey-dark: hsla(206, 10%, 25%);
-$color_grey-dark-o70: hsla(206, 10%, 25%, 0.7);
-$color_grey-dark-o40: hsla(206, 10%, 25%, 0.4);
-$color_grey-dark-o20: hsla(206, 10%, 25%, 0.2);
-$color_white: hsl(206, 15%, 97%);
-$color_white-o90: hsl(206, 15%, 97%, 0.9);
-$color_orange: hsl(28, 91%, 22%);
-$color_red: hsl(1, 72%, 29%);
-$color_green: hsl(105, 90%, 16%);
-$color_magenta: hsl(322, 80%, 28%);
-$color_purple: hsl(282, 84%, 31%);
-$color_yellow: hsl(49, 90%, 16%);
-$color_cyan: hsl(187, 84%, 17%);
+$light-theme_black: hsl(207, 47%, 11%);
+$light-theme_blue: hsl(206, 75%, 31%);
+$light-theme_blue-o30: hsla(206, 75%, 31%, 0.3);
+$light-theme_blue-bright: hsl(206, 77%, 36%);
+$light-theme_blue-brighter: hsl(206, 70%, 49%);
+$light-theme_blue-dark: hsl(206, 76%, 28%);
+$light-theme_blue-darker: hsl(206, 60%, 20%);
+$light-theme_grey: hsl(206, 15%, 80%);
+$light-theme_grey-bright: hsl(206, 20%, 86%);
+$light-theme_grey-brighter: hsl(206, 20%, 92%);
+$light-theme_grey-dark: hsla(206, 10%, 25%);
+$light-theme_grey-dark-o70: hsla(206, 10%, 25%, 0.7);
+$light-theme_grey-dark-o40: hsla(206, 10%, 25%, 0.4);
+$light-theme_grey-dark-o20: hsla(206, 10%, 25%, 0.2);
+$light-theme_white: hsl(206, 15%, 97%);
+$light-theme_white-o90: hsl(206, 15%, 97%, 0.9);
+$light-theme_orange: hsl(28, 91%, 22%);
+$light-theme_red: hsl(1, 72%, 29%);
+$light-theme_green: hsl(105, 90%, 16%);
+$light-theme_magenta: hsl(322, 80%, 28%);
+$light-theme_purple: hsl(282, 84%, 31%);
+$light-theme_yellow: hsl(49, 90%, 16%);
+$light-theme_cyan: hsl(187, 84%, 17%);
+
+$dark-theme_black: hsl(208, 25%, 11%);
+$dark-theme_black-o90: hsla(208, 25%, 11%, 0.9);
+$dark-theme_black-bright: hsl(208, 21%, 15%);
+$dark-theme_black-brighter: hsl(208, 18%, 20%);
+$dark-theme_blue: hsl(200, 50%, 68%);
+$dark-theme_blue-o30: hsla(200, 60%, 70%, 0.3);
+$dark-theme_blue-bright: hsl(200, 55%, 70%);
+$dark-theme_blue-brighter: hsl(200, 66%, 81%);
+$dark-theme_blue-dark: hsl(200, 45%, 64%);
+$dark-theme_blue-darker: hsl(200, 16%, 62%);
+$dark-theme_grey: hsl(208, 10%, 70%);
+$dark-theme_grey-dark: hsl(208, 20%, 25%);
+$dark-theme_grey-dark-o70: hsla(208, 20%, 25%, 0.7);
+$dark-theme_grey-dark-o40: hsla(208, 20%, 25%, 0.4);
+$dark-theme_grey-dark-o20: hsla(208, 20%, 25%, 0.2);
+$dark-theme_white: hsl(208, 25%, 92%);
+$dark-theme_orange: hsl(35, 55%, 66%);
+$dark-theme_red: hsl(2, 70%, 76%);
+$dark-theme_green: hsl(100, 55%, 65%);
+$dark-theme_magenta: hsl(318, 55%, 78%);
+$dark-theme_purple: hsl(270, 60%, 78%);
+$dark-theme_yellow: hsl(50, 60%, 65%);
+$dark-theme_cyan: hsl(180, 60%, 68%);
diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss
index 890acd8..ee4a25c 100644
--- a/src/styles/base/_base.scss
+++ b/src/styles/base/_base.scss
@@ -30,7 +30,7 @@ summary {
 }
 
 * {
-  scrollbar-color: var(--color-shadow-dark) var(--color-bg-tertiary);
+  scrollbar-color: var(--color-primary) var(--color-bg-tertiary);
   scrollbar-width: auto;
 }
 
@@ -44,7 +44,7 @@ summary {
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: var(--color-shadow-dark);
+  background-color: var(--color-primary);
   border-radius: fun.convert-px(6);
   border: fun.convert-px(3) solid var(--color-bg-tertiary);
 }
@@ -63,7 +63,7 @@ body {
   border-top: max(0.4vw, fun.convert-px(6)) solid;
   border-bottom: max(0.4vw, fun.convert-px(6)) solid;
   border-image: radial-gradient(
-      ellipse at top,
+      ellipse at center,
       var(--color-primary-lighter) 20%,
       var(--color-primary) 100%
     )
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index 4b11e64..e6e2612 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -1,32 +1,64 @@
 @use "@styles/abstracts/variables" as var;
 
 :root {
-  --color-bg: #{var.$color_white};
-  --color-bg-opacity: #{var.$color_white-o90};
-  --color-bg-secondary: #{var.$color_grey-brighter};
-  --color-bg-tertiary: #{var.$color_grey-bright};
-  --color-fg: #{var.$color_black};
-  --color-fg-light: #{var.$color_grey-dark};
-  --color-fg-inverted: #{var.$color_white};
-  --color-primary: #{var.$color_blue};
-  --color-primary-opacity: #{var.$color_blue-o30};
-  --color-primary-light: #{var.$color_blue-bright};
-  --color-primary-lighter: #{var.$color_blue-brighter};
-  --color-primary-dark: #{var.$color_blue-dark};
-  --color-primary-darker: #{var.$color_blue-darker};
-  --color-secondary: #{var.$color_orange};
-  --color-border: #{var.$color_grey};
-  --color-border-dark: #{var.$color_grey-dark};
-  --color-border-light: #{var.$color_grey-bright};
-  --color-shadow: #{var.$color_grey-dark-o40};
-  --color-shadow-dark: #{var.$color_grey-dark-o70};
-  --color-shadow-light: #{var.$color_grey-dark-o20};
-  --color-token-red: #{var.$color_red};
-  --color-token-green: #{var.$color_green};
-  --color-token-purple: #{var.$color_purple};
-  --color-token-magenta: #{var.$color_magenta};
-  --color-token-cyan: #{var.$color_cyan};
-  --color-token-blue: #{var.$color_blue};
-  --color-token-yellow: #{var.$color_yellow};
-  --color-token-orange: #{var.$color_orange};
+  --color-bg: #{var.$light-theme_white};
+  --color-bg-opacity: #{var.$light-theme_white-o90};
+  --color-bg-secondary: #{var.$light-theme_grey-brighter};
+  --color-bg-tertiary: #{var.$light-theme_grey-bright};
+  --color-fg: #{var.$light-theme_black};
+  --color-fg-light: #{var.$light-theme_grey-dark};
+  --color-fg-inverted: #{var.$light-theme_white};
+  --color-primary: #{var.$light-theme_blue};
+  --color-primary-opacity: #{var.$light-theme_blue-o30};
+  --color-primary-light: #{var.$light-theme_blue-bright};
+  --color-primary-lighter: #{var.$light-theme_blue-brighter};
+  --color-primary-dark: #{var.$light-theme_blue-dark};
+  --color-primary-darker: #{var.$light-theme_blue-darker};
+  --color-secondary: #{var.$light-theme_orange};
+  --color-border: #{var.$light-theme_grey};
+  --color-border-dark: #{var.$light-theme_grey-dark};
+  --color-border-light: #{var.$light-theme_grey-bright};
+  --color-shadow: #{var.$light-theme_grey-dark-o40};
+  --color-shadow-dark: #{var.$light-theme_grey-dark-o70};
+  --color-shadow-light: #{var.$light-theme_grey-dark-o20};
+  --color-token-red: #{var.$light-theme_red};
+  --color-token-green: #{var.$light-theme_green};
+  --color-token-purple: #{var.$light-theme_purple};
+  --color-token-magenta: #{var.$light-theme_magenta};
+  --color-token-cyan: #{var.$light-theme_cyan};
+  --color-token-blue: #{var.$light-theme_blue};
+  --color-token-yellow: #{var.$light-theme_yellow};
+  --color-token-orange: #{var.$light-theme_orange};
+}
+
+[data-theme="dark"] {
+  --color-bg: #{var.$dark-theme_black};
+  --color-bg-opacity: #{var.$dark-theme_black-o90};
+  --color-bg-light: #{var.$dark-theme_grey};
+  --color-bg-secondary: #{var.$dark-theme_black-bright};
+  --color-bg-tertiary: #{var.$dark-theme_black-brighter};
+  --color-fg: #{var.$dark-theme_white};
+  --color-fg-light: #{var.$dark-theme_grey};
+  --color-fg-inverted: #{var.$dark-theme_black};
+  --color-primary: #{var.$dark-theme_blue};
+  --color-primary-opacity: #{var.$dark-theme_blue-o30};
+  --color-primary-light: #{var.$dark-theme_blue-bright};
+  --color-primary-lighter: #{var.$dark-theme_blue-brighter};
+  --color-primary-dark: #{var.$dark-theme_blue-dark};
+  --color-primary-darker: #{var.$dark-theme_blue-darker};
+  --color-secondary: #{var.$dark-theme_orange};
+  --color-border: #{var.$dark-theme_grey-dark};
+  --color-border-dark: #{var.$dark-theme_grey};
+  --color-border-light: #{var.$dark-theme_black-brighter};
+  --color-shadow: #{var.$dark-theme_grey-dark-o40};
+  --color-shadow-dark: #{var.$dark-theme_grey-dark-o70};
+  --color-shadow-light: #{var.$dark-theme_grey-dark-o20};
+  --color-token-red: #{var.$dark-theme_red};
+  --color-token-green: #{var.$dark-theme_green};
+  --color-token-purple: #{var.$dark-theme_purple};
+  --color-token-magenta: #{var.$dark-theme_magenta};
+  --color-token-cyan: #{var.$dark-theme_cyan};
+  --color-token-blue: #{var.$dark-theme_blue};
+  --color-token-yellow: #{var.$dark-theme_yellow};
+  --color-token-orange: #{var.$dark-theme_orange};
 }
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index b94f67d..a6d8e50 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -160,11 +160,11 @@ a {
   &.external {
     &::after {
       display: inline-block;
-      content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
     }
 
     &:focus:not(:active)::after {
-      content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
     }
   }
 
@@ -178,13 +178,13 @@ a {
     &.external {
       &::after {
         content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg(
-            '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
+            '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
           ));
       }
 
       &:focus:not(:active)::after {
         content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg(
-            '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$color_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$color_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
+            '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
           ));
       }
     }
diff --git a/src/styles/components/_wp-blocks.scss b/src/styles/components/_wp-blocks.scss
index 7b32f09..3deee18 100644
--- a/src/styles/components/_wp-blocks.scss
+++ b/src/styles/components/_wp-blocks.scss
@@ -32,7 +32,7 @@
   padding: var(--spacing-xs) var(--spacing-sm);
   background: var(--color-bg-secondary);
   border: fun.convert-px(1) solid var(--color-border-light);
-  color: var(--color-primary-darker);
+  color: var(--color-fg);
 }
 
 .wp-block-columns {
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 0a7a618..f9a1281 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -27,3 +27,10 @@
  * Define styles for external components (like WordPress blocks).
  */
 @use "components/wp-blocks";
+
+/**
+ * 4.0. Themes
+ *
+ * Define themes specific styles.
+ */
+@use "themes/dark";
diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss
index b6050d7..8225a57 100644
--- a/src/styles/pages/Home.module.scss
+++ b/src/styles/pages/Home.module.scss
@@ -8,7 +8,23 @@
   margin: 0 0 var(--spacing-md);
 }
 
+.icon--feed {
+  width: fun.convert-px(20);
+}
+
+:global {
+  [data-theme="dark"] {
+    :local {
+      .icon--feed {
+        filter: brightness(0.8) contrast(1.1);
+      }
+    }
+  }
+}
+
 .section {
+  --icon-size: #{fun.convert-px(20)};
+
   composes: grid from "@styles/layout/_grid.scss";
   padding: var(--spacing-md) 0;
   background: var(--color-bg-secondary);
@@ -31,7 +47,3 @@
     }
   }
 }
-
-.icon {
-  width: fun.convert-px(20);
-}
diff --git a/src/styles/themes/_dark.scss b/src/styles/themes/_dark.scss
new file mode 100644
index 0000000..946403a
--- /dev/null
+++ b/src/styles/themes/_dark.scss
@@ -0,0 +1,52 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/variables" as var;
+
+[data-theme="dark"] {
+  * {
+    text-shadow: none !important;
+  }
+
+  body {
+    font-variation-settings: "GRAD" -0.7;
+  }
+
+  img {
+    filter: brightness(0.8) contrast(1.1);
+
+    &[src*="png"] {
+      background: var(--color-bg-light);
+    }
+
+    &:active {
+      filter: none;
+    }
+  }
+
+  a {
+    &.external {
+      &::after {
+        content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      }
+
+      &:focus:not(:active)::after {
+        content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_black}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      }
+    }
+
+    &[hreflang] {
+      &.external {
+        &::after {
+          content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg(
+              '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
+            ));
+        }
+
+        &:focus:not(:active)::after {
+          content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg(
+              '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$dark-theme_black}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$dark-theme_black}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
+            ));
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/vendors/_prism.scss b/src/styles/vendors/_prism.scss
index e6627df..e636eae 100644
--- a/src/styles/vendors/_prism.scss
+++ b/src/styles/vendors/_prism.scss
@@ -79,8 +79,13 @@ pre[class*="language-"] {
   }
 
   .token {
+    &.comment,
+    &.doc-comment {
+      color: var(--color-fg-light);
+    }
+
     &.punctuation {
-      color: var(--color-primary-darker);
+      color: var(--color-fg);
     }
 
     &.attr-name,