Merge pull request #162 from peterklingelhofer/fix-player-header-icon…

…-dark-mode-colors Fix player header icon dark mode colors
resonatecoop · Jun 24, 2022 · 1cdf905 · 1cdf905
2 parents d21c710 + 84c8202
commit 1cdf905
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/src/components/AudioWrapper.tsx b/src/components/AudioWrapper.tsx
@@ -167,6 +167,12 @@ export const AudioWrapper: React.FC<{
             box-shadow: none;
             padding: 0;
             margin-right: 1rem;
+            @media (prefers-color-scheme: dark) {
+              filter: invert(80%);
+            }
+            @media (prefers-color-scheme: light) {
+              background: #fff;
+            }
           }
         `}
       />

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -17,6 +17,7 @@ const Wrapper = styled.header`
   min-height: 48px;
   border-bottom: 1px solid ${(props) => colorShade(props.theme.colors.text, 20)};
   display: flex;
+  filter: drop-shadow(0 0 0.15rem #000);
   flex-direction: column;
   position: sticky;
   width: 100%;
@@ -46,6 +47,9 @@ const Content = styled.div`
       scale: 0.7;
       margin-left: -0.5rem;
       height: 46px;
+      @media (prefers-color-scheme: dark) {
+        filter: invert(1);
+      }
     }
 
     @media (prefers-color-scheme: dark) {

diff --git a/src/components/Player.tsx b/src/components/Player.tsx
@@ -29,7 +29,15 @@ const playerClass = css`
   width: 100%;
   z-index: 10;
   bottom: 0;
-  background-color: #fff;
+  filter: drop-shadow(0 0 0.075rem #000);
+
+  @media (prefers-color-scheme: dark) {
+    background: #333;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background: #fff;
+  }
 
   @media (max-width: ${bp.small}px) {
     height: 150px;