make blurhash filters only apply in light themes

cinnyapp · Dec 29, 2023 · 8648380 · 8648380
1 parent 769af3e
commit 8648380
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/src/app/organisms/room/message/ImageContent.tsx b/src/app/organisms/room/message/ImageContent.tsx
@@ -102,7 +102,7 @@ export const ImageContent = as<'div', ImageContentProps>(
             style={{
               width: '100%',
               height: '100%',
-              filter: 'contrast(80%) invert(100%) brightness(0.75) invert(100%)'
+              filter: 'var(--blurhash-filter)'
             }}
             width={32}
             height={32}

diff --git a/src/app/organisms/room/message/VideoContent.tsx b/src/app/organisms/room/message/VideoContent.tsx
@@ -92,7 +92,7 @@ export const VideoContent = as<'div', VideoContentProps>(
             style={{
               width: '100%',
               height: '100%',
-              filter: 'contrast(80%) invert(100%) brightness(0.75) invert(100%)'
+              filter: 'var(--blurhash-filter)'
             }}
             width={32}
             height={32}

diff --git a/src/index.scss b/src/index.scss
@@ -181,6 +181,8 @@
 
   --popup-window-drawer-width: 280px;
 
+  --blurhash-filter: contrast(80%) invert(100%) brightness(0.75) invert(100%);
+
   @include screen.smallerThan(tabletBreakpoint) {
     --navigation-drawer-width: calc(240px + var(--border-width));
     --people-drawer-width: calc(256px - var(--border-width));
@@ -295,6 +297,9 @@
   --fw-bold: 550;
 
   --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
+
+  /* other */
+  --blurhash-filter: none;
 }
 
 .butter-theme {