Fix action popup dark mode on mobile

yomidevs · Jun 18, 2024 · 2f24744 · 2f24744
1 parent ac8b2d2
commit 2f24744
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/ext/css/action-popup.css b/ext/css/action-popup.css
@@ -36,6 +36,8 @@
     --nav-button-border-color-active-focus: #808080;
     --nav-button-icon-bg: #333333;
     --background-color: #f8f9fa;
+    --text-color: #333333;
+    --svg-filter: 0;
 }
 
 :root[data-theme=dark] {
@@ -47,6 +49,8 @@
     --nav-button-border-color-active-focus: #7f7f7f;
     --nav-button-icon-bg: #fbfbfb;
     --background-color: #1e1e1e;
+    --text-color: #cccccc;
+    --svg-filter: invert(100%);
 }
 
 body {
@@ -65,7 +69,7 @@ h3 {
     font-weight: 500;
     line-height: 1.1;
     font-size: 24px;
-    color: inherit;
+    color: var(--text-color);
 }
 label {
     font-weight: normal;
@@ -119,7 +123,7 @@ label {
     margin: 0 -10px;
     padding: 0.5em 10px;
     cursor: pointer;
-    color: #333;
+    color: var(--text-color);
     text-decoration: none;
     background-color: transparent;
     transition: background-color 0.125s linear 0s;
@@ -130,7 +134,7 @@ label {
 }
 .link-group:hover,
 .link-group:active {
-    color: #333;
+    color: var(--text-color);
     text-decoration: none;
 }
 .link-group:hover>.link-group-label,
@@ -157,11 +161,11 @@ label {
     margin: 0;
     padding: 0;
 }
-.link-group-icon[data-icon=chevron] { background-image: url(/images/right-chevron.svg); }
-.link-group-icon[data-icon=cog] { background-image: url(/images/cog.svg); }
-.link-group-icon[data-icon=key] { background-image: url(/images/key.svg); }
-.link-group-icon[data-icon=magnifying-glass] { background-image: url(/images/magnifying-glass.svg); }
-.link-group-icon[data-icon=question-mark-circle] { background-image: url(/images/question-mark-circle.svg); }
+.link-group-icon[data-icon=chevron] { background-image: url(/images/right-chevron.svg); filter: var(--svg-filter); }
+.link-group-icon[data-icon=cog] { background-image: url(/images/cog.svg); filter: var(--svg-filter); }
+.link-group-icon[data-icon=key] { background-image: url(/images/key.svg); filter: var(--svg-filter); }
+.link-group-icon[data-icon=magnifying-glass] { background-image: url(/images/magnifying-glass.svg); filter: var(--svg-filter); }
+.link-group-icon[data-icon=question-mark-circle] { background-image: url(/images/question-mark-circle.svg); filter: var(--svg-filter); }
 
 .link-group-label {
     vertical-align: middle;