feat: add dark splash screen, ref #4398

leather-io · Jan 8, 2024 · 8886038 · 8886038
1 parent d4c99d5
commit 8886038
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 4 deletions.
diff --git a/public/assets/base.css b/public/assets/base.css
@@ -44,3 +44,7 @@
   font-weight: 400;
   font-style: normal;
 }
+
+.splash-screen {
+  background-color: #4a423b !important;
+}
diff --git a/public/assets/splash-screen.js b/public/assets/splash-screen.js
@@ -0,0 +1,10 @@
+var isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+var body = document.querySelector('body');
+var html = document.querySelector('html');
+var defClassName = 'splash-screen';
+
+if (!isDark) {
+  body?.classList.remove(defClassName);
+  html.classList.remove(defClassName);
+}
diff --git a/public/html/index.html b/public/html/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="mode__full-page light">
+<html class="mode__full-page light splash-screen">
   <!--
     Hello! Thanks for showing interest in our code.
     Interested in joining our team? To learn more, email us:
@@ -31,8 +31,9 @@
       type="font/woff2"
     />
   </head>
-  <body>
+  <body class="splash-screen">
     <div id="app"></div>
+    <script src="/assets/splash-screen.js"></script>
     <script src="browser-polyfill.js"></script>
   </body>
 </html>
diff --git a/public/html/popup.html b/public/html/popup.html
@@ -1,12 +1,13 @@
 <!doctype html>
-<html class="mode__popup light">
+<html class="mode__popup light splash-screen">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link href="/assets/base.css" rel="stylesheet" />
   </head>
-  <body>
+  <body class="splash-screen">
     <div id="app"></div>
+    <script src="/assets/splash-screen.js"></script>
     <script src="browser-polyfill.js"></script>
   </body>
 </html>
diff --git a/src/app/common/theme-provider.tsx b/src/app/common/theme-provider.tsx
@@ -47,10 +47,26 @@ function setUserSelectedTheme(theme: UserSelectedTheme) {
 interface ThemeSwitcherProviderProps {
   children: React.JSX.Element | React.JSX.Element[];
 }
+
+function removeDefaultBg() {
+  const body = document.querySelector('body');
+  const html = document.querySelector('html');
+  const defClassName = 'splash-screen';
+
+  if (!body || !html) return;
+
+  body.classList.remove(defClassName);
+  html.classList.remove(defClassName);
+}
+
 export function ThemeSwitcherProvider({ children }: ThemeSwitcherProviderProps) {
   const userSelectedTheme = useUserSelectedTheme();
   const [theme, setTheme] = useState<ComputedTheme>(() => getComputedTheme(userSelectedTheme));
 
+  useEffect(() => {
+    removeDefaultBg();
+  }, []);
+
   useEffect(() => {
     switch (userSelectedTheme) {
       case 'system': {