fix: ensure icons adapt to theme changes with CSS

acid-info · Dec 15, 2023 · e9dc989 · e9dc989
1 parent d417e8c
commit e9dc989
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git 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
@@ -15,8 +15,10 @@
       width: 40px;
     }
   }
+}
 
-  &.dark {
+[data-theme='dark'] {
+  .icon {
     &.fill {
       &,
       * {
@@ -30,7 +32,10 @@
       }
     }
   }
-  &.light {
+}
+
+[data-theme='light'] {
+  .icon {
     &.fill {
       &,
       * {