feat: implement dark mode

31 files changed, 304 insertions, 109 deletions

diff --git a/package.json b/package.json
index 927b3a5..033527a 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "graphql-request": "^3.7.0",
     "modern-normalize": "^1.1.0",
     "next": "12.0.7",
+    "next-themes": "^0.0.15",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.25.0",
     "react": "17.0.2",
diff --git a/src/components/Branding/Branding.module.scss b/src/components/Branding/Branding.module.scss
index d02bfa6..54bbece 100644
--- a/src/components/Branding/Branding.module.scss
+++ b/src/components/Branding/Branding.module.scss
@@ -38,14 +38,14 @@
     left: 0;
     backface-visibility: hidden;
     background: var(--color-bg);
-    border: fun.convert-px(1) solid var(--color-primary-dark);
+    border: fun.convert-px(2) solid var(--color-primary-dark);
     border-radius: 50%;
     transition: all 0.6s linear 0s;
   }
 
   &__front {
     box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
-        var(--color-shadow),
+        var(--color-shadow-light),
       fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
         var(--color-shadow-light);
   }
@@ -70,7 +70,7 @@
 
     &__back {
       box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
-          var(--color-shadow),
+          var(--color-shadow-light),
         fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
           var(--color-shadow-light);
     }
@@ -90,8 +90,10 @@
   grid-column: 2;
   grid-row: 2;
   margin: 0;
+  color: var(--color-fg-light);
   font-family: var(--font-family-secondary);
   font-size: var(--font-size-lg);
+  font-weight: 500;
 }
 
 .link {
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index cee7918..df5ca3d 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -71,6 +71,10 @@
   &:disabled {
     color: var(--color-fg-light);
     border-color: var(--color-border-dark);
+    box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-bg),
+      fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-darker),
+      fun.convert-px(5) fun.convert-px(5) 0 0 var(--color-bg),
+      fun.convert-px(6) fun.convert-px(6) 0 0 var(--color-primary-darker);
     cursor: wait;
   }
 
@@ -138,7 +142,7 @@
         var(--color-shadow-light),
       fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3)
         var(--color-shadow-light);
-    transform: scale(1.07);
+    transform: scale(1.1);
   }
 
   &:focus {
@@ -154,6 +158,18 @@
   }
 }
 
