taler-merchant-demos

commit 0564a21112c77b7d06216147e1be6585d0de2f11
parent 7a3baae91d36943c388e60ecaaa792383e92f85b
Author: ng <�>
Date:   Sun, 25 Sep 2022 14:04:18 +0200

fix: 🐛 Fix contrast with buttons dying on dark theme

+ Allow a data-force-light-theme tag on the html element to disable light theme

Diffstat:
M
talermerchantdemos/static/blog.css
 | 
5
+++--
M
talermerchantdemos/static/theme.css
 | 
8
+++++++-

2 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/talermerchantdemos/static/blog.css b/talermerchantdemos/static/blog.css
@@ -45,8 +45,9 @@
   /* Always On-Top */
   z-index: 500000;
   /* Background */
-  background: #1a1a1a33;
-  backdrop-filter: blur(8px) brightness(0.7);
+  color: #ffffff;
+  background: #1a1a1a66;
+  backdrop-filter: blur(8px) brightness(0.5);
   /* Cursor */
   cursor: text;
   /* Interactions */
diff --git a/talermerchantdemos/static/theme.css b/talermerchantdemos/static/theme.css
@@ -48,12 +48,15 @@
   --button-confirm-hovering-foreground: var(--white);
   --button-confirm-active-background: var(--green-1);
   --button-confirm-active-foreground: var(--white);
+
+  /* Info Icon */
+  --license-info-icon-filter: none;
 }
 
 /* Dark Theme Overwrites (UA can choose to enable this selector if it wants) */
 @media (prefers-color-scheme: dark) {
   /* Modify core colour scheme */
-  :root {
+  html:not([data-force-light-theme]) {
     /* Link-related */
     --default-link-colour: var(--white);
     
@@ -63,6 +66,9 @@
 
     /* Misc */
     --quote-background-colour: var(--grey-3);
+
+    /* Info Icon */
+    --license-info-icon-filter: invert() hue-rotate(180deg);
   }
 }