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 782c58f..ea66134 100644
--- a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
@@ -48,13 +48,11 @@ type TProps = {
 
 export const Icon = (props: TProps): JSX.Element => {
   const { children, size = 'm' } = props
-  const { colorMode, setColorMode } = useColorMode()
 
   return (
     <div
       className={clsx(
         styles.icon,
-        colorMode === 'dark' ? styles.dark : styles.light,
         styles[size],
         props.stroke && styles.stroke,
         props.fill && styles.fill,
diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss b/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss
index 0eb5a65..2f2e313 100644
--- a/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss
@@ -15,8 +15,10 @@
       width: 40px;
     }
   }
+}
 
-  &.dark {
+[data-theme='dark'] {
+  .icon {
     &.fill {
       &,
       * {
@@ -30,7 +32,10 @@
       }
     }
   }
-  &.light {
+}
+
+[data-theme='light'] {
+  .icon {
     &.fill {
       &,
       * {