more dark mode fixes

basher · Jun 28, 2024 · 5f0f1d2 · 5f0f1d2
1 parent 0f27801
commit 5f0f1d2
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 2 deletions.
diff --git a/ui/npm-shrinkwrap.json b/ui/npm-shrinkwrap.json
diff --git a/ui/public/storybook-overrides.css b/ui/public/storybook-overrides.css
@@ -15,6 +15,8 @@
 
 /* Override dark mode in Storybook docs. */
 :root :has(#storybook-docs:not([hidden='true'])) {
+    --color-brand: 270 50% 80%;
     --color-text: 0 0% 20%;
+    --color-neutral-900: 0 0% 95%;
     color-scheme: light !important;
 }
diff --git a/ui/src/css/components/_banner.scss b/ui/src/css/components/_banner.scss
@@ -38,6 +38,18 @@ Dependencies.
         }
     }
 
+    &__media {
+        .image {
+            @if $allow-dark-mode {
+                /* stylelint-disable-next-line max-nesting-depth */
+                @media (prefers-color-scheme: dark) {
+                    opacity: 1;
+                    transition: none;
+                }
+            }
+        }
+    }
+
     &__overlay {
         @include bp-medium {
             // Example, so text is legible above image.

diff --git a/ui/src/css/web-components/_webui-modal.scss b/ui/src/css/web-components/_webui-modal.scss
@@ -24,6 +24,13 @@ webui-modal {
         margin: auto;
         padding: 0 $gutter-m $gutter-m;
 
+        /* stylelint-disable-next-line order/order */
+        @if $allow-dark-mode {
+            @media (prefers-color-scheme: dark) {
+                background: $color-neutral-900;
+            }
+        }
+
         &::backdrop {
             background: var(--color-backdrop);
             pointer-events: none; // So click outside works.
@@ -35,6 +42,13 @@ webui-modal {
         display: flex;
         justify-content: flex-end;
         padding-block-start: $gutter-m;
+
+        /* stylelint-disable-next-line order/order */
+        @if $allow-dark-mode {
+            @media (prefers-color-scheme: dark) {
+                background: $color-neutral-900;
+            }
+        }
     }
 
     .modal__content {