+:global {
+  [data-theme="dark"] {
+    :local {
+      .tertiary {
+        img[src*="png"] {
+          background: none;
+        }
+      }
+    }
+  }
+}
+
 .toolbar {
   display: block;
   width: var(--btn-size);
diff --git a/src/components/Icons/Blog/Blog.module.scss b/src/components/Icons/Blog/Blog.module.scss
index 5b53125..5376c61 100644
--- a/src/components/Icons/Blog/Blog.module.scss
+++ b/src/components/Icons/Blog/Blog.module.scss
@@ -13,11 +13,11 @@
 
 .picture {
   fill: var(--color-primary-lighter);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
 }
 
 .background {
   fill: var(--color-bg);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
 }
diff --git a/src/components/Icons/CV/CV.module.scss b/src/components/Icons/CV/CV.module.scss
index e7b0e59..aaa8a1a 100644
--- a/src/components/Icons/CV/CV.module.scss
+++ b/src/components/Icons/CV/CV.module.scss
@@ -8,46 +8,47 @@
 
 .lock {
   fill: var(--color-bg);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 3;
 }
 
 .lines {
+  fill: var(--color-fg);
   stroke-width: 4;
 }
 
 .seal-top {
   fill: var(--color-primary-lighter);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 2;
 }
 
 .seal-bottom {
   fill: var(--color-primary-lighter);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 2;
 }
 
 .diploma {
   fill: var(--color-bg);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
 }
 
 .top {
   fill: var(--color-primary-lighter);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
 }
 
 .handle {
   fill: var(--color-primary-lighter);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 3;
 }
 
 .bottom {
   fill: var(--color-primary);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
 }
diff --git a/src/components/Icons/Close/Close.module.scss b/src/components/Icons/Close/Close.module.scss
index b45895b..5a1f638 100644
--- a/src/components/Icons/Close/Close.module.scss
+++ b/src/components/Icons/Close/Close.module.scss
@@ -8,6 +8,6 @@
 
 .line {
   fill: var(--color-primary-lighter);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 3;
 }
diff --git a/src/components/Icons/Cog/Cog.module.scss b/src/components/Icons/Cog/Cog.module.scss
index 4b09c38..a861f0c 100644
--- a/src/components/Icons/Cog/Cog.module.scss
+++ b/src/components/Icons/Cog/Cog.module.scss
@@ -5,6 +5,6 @@
   width: var(--icon-size, #{fun.convert-px(40)});
   margin: auto;
   fill: var(--color-primary-lighter);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
 }
diff --git a/src/components/Icons/Contact/Contact.module.scss b/src/components/Icons/Contact/Contact.module.scss
index 5c0040e..963c1dc 100644
--- a/src/components/Icons/Contact/Contact.module.scss
+++ b/src/components/Icons/Contact/Contact.module.scss
@@ -8,22 +8,22 @@
 
 .envelop {
   fill: var(--color-primary-lighter);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
 }
 
 .lines {
-  fill: var(--color-border-dark);
+  fill: var(--color-fg);
 }
 
 .background {
   fill: var(--color-shadow-dark);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
 }
 
 .paper {
   fill: var(--color-bg);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
 }
diff --git a/src/components/Icons/Hamburger/Hamburger.module.scss b/src/components/Icons/Hamburger/Hamburger.module.scss
index 07cbe50..f38df4e 100644
--- a/src/components/Icons/Hamburger/Hamburger.module.scss
+++ b/src/components/Icons/Hamburger/Hamburger.module.scss
@@ -12,7 +12,7 @@
       var(--color-primary-light) 0%,
       var(--color-primary-lighter) 100%
     );
-    border: fun.convert-px(1) solid var(--color-border-dark);
+    border: fun.convert-px(1) solid var(--color-primary-darker);
     border-radius: fun.convert-px(3);
     display: block;
     width: var(--btn-size, fun.convert-px(50));
diff --git a/src/components/Icons/Home/Home.module.scss b/src/components/Icons/Home/Home.module.scss
index 6eb88c4..f2e7f9e 100644
--- a/src/components/Icons/Home/Home.module.scss
+++ b/src/components/Icons/Home/Home.module.scss
@@ -8,35 +8,35 @@
 
 .wall {
   fill: var(--color-bg);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
 }
 
 .indoor {
   fill: var(--color-shadow-dark);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
 }
 
 .door {
   fill: var(--color-primary-lighter);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
 }
 
 .roof {
   fill: var(--color-primary-lighter);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
 }
 
 .chimney {
   fill: var(--color-bg);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
 }
 
 .lines {
-  fill: var(--color-border-dark);
+  fill: var(--color-primary-darker);
   stroke-width: 4;
 }
