Fix dark mode in dashboard (#1887)

livepeer · Sep 16, 2023 · c7b8b79 · c7b8b79 · vercel · Sep 16, 2023
1 parent cec182c
commit c7b8b79
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 35 deletions.
diff --git a/packages/www/lib/theme.tsx b/packages/www/lib/theme.tsx
@@ -2,7 +2,7 @@ import { Global } from "@emotion/core";
 import React, { memo } from "react";
 import { useThemeUI, ThemeProvider as TP, Styled } from "theme-ui";
 
-export const DEFAULT_THEME = "light";
+export const DEFAULT_THEME = "system";
 
 export const theme = {
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],

diff --git a/packages/www/pages/_app.tsx b/packages/www/pages/_app.tsx
@@ -5,8 +5,8 @@ import { ApiProvider } from "hooks/use-api";
 import { AnalyzerProvider } from "hooks/use-analyzer";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { MetaMaskProvider } from "metamask-react";
+import "../css/recaptcha.css";
 import React from "react";
-import { Theme } from "@radix-ui/themes";
 import {
   globalCss,
   getThemes,
@@ -25,10 +25,6 @@ import "../css/hubspot.scss";
 import { isStaging } from "lib/utils";
 import { getEndpoint } from "../hooks/use-api";
 
-import "../css/recaptcha.css";
-import "../css/markdown.css";
-import "@radix-ui/themes/styles.css";
-
 const queryClient = new QueryClient();
 
 const globalStyles = globalCss({
@@ -104,35 +100,33 @@ const App = ({ Component, pageProps }) => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
       <DesignSystemProvider>
-        <Theme appearance="light">
-          <ThemeProvider
-            forcedTheme={DEFAULT_THEME}
-            disableTransitionOnChange
-            attribute="class"
-            defaultTheme={DEFAULT_THEME}
-            value={{
-              ...themeMap,
-              dark: "dark-theme-green",
-              light: "light-theme-green",
-            }}>
-            <SnackbarProvider>
-              <QueryClientProvider client={queryClient}>
-                <MetaMaskProvider>
-                  <ApiProvider>
-                    <AnalyzerProvider>
-                      <LivepeerConfig
-                        theme={livepeerTheme}
-                        client={livepeerClient}>
-                        <DefaultSeo {...SEO} />
-                        <Component {...pageProps} />
-                      </LivepeerConfig>
-                    </AnalyzerProvider>
-                  </ApiProvider>
-                </MetaMaskProvider>
-              </QueryClientProvider>
-            </SnackbarProvider>
-          </ThemeProvider>
-        </Theme>
+        <ThemeProvider
+          forcedTheme={Component.theme || undefined}
+          disableTransitionOnChange
+          attribute="class"
+          defaultTheme={DEFAULT_THEME}
+          value={{
+            ...themeMap,
+            dark: "dark-theme-green",
+            light: "light-theme-green",
+          }}>
+          <SnackbarProvider>
+            <QueryClientProvider client={queryClient}>
+              <MetaMaskProvider>
+                <ApiProvider>
+                  <AnalyzerProvider>
+                    <LivepeerConfig
+                      theme={livepeerTheme}
+                      client={livepeerClient}>
+                      <DefaultSeo {...SEO} />
+                      <Component {...pageProps} />
+                    </LivepeerConfig>
+                  </AnalyzerProvider>
+                </ApiProvider>
+              </MetaMaskProvider>
+            </QueryClientProvider>
+          </SnackbarProvider>
+        </ThemeProvider>
       </DesignSystemProvider>
     </>
   );

diff --git a/packages/www/pages/index.tsx b/packages/www/pages/index.tsx
@@ -110,4 +110,5 @@ const HomePage = () => {
   );
 };
 
+HomePage.theme = "light-theme-green";
 export default HomePage;
diff --git a/packages/www/pages/pricing.tsx b/packages/www/pages/pricing.tsx
@@ -94,4 +94,5 @@ export async function getStaticProps() {
   };
 }
 
+PricingPage.theme = "light-theme-green";
 export default PricingPage;
diff --git a/packages/www/pages/use-cases/[slug].tsx b/packages/www/pages/use-cases/[slug].tsx
@@ -179,4 +179,5 @@ export async function getStaticProps({ params }) {
   };
 }
 
+UseCase.theme = "light-theme-green";
 export default UseCase;
-Original file line number
+Diff line change
@@ Expand Up / @@ -110,4 +110,5 @@ const HomePage = () => { @@
       );
     };
+    HomePage.theme = "light-theme-green";
     export default HomePage;