enhance(placement): top banner dark mode (#8804)

* enhance(placement): top banner dark mode * lint
mdn · May 8, 2023 · 8570698 · 8570698
1 parent c453e79
commit 8570698
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 10 deletions.
diff --git a/client/src/placement-context.tsx b/client/src/placement-context.tsx
@@ -33,6 +33,10 @@ export interface PlacementData {
     backgroundColor?: string;
     ctaTextColor?: string;
     ctaBackgroundColor?: string;
+    textColorDark?: string;
+    backgroundColorDark?: string;
+    ctaTextColorDark?: string;
+    ctaBackgroundColorDark?: string;
   };
 }
 

diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss
@@ -134,10 +134,27 @@ section.place {
 }
 
 .top-banner {
-  --place-top-background: var(--background-secondary);
-  --place-top-color: var(--text-primary);
-  --place-top-cta-background: var(--text-primary);
-  --place-top-cta-color: var(--background-secondary);
+  --place-top-background-light: var(--background-secondary);
+  --place-top-color-light: var(--text-primary);
+  --place-top-cta-background-light: var(--text-primary);
+  --place-top-cta-color-light: var(--background-secondary);
+
+  --place-top-background-dark: var(--background-secondary);
+  --place-top-color-dark: var(--text-primary);
+  --place-top-cta-background-dark: var(--text-primary);
+  --place-top-cta-color-dark: var(--background-secondary);
+
+  --place-top-background: var(--place-top-background-light);
+  --place-top-color: var(--place-top-color-light);
+  --place-top-cta-background: var(--place-top-cta-background-light);
+  --place-top-cta-color: var(--place-top-cta-color-light);
+
+  @media (prefers-color-scheme: dark) {
+    --place-top-background: var(--place-top-background-dark);
+    --place-top-color: var(--place-top-color-dark);
+    --place-top-cta-background: var(--place-top-cta-background-dark);
+    --place-top-cta-color: var(--place-top-cta-color-dark);
+  }
 
   background-color: var(--place-top-background);
 
@@ -171,3 +188,10 @@ section.place {
     }
   }
 }
+
+.dark .top-banner {
+  --place-top-background: var(--place-top-background-dark);
+  --place-top-color: var(--place-top-color-dark);
+  --place-top-cta-background: var(--place-top-cta-background-dark);
+  --place-top-cta-color: var(--place-top-cta-color-dark);
+}
diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx
@@ -67,14 +67,29 @@ function Fallback() {
 export function TopPlacement() {
   const isServer = useIsServer();
   const placementData = usePlacement();
-  const { textColor, backgroundColor, ctaTextColor, ctaBackgroundColor } =
-    placementData?.top?.colors || {};
+  const {
+    textColor,
+    backgroundColor,
+    ctaTextColor,
+    ctaBackgroundColor,
+    textColorDark,
+    backgroundColorDark,
+    ctaTextColorDark,
+    ctaBackgroundColorDark,
+  } = placementData?.top?.colors || {};
   const css = Object.fromEntries(
     [
-      ["--place-top-background", backgroundColor],
-      ["--place-top-color", textColor],
-      ["--place-top-cta-background", ctaBackgroundColor],
-      ["--place-top-cta-color", ctaTextColor],
+      ["--place-top-background-light", backgroundColor],
+      ["--place-top-color-light", textColor],
+      ["--place-top-cta-background-light", ctaBackgroundColor],
+      ["--place-top-cta-color-light", ctaTextColor],
+      ["--place-top-background-dark", backgroundColorDark || backgroundColor],
+      ["--place-top-color-dark", textColorDark || textColor],
+      [
+        "--place-top-cta-background-dark",
+        ctaBackgroundColorDark || ctaBackgroundColor,
+      ],
+      ["--place-top-cta-color-dark", ctaTextColorDark || ctaBackgroundColor],
     ].filter(([_, v]) => Boolean(v))
   );