diff --git a/src/components/Icons/Moon/Moon.module.scss b/src/components/Icons/Moon/Moon.module.scss
index 51d76fd..799a282 100644
--- a/src/components/Icons/Moon/Moon.module.scss
+++ b/src/components/Icons/Moon/Moon.module.scss
@@ -2,7 +2,7 @@
 
 .moon {
   fill: var(--color-primary-lighter);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
   width: var(--icon-size, #{fun.convert-px(25)});
 }
diff --git a/src/components/Icons/Search/Search.module.scss b/src/components/Icons/Search/Search.module.scss
index 7b506e8..4c42028 100644
--- a/src/components/Icons/Search/Search.module.scss
+++ b/src/components/Icons/Search/Search.module.scss
@@ -8,24 +8,24 @@
 
 .big-handle {
   fill: var(--color-primary-lighter);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 3;
 }
 
 .glass {
   fill: var(--color-bg-opacity);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 2;
 }
 
 .upright {
   fill: var(--color-primary-lighter);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 3;
 }
 
 .small-handle {
   fill: var(--color-primary);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 2;
 }
diff --git a/src/components/Icons/Sun/Sun.module.scss b/src/components/Icons/Sun/Sun.module.scss
index 1de4b19..5682aa3 100644
--- a/src/components/Icons/Sun/Sun.module.scss
+++ b/src/components/Icons/Sun/Sun.module.scss
@@ -2,7 +2,7 @@
 
 .sun {
   fill: var(--color-primary-lighter);
-  stroke: var(--color-border-dark);
+  stroke: var(--color-primary-darker);
   stroke-width: 4;
   width: var(--icon-size, #{fun.convert-px(25)});
 }
diff --git a/src/components/PostMeta/PostMeta.module.scss b/src/components/PostMeta/PostMeta.module.scss
index ecd3105..6f8e1c2 100644
--- a/src/components/PostMeta/PostMeta.module.scss
+++ b/src/components/PostMeta/PostMeta.module.scss
@@ -35,7 +35,7 @@
 
     .term {
       margin-right: var(--spacing-2xs);
-      color: var(--color-primary-darker);
+      color: var(--color-fg-light);
     }
 
     .description {
diff --git a/src/components/ThemeToggle/ThemeToggle.tsx b/src/components/ThemeToggle/ThemeToggle.tsx
index 4b93ac9..c44f6df 100644
--- a/src/components/ThemeToggle/ThemeToggle.tsx
+++ b/src/components/ThemeToggle/ThemeToggle.tsx
@@ -1,16 +1,27 @@
 import { Form } from '@components/Form';
 import { MoonIcon, SunIcon } from '@components/Icons';
+import Spinner from '@components/Spinner/Spinner';
 import { t } from '@lingui/macro';
-import { FormEvent, useState } from 'react';
+import { useTheme } from 'next-themes';
+import { FormEvent, useEffect, useState } from 'react';
 import styles from './ThemeToggle.module.scss';
 
 const ThemeToggle = () => {
-  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(false);
+  const [isMounted, setIsMounted] = useState<boolean>(false);
+  const { resolvedTheme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
 
   const onSubmit = (e: FormEvent) => {
     e.preventDefault();
   };
 
+  if (!isMounted) return <Spinner />;
+
+  const isDarkTheme = resolvedTheme === 'dark';
+
   return (
     <Form modifier="theme" submitHandler={onSubmit}>
       <input
@@ -19,7 +30,7 @@ const ThemeToggle = () => {
         id="dark-theme"
         name="dark-theme"
         checked={isDarkTheme}
-        onChange={() => setIsDarkTheme(!isDarkTheme)}
+        onChange={() => setTheme(isDarkTheme ? 'light' : 'dark')}
       />
       <label htmlFor="dark-theme" className={styles.label}>
         <span className={styles.title}>{t`Theme:`}</span>
diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss
index 3b52fb6..096ad50 100644
--- a/src/components/Toolbar/Toolbar.module.scss
+++ b/src/components/Toolbar/Toolbar.module.scss
@@ -54,7 +54,7 @@
   bottom: 100%;
   left: 0;
   right: 0;
-  background: var(--color-bg);
+  background: var(--color-bg-secondary);
   border-top: fun.convert-px(4) solid;
   border-bottom: fun.convert-px(4) solid;
   border-image: radial-gradient(
diff --git a/src/components/Widgets/Sharing/Sharing.module.scss b/src/components/Widgets/Sharing/Sharing.module.scss
index c05a56b..ada3e2f 100644
--- a/src/components/Widgets/Sharing/Sharing.module.scss
+++ b/src/components/Widgets/Sharing/Sharing.module.scss
@@ -181,3 +181,13 @@
     }
   }
 }
+
+:global {
+  [data-theme="dark"] {
+    :local {
+      .link {
+        filter: brightness(0.85) contrast(1.1);
+      }
+    }
+  }
+}
diff --git a/src/components/Widgets/SocialMedia/SocialMedia.module.scss b/src/components/Widgets/SocialMedia/SocialMedia.module.scss
index 5dfdcb7..373cefb 100644
--- a/src/components/Widgets/SocialMedia/SocialMedia.module.scss
+++ b/src/components/Widgets/SocialMedia/SocialMedia.module.scss
@@ -46,3 +46,13 @@
     transform: scale(0.9);
   }
 }
+
+:global {
+  [data-theme="dark"] {
+    :local {
+      .icon {
+        filter: brightness(0.85) contrast(1.1);
+      }
+    }
+  }
+}
diff --git a/src/components/Widgets/SocialMedia/SocialMedia.tsx b/src/components/Widgets/SocialMedia/SocialMedia.tsx
index 351fd48..e4151fc 100644
--- a/src/components/Widgets/SocialMedia/SocialMedia.tsx
+++ b/src/components/Widgets/SocialMedia/SocialMedia.tsx
@@ -22,13 +22,13 @@ const SocialMedia = ({
   const getIcon = (id: string) => {
     switch (id) {
       case 'github':
-        return <GithubIcon />;
+        return <GithubIcon className={styles.icon} />;
       case 'gitlab':
-        return <GitlabIcon />;
+        return <GitlabIcon className={styles.icon} />;
       case 'linkedin':
-        return <LinkedInIcon />;
+        return <LinkedInIcon className={styles.icon} />;
       case 'twitter':
-        return <TwitterIcon />;
+        return <TwitterIcon className={styles.icon} />;
       default:
         break;
     }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index fde93eb..a22c616 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,6 +5,7 @@ import { I18nProvider } from '@lingui/react';
 import { AppPropsWithLayout } from '@ts/types/app';
 import { initTranslation } from '@utils/helpers/i18n';
 import '../styles/globals.scss';
+import { ThemeProvider } from 'next-themes';
 
 initTranslation(i18n);
 
@@ -29,7 +30,13 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page);
   return (
     <I18nProvider i18n={i18n}>
-      {getLayout(<Component {...pageProps} />)}
+      <ThemeProvider
+        defaultTheme="system"
+        enableColorScheme={true}
+        enableSystem={true}
+      >
+        {getLayout(<Component {...pageProps} />)}
+      </ThemeProvider>
     </I18nProvider>
   );
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 99d506d..3664ae1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -9,8 +9,8 @@ import HomePageContent from '@content/pages/homepage.mdx';
 import { ButtonLink } from '@components/Buttons';
 import styles from '@styles/pages/Home.module.scss';
 import { t } from '@lingui/macro';
-import ContactIcon from '@assets/images/icon-contact.svg';
 import FeedIcon from '@assets/images/icon-feed.svg';
+import { ContactIcon } from '@components/Icons';
 
 const Home: NextPageWithLayout = () => {
   const CodingLinks = () => {
@@ -69,13 +69,13 @@ const Home: NextPageWithLayout = () => {
       <ul className={styles['links-list']}>
         <li>
           <ButtonLink target="/contact">
-            <ContactIcon className={styles.icon} />
+            <ContactIcon />
             {t`Contact me`}
           </ButtonLink>
         </li>
         <li>
           <ButtonLink target="/feed">
-            <FeedIcon className={styles.icon} />
+            <FeedIcon className={styles['icon--feed']} />
             {t`Subscribe`}
           </ButtonLink>
         </li>
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,
diff --git a/yarn.lock b/yarn.lock
index 1c78c56..2b5d02b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6541,6 +6541,11 @@ neo-async@^2.6.0:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+next-themes@^0.0.15:
+  version "0.0.15"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.15.tgz#ab0cee69cd763b77d41211f631e108beab39bf7d"
+  integrity sha512-LTmtqYi03c4gMTJmWwVK9XkHL7h0/+XrtR970Ujvtu3s0kZNeJN24aJsi4rkZOI8i19+qq6f8j+8Duwy5jqcrQ==
+
 next@12.0.7:
   version "12.0.7"
   resolved "https://registry.yarnpkg.com/next/-/next-12.0.7.tgz#33ebf229b81b06e583ab5ae7613cffe1ca2103fc"