feat: implement dark mode

2 files changed, 14 insertions, 4 deletions

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