feat: implement dark mode

18 files changed, 91 insertions, 41 deletions

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