diff --git a/packages/docusaurus-playground/docs/community.mdx b/packages/docusaurus-playground/docs/community.mdx
index 071664b..3714293 100644
--- a/packages/docusaurus-playground/docs/community.mdx
+++ b/packages/docusaurus-playground/docs/community.mdx
@@ -12,13 +12,15 @@ Welcome to the Waku community! Whether you are interested in building with Waku,
   <Grid xs={{ cols: 1, gap: '1rem' }} md={{ cols: 2 }}>
     <Grid.Item xs={1}>
       <SocialCard
-        logoSrcDark="/icons/x.svg"
+        logoSrc="/icons/x-black.svg"
+        logoSrcDark="/icons/x-white.svg"
         href="https://discord.gg/2NXGrsqmDq"
         description="Follow us on X"
       />
     </Grid.Item>
     <Grid.Item xs={1}>
       <SocialCard
+        logoSrc="/icons/discord-black.svg"
         logoSrcDark="/icons/discord-white.svg"
         href="https://discord.gg/2NXGrsqmDq"
         description="Join the community on Discord"
@@ -26,6 +28,7 @@ Welcome to the Waku community! Whether you are interested in building with Waku,
     </Grid.Item>
     <Grid.Item xs={1}>
       <SocialCard
+        logoSrc="/icons/telegram-black.svg"
         logoSrcDark="/icons/telegram-white.svg"
         href="https://discord.gg/2NXGrsqmDq"
         description="Jump in the conversation on Telegram"
@@ -40,7 +43,8 @@ Welcome to the Waku community! Whether you are interested in building with Waku,
     </Grid.Item>
     <Grid.Item xs={1}>
       <SocialCard
-        logoSrcDark="/icons/github.svg"
+        logoSrc="/icons/github-black.svg"
+        logoSrcDark="/icons/github-white.svg"
         href="https://discord.gg/2NXGrsqmDq"
         description="Contribute to Github"
       />
diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js
index 7cda9ad..410e1cf 100644
--- a/packages/docusaurus-playground/docusaurus.config.js
+++ b/packages/docusaurus-playground/docusaurus.config.js
@@ -80,6 +80,10 @@ const config = {
   themeConfig:
     /** @type {import('@acid-info/logos-docusaurus-preset').ThemeConfig} */
     ({
+      colorMode: {
+        disableSwitch: false,
+        respectPrefersColorScheme: true,
+      },
       navbar: {
         items: [
           {
diff --git a/packages/logos-docusaurus-theme/COMPONENTS.MD b/packages/logos-docusaurus-theme/COMPONENTS.MD
index 9e6308f..874d5c8 100644
--- a/packages/logos-docusaurus-theme/COMPONENTS.MD
+++ b/packages/logos-docusaurus-theme/COMPONENTS.MD
@@ -352,13 +352,15 @@ import {
     <Grid.Item xs={1}>
       <SocialCard
         href="https://twitter.com/twitter-handle"
-        logoSrcDark="/icons/x.svg"
+        logoSrc="/icons/x-black.svg"
+        logoSrcDark="/icons/x-white.svg"
         description="Follow us on X"
       />
     </Grid.Item>
     <Grid.Item xs={1}>
       <SocialCard
         href="https://discord.gg/discord-server"
+        logoSrc="/icons/discord-black.svg"
         logoSrcDark="/icons/discord-white.svg"
         description="Join the community on Discord"
       />
diff --git a/packages/logos-docusaurus-theme/README.md b/packages/logos-docusaurus-theme/README.md
index a453f8d..958e336 100644
--- a/packages/logos-docusaurus-theme/README.md
+++ b/packages/logos-docusaurus-theme/README.md
@@ -555,7 +555,8 @@ import {
     <Grid.Item xs={1}>
       <SocialCard
         href="https://twitter.com/twitter-handle"
-        logoSrcDark="/icons/x.svg"
+        logoSrc="/icons/x-black.svg"
+        logoSrcDark="/icons/x-white.svg"
         description="Follow us on X"
       />
     </Grid.Item>
diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
index 54ee13c..0d4dbd9 100644
--- a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
@@ -19,7 +19,7 @@ import ExternalLinkSvg from '../../static/icons/external-link.svg'
 import FolderSvg from '../../static/icons/folder.svg'
 import FullscreenExitSvg from '../../static/icons/fullscreen-exit.svg'
 import FullscreenSvg from '../../static/icons/fullscreen.svg'
-import GithubSvg from '../../static/icons/github.svg'
+import GithubWhiteSvg from '../../static/icons/github-white.svg'
 import GScholarSvg from '../../static/icons/gscholar.svg'
 import HistorySvg from '../../static/icons/history.svg'
 import LinkedinSvg from '../../static/icons/linkedin.svg'
@@ -29,7 +29,7 @@ import TelegramSvg from '../../static/icons/telegram.svg'
 import TwitterSvg from '../../static/icons/twitter.svg'
 import DiscordWhiteSvg from '../../static/icons/discord-white.svg'
 import TelegramWhiteSvg from '../../static/icons/telegram-white.svg'
-import XSvg from '../../static/icons/x.svg'
+import XWhiteSvg from '../../static/icons/x-white.svg'
 import Avatar from '../../static/icons/avatar.svg'
 import DownloadSvg from '../../static/icons/download.svg'
 
@@ -93,7 +93,7 @@ export const IconFolder = (props: TIconProps): JSX.Element => (
 
 export const IconGithub = (props: TIconProps): JSX.Element => (
   <Icon {...props}>
-    <GithubSvg />
+    <GithubWhiteSvg />
   </Icon>
 )
 
@@ -219,7 +219,7 @@ export const IconTelegramWhite = (props: TIconProps): JSX.Element => (
 
 export const IconX = (props: TIconProps): JSX.Element => (
   <Icon {...props}>
-    <XSvg />
+    <XWhiteSvg />
   </Icon>
 )
 
diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/discord-black.svg b/packages/logos-docusaurus-theme/src/client/static/icons/discord-black.svg
new file mode 100644
index 0000000..d8c03f0
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/static/icons/discord-black.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1999 23.0767C12.4666 23.0767 11.0533 21.5017 11.0533 19.5733C11.0533 17.6467 12.4316 16.0733 14.2016 16.0733C15.9516 16.0733 17.3849 17.6467 17.3499 19.5733C17.3499 21.5017 15.9516 23.0767 14.1999 23.0767ZM25.8233 23.0767C24.0899 23.0767 22.6733 21.5017 22.6733 19.5733C22.6733 17.6467 24.0549 16.0733 25.8233 16.0733C27.5733 16.0733 29.0066 17.6467 28.9733 19.5733C28.9733 21.5017 27.5916 23.0767 25.8233 23.0767ZM16.8749 7.205L16.3616 6.26666L15.3049 6.44166C12.9102 6.84095 10.5796 7.55841 8.37494 8.575L7.99494 8.75166L7.75827 9.1C3.40327 15.5233 2.20827 21.8467 2.79994 28.06L2.86494 28.7367L3.41494 29.1367C5.97692 31.0165 8.83839 32.4495 11.8783 33.375L13.1949 33.7783L15.0499 29.25C18.2333 30.0367 21.7666 30.0383 24.9483 29.25L26.7933 33.78L28.1099 33.375C31.1521 32.4519 34.0152 31.0181 36.5766 29.135L37.1216 28.7383L37.1883 28.0683C37.9149 20.8683 36.0266 14.595 32.2583 9.09333L32.0216 8.74833L31.6416 8.575C29.4375 7.56305 27.1097 6.84578 24.7183 6.44166L23.6883 6.27L23.1649 7.17166C23.01 7.44129 22.8638 7.71588 22.7266 7.995C20.9186 7.80823 19.0962 7.80823 17.2883 7.995C17.1555 7.72908 17.0177 7.4657 16.8749 7.205ZM11.1916 27.6833C11.5199 27.8733 11.8666 28.06 12.2083 28.23L11.4599 30.0567C9.43593 29.3188 7.51562 28.3228 5.7466 27.0933C5.3716 21.8617 6.43494 16.585 10.0199 11.1433C11.5329 10.477 13.11 9.96714 14.7266 9.62166C14.8266 9.83 14.9199 10.0333 14.9966 10.215L15.4516 11.2867L16.6049 11.1183C18.8651 10.7872 21.1614 10.7872 23.4216 11.1183L24.5716 11.285L25.0249 10.215C25.1033 10.0283 25.1949 9.825 25.2916 9.62166C26.9199 9.97166 28.4966 10.4867 30.0049 11.1467C33.1299 15.8467 34.7066 21.09 34.2483 27.0917C32.4793 28.3233 30.5576 29.3194 28.5316 30.055L27.7899 28.2317C28.1333 28.06 28.4799 27.8733 28.8116 27.6833C29.6283 27.2133 30.5066 26.6267 31.0666 26.0667L28.9333 23.9333C28.6616 24.2067 28.0616 24.6333 27.3049 25.07C26.5649 25.4967 25.8299 25.8417 25.3599 25.9967C22.0216 27.1017 17.9799 27.1017 14.6399 25.9967C14.1716 25.8417 13.4366 25.4967 12.6966 25.07C11.9399 24.635 11.3399 24.2067 11.0666 23.9333L8.93327 26.0667C9.49494 26.6267 10.3749 27.2133 11.1916 27.6833Z" fill="black"/>
+</svg>
diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/github-black.svg b/packages/logos-docusaurus-theme/src/client/static/icons/github-black.svg
new file mode 100644
index 0000000..8b7ccb3
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/static/icons/github-black.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 4.39999C17.8989 4.39999 15.8183 4.81385 13.8771 5.61792C11.9359 6.422 10.172 7.60055 8.68629 9.08629C5.68571 12.0869 4 16.1565 4 20.4C4 27.472 8.592 33.472 14.944 35.6C15.744 35.728 16 35.232 16 34.8V32.096C11.568 33.056 10.624 29.952 10.624 29.952C9.888 28.096 8.848 27.6 8.848 27.6C7.392 26.608 8.96 26.64 8.96 26.64C10.56 26.752 11.408 28.288 11.408 28.288C12.8 30.72 15.152 30 16.064 29.616C16.208 28.576 16.624 27.872 17.072 27.472C13.52 27.072 9.792 25.696 9.792 19.6C9.792 17.824 10.4 16.4 11.44 15.264C11.28 14.864 10.72 13.2 11.6 11.04C11.6 11.04 12.944 10.608 16 12.672C17.264 12.32 18.64 12.144 20 12.144C21.36 12.144 22.736 12.32 24 12.672C27.056 10.608 28.4 11.04 28.4 11.04C29.28 13.2 28.72 14.864 28.56 15.264C29.6 16.4 30.208 17.824 30.208 19.6C30.208 25.712 26.464 27.056 22.896 27.456C23.472 27.952 24 28.928 24 30.416V34.8C24 35.232 24.256 35.744 25.072 35.6C31.424 33.456 36 27.472 36 20.4C36 18.2988 35.5861 16.2183 34.7821 14.2771C33.978 12.3358 32.7994 10.572 31.3137 9.08629C29.828 7.60055 28.0641 6.422 26.1229 5.61792C24.1817 4.81385 22.1012 4.39999 20 4.39999Z" fill="black"/>
+</svg>
diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/github-white.svg b/packages/logos-docusaurus-theme/src/client/static/icons/github-white.svg
new file mode 100644
index 0000000..de1871e
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/static/icons/github-white.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 4.39999C17.8989 4.39999 15.8183 4.81385 13.8771 5.61792C11.9359 6.422 10.172 7.60055 8.68629 9.08629C5.68571 12.0869 4 16.1565 4 20.4C4 27.472 8.592 33.472 14.944 35.6C15.744 35.728 16 35.232 16 34.8V32.096C11.568 33.056 10.624 29.952 10.624 29.952C9.888 28.096 8.848 27.6 8.848 27.6C7.392 26.608 8.96 26.64 8.96 26.64C10.56 26.752 11.408 28.288 11.408 28.288C12.8 30.72 15.152 30 16.064 29.616C16.208 28.576 16.624 27.872 17.072 27.472C13.52 27.072 9.792 25.696 9.792 19.6C9.792 17.824 10.4 16.4 11.44 15.264C11.28 14.864 10.72 13.2 11.6 11.04C11.6 11.04 12.944 10.608 16 12.672C17.264 12.32 18.64 12.144 20 12.144C21.36 12.144 22.736 12.32 24 12.672C27.056 10.608 28.4 11.04 28.4 11.04C29.28 13.2 28.72 14.864 28.56 15.264C29.6 16.4 30.208 17.824 30.208 19.6C30.208 25.712 26.464 27.056 22.896 27.456C23.472 27.952 24 28.928 24 30.416V34.8C24 35.232 24.256 35.744 25.072 35.6C31.424 33.456 36 27.472 36 20.4C36 18.2988 35.5861 16.2183 34.7821 14.2771C33.978 12.3358 32.7994 10.572 31.3137 9.08629C29.828 7.60055 28.0641 6.422 26.1229 5.61792C24.1817 4.81385 22.1012 4.39999 20 4.39999Z" fill="white"/>
+</svg>
diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/github.svg b/packages/logos-docusaurus-theme/src/client/static/icons/github.svg
deleted file mode 100644
index 69bd201..0000000
--- a/packages/logos-docusaurus-theme/src/client/static/icons/github.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.92518 0C3.99402 0 0 3.99402 0 8.92518C0 12.8746 2.55483 16.2104 6.10259 17.3929C6.54885 17.471 6.7162 17.2033 6.7162 16.969C6.7162 16.757 6.70504 16.0542 6.70504 15.3067C4.46259 15.7195 3.88245 14.76 3.70395 14.258C3.60354 14.0014 3.16844 13.2093 2.78912 12.9973C2.47674 12.8299 2.03048 12.4172 2.77796 12.406C3.48082 12.3948 3.98286 13.0531 4.15021 13.3208C4.95348 14.6708 6.23647 14.2914 6.74967 14.0572C6.82777 13.477 7.06205 13.0865 7.31865 12.8634C5.3328 12.6403 3.25769 11.8705 3.25769 8.45661C3.25769 7.486 3.60354 6.68273 4.17252 6.05797C4.08327 5.83484 3.77089 4.92001 4.26178 3.69279C4.26178 3.69279 5.00926 3.45851 6.7162 4.60763C7.43022 4.40681 8.18886 4.3064 8.9475 4.3064C9.70614 4.3064 10.4648 4.40681 11.1788 4.60763C12.8857 3.44735 13.6332 3.69279 13.6332 3.69279C14.1241 4.92001 13.8117 5.83484 13.7225 6.05797C14.2915 6.68273 14.6373 7.47484 14.6373 8.45661C14.6373 11.8816 12.551 12.6403 10.5652 12.8634C10.8887 13.1423 11.1676 13.6778 11.1676 14.5146C11.1676 15.7083 11.1565 16.6678 11.1565 16.969C11.1565 17.2033 11.3238 17.4822 11.7701 17.3929C13.5419 16.7948 15.0815 15.656 16.1722 14.137C17.2629 12.618 17.8498 10.7952 17.8504 8.92518C17.8504 3.99402 13.8563 0 8.92518 0Z" fill="black"/>
-</svg>
diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/telegram-black.svg b/packages/logos-docusaurus-theme/src/client/static/icons/telegram-black.svg
new file mode 100644
index 0000000..a50641b
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/static/icons/telegram-black.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.76858 17.7732C14.6269 13.9137 20.5339 11.3693 23.4894 10.14C31.9282 6.63006 33.6817 6.02035 34.8246 6.00021C35.0759 5.99579 35.638 6.05808 36.002 6.3535C36.3095 6.60295 36.394 6.93991 36.4345 7.17641C36.475 7.41291 36.5254 7.95167 36.4853 8.37264C36.028 13.1775 34.0493 24.8376 33.0427 30.2192C32.6167 32.4963 31.778 33.2598 30.966 33.3345C29.2014 33.4969 27.8614 32.1683 26.1523 31.048C23.4779 29.2949 21.967 28.2035 19.371 26.4928C16.3709 24.5158 18.3157 23.4292 20.0255 21.6533C20.4729 21.1886 28.2479 14.1167 28.3984 13.4752C28.4172 13.3949 28.4346 13.0958 28.257 12.9379C28.0793 12.78 27.8171 12.834 27.6278 12.877C27.3596 12.9378 23.0872 15.7618 14.8105 21.3487C13.5978 22.1815 12.4994 22.5872 11.5152 22.5659C10.4302 22.5425 8.34321 21.9525 6.79171 21.4482C4.88874 20.8296 3.37629 20.5025 3.50799 19.452C3.57659 18.9048 4.33012 18.3452 5.76858 17.7732Z" fill="black"/>
+</svg>
diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/x-black.svg b/packages/logos-docusaurus-theme/src/client/static/icons/x-black.svg
new file mode 100644
index 0000000..9f19b49
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/static/icons/x-black.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.6209 19.1338L32.6291 7.5H30.2575L21.5673 17.6015L14.6265 7.5H6.62109L17.117 22.7752L6.62109 34.975H8.99286L18.1699 24.3075L25.4999 34.975H33.5053L22.6203 19.1338H22.6209ZM19.3724 22.9098L18.3089 21.3887L9.84745 9.28543H13.4903L20.3189 19.0532L21.3823 20.5742L30.2586 33.2708H26.6157L19.3724 22.9103V22.9098Z" fill="black"/>
+</svg>
diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/x.svg b/packages/logos-docusaurus-theme/src/client/static/icons/x-white.svg
similarity index 100%
rename from packages/logos-docusaurus-theme/src/client/static/icons/x.svg
rename to packages/logos-docusaurus-theme/src/client/static/icons/x-white.svg