Added style for prefers-color-scheme to interstitial head (#1935)

* Added style for prefers-color-scheme to interstitial head This checks if the user prefers dark color schemes, and then sets the body to black. This could reduce 'flashes of white'. * feat(backend): Added prefers-color-scheme to interstitial
clerk · Oct 31, 2023 · 8b6b094 · 8b6b094
1 parent bdfd27b
commit 8b6b094
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/.changeset/flat-pots-hear.md b/.changeset/flat-pots-hear.md
@@ -0,0 +1,5 @@
+---
+'@clerk/backend': minor
+---
+
+Added prefers-color-scheme to interstitial
diff --git a/packages/backend/src/tokens/interstitial.ts b/packages/backend/src/tokens/interstitial.ts
@@ -58,6 +58,13 @@ export function loadInterstitialFromLocal(options: Omit<LoadInterstitialOptions,
   return `
     <head>
         <meta charset="UTF-8" />
+        <style>
+          @media (prefers-color-scheme: dark) {
+            body {
+              background-color: black;
+            }
+          }
+        </style>
     </head>
     <body>
         <script>