From e1043536776c4f40e4c4f02407f913d9b366fb92 Mon Sep 17 00:00:00 2001
From: Andrew Boyd <andrew@formkit.com>
Date: Thu, 15 Aug 2024 11:27:18 -0400
Subject: [PATCH] feat: fixes dark mode stylesfor announcement banner

---
 docs/src/App.vue | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/docs/src/App.vue b/docs/src/App.vue
index 33af96e..da0a92b 100644
--- a/docs/src/App.vue
+++ b/docs/src/App.vue
@@ -43,10 +43,6 @@ import TheHeader from "./components/TheHeader.vue"
   border-bottom: 1px solid var(--ui-border-light);
   overflow: clip;
 
-  .dark & {
-    border-bottom-color: var(--dark-ll);
-  }
-
   .container {
     display: flex;
     align-items: center;
@@ -89,10 +85,6 @@ import TheHeader from "./components/TheHeader.vue"
     bottom: 0;
     width: 100dvw;
     z-index: -1;
-
-    .dark & {
-      mix-blend-mode: overlay;
-    }
   }
 
   &::before {
@@ -101,20 +93,27 @@ import TheHeader from "./components/TheHeader.vue"
     width: 33%;
     height: 100%;
     background: linear-gradient(90deg, rgb(218, 231, 245), transparent);
-
-    .dark & {
-      background: linear-gradient(90deg, rgb(101, 196, 233), transparent);
-    }
   }
   &::after {
     top: 0;
     right: 0;
     height: 100%;
     background: linear-gradient(-90deg, rgb(247, 211, 249), transparent);
+  }
+}
 
-    .dark & {
-      background: linear-gradient(-90deg, rgb(255, 108, 255), transparent);
-    }
+[data-dark-mode="true"] .site-wide-announcement {
+  &::before,
+  &::after {
+    opacity: 0.75;
+    mix-blend-mode: overlay;
+  }
+
+  &::before {
+    background: linear-gradient(90deg, rgb(101, 196, 233), transparent);
+  }
+  &::after {
+    background: linear-gradient(-90deg, rgb(255, 108, 255), transparent);
   }
 }
 </style>