auto theme

coder · aslilac · Dec 14, 2023 · Dec 11, 2023 · Dec 11, 2023 · Dec 11, 2023
commit 1c0e39a5f899ab4041753a91392de60730d61c2a
@@ -1,18 +1,12 @@
-import CssBaseline from "@mui/material/CssBaseline";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { AuthProvider } from "components/AuthProvider/AuthProvider";
-import type { FC, PropsWithChildren, ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { AppRouter } from "./AppRouter";
+import { ThemeProviders } from "./contexts/ThemeProviders";
+import { AuthProvider } from "./contexts/AuthProvider/AuthProvider";
 import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
 import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
-import theme from "./theme";
 import "./theme/globalFonts";
-import {
-  StyledEngineProvider,
-  ThemeProvider as MuiThemeProvider,
-} from "@mui/material/styles";
-import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 
 const defaultQueryClient = new QueryClient({
   defaultOptions: {
@@ -23,19 +17,6 @@ const defaultQueryClient = new QueryClient({
   },
 });
 
-export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
-  return (
-    <StyledEngineProvider injectFirst>
-      <MuiThemeProvider theme={theme.dark}>
-        <EmotionThemeProvider theme={theme.dark}>
-          <CssBaseline enableColorScheme />
-          {children}
-        </EmotionThemeProvider>
-      </MuiThemeProvider>
-    </StyledEngineProvider>
-  );
-};
-
 interface AppProvidersProps {
   children: ReactNode;
   queryClient?: QueryClient;
@@ -47,16 +28,16 @@ export const AppProviders: FC<AppProvidersProps> = ({
 }) => {
   return (
     <HelmetProvider>
-      <ThemeProviders>
-        <ErrorBoundary>
-          <QueryClientProvider client={queryClient}>
-            <AuthProvider>
+      <ErrorBoundary>
+        <QueryClientProvider client={queryClient}>
+          <AuthProvider>
+            <ThemeProviders>
               {children}
               <GlobalSnackbar />
-            </AuthProvider>
-          </QueryClientProvider>
-        </ErrorBoundary>
-      </ThemeProviders>
+            </ThemeProviders>
+          </AuthProvider>
+        </QueryClientProvider>
+      </ErrorBoundary>
     </HelmetProvider>
   );
 };

@@ -1,11 +1,11 @@
-import { useAuth } from "components/AuthProvider/AuthProvider";
+import { type FC } from "react";
+import { useAuth } from "contexts/AuthProvider/AuthProvider";
+import { useProxy } from "contexts/ProxyContext";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
 import { useFeatureVisibility } from "hooks/useFeatureVisibility";
 import { useMe } from "hooks/useMe";
 import { usePermissions } from "hooks/usePermissions";
-import { FC } from "react";
 import { NavbarView } from "./NavbarView";
-import { useProxy } from "contexts/ProxyContext";
 
 export const Navbar: FC = () => {
   const { appearance, buildInfo } = useDashboard();

@@ -1,12 +1,12 @@
 import axios from "axios";
-import { useAuth } from "components/AuthProvider/AuthProvider";
-import { FC, useEffect } from "react";
+import { type FC, useEffect } from "react";
 import { Outlet, Navigate, useLocation } from "react-router-dom";
 import { embedRedirect } from "utils/redirect";
-import { FullScreenLoader } from "../Loader/FullScreenLoader";
-import { DashboardProvider } from "components/Dashboard/DashboardProvider";
-import { ProxyProvider } from "contexts/ProxyContext";
 import { isApiError } from "api/errors";
+import { useAuth } from "contexts/AuthProvider/AuthProvider";
+import { ProxyProvider } from "contexts/ProxyContext";
+import { DashboardProvider } from "../Dashboard/DashboardProvider";
+import { FullScreenLoader } from "../Loader/FullScreenLoader";
 
 export const RequireAuth: FC = () => {
   const { signOut, isSigningOut, isSignedOut } = useAuth();

@@ -97,7 +97,7 @@ export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
   };
 
   if (isLoading) {
-    return <FullScreenLoader />;
+    return null;
   }
 
   return (

@@ -0,0 +1,57 @@
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+import CssBaseline from "@mui/material/CssBaseline";
+import {
+  StyledEngineProvider,
+  ThemeProvider as MuiThemeProvider,
+} from "@mui/material/styles";
+import {
+  type FC,
+  type PropsWithChildren,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import themes from "theme";
+import { useAuth } from "./AuthProvider/AuthProvider";
+
+export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
+  const { user } = useAuth();
+  const themeQuery = useMemo(
+    () => window.matchMedia?.("(prefers-color-scheme: light)"),
+    [],
+  );
+  const [preferredColorScheme, setPreferredColorScheme] = useState<
+    "dark" | "light"
+  >(themeQuery?.matches ? "light" : "dark");
+
+  useEffect(() => {
+    const listener = (event: MediaQueryListEvent) => {
+      setPreferredColorScheme(event.matches ? "light" : "dark");
+    };
+
+    themeQuery.addEventListener("change", listener);
+    return () => {
+      themeQuery.removeEventListener("change", listener);
+    };
+  }, [themeQuery]);
+
+  // We might not be logged in yet, or the `theme_preference` could be an empty string.
+  const themePreference = user?.theme_preference || "auto";
+  // The janky casting here is find because of the much more type safe fallback
+  // We need to support `themePreference` being wrong anyway because the database
+  // value could be anything, like an empty string.
+  const theme =
+    themes[themePreference as keyof typeof themes] ??
+    themes[preferredColorScheme];
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <MuiThemeProvider theme={theme}>
+        <EmotionThemeProvider theme={theme}>
+          <CssBaseline enableColorScheme />
+          {children}
+        </EmotionThemeProvider>
+      </MuiThemeProvider>
+    </StyledEngineProvider>
+  );
+};
@@ -1,5 +1,5 @@
-import { User } from "api/typesGenerated";
-import { useAuth } from "components/AuthProvider/AuthProvider";
+import type { User } from "api/typesGenerated";
+import { useAuth } from "contexts/AuthProvider/AuthProvider";
 
 export const useMe = (): User => {
   const { user } = useAuth();

@@ -1,5 +1,5 @@
-import { useAuth } from "components/AuthProvider/AuthProvider";
-import { Permissions } from "components/AuthProvider/permissions";
+import { useAuth } from "contexts/AuthProvider/AuthProvider";
+import type { Permissions } from "contexts/AuthProvider/permissions";
 
 export const usePermissions = (): Permissions => {
   const { permissions } = useAuth();

@@ -1,10 +1,10 @@
-import { useAuth } from "components/AuthProvider/AuthProvider";
-import { FC } from "react";
+import { type FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { Navigate, useLocation, useNavigate } from "react-router-dom";
+import { useAuth } from "contexts/AuthProvider/AuthProvider";
+import { getApplicationName } from "utils/appearance";
 import { retrieveRedirect } from "utils/redirect";
 import { LoginPageView } from "./LoginPageView";
-import { getApplicationName } from "utils/appearance";
 
 export const LoginPage: FC = () => {
   const location = useLocation();

@@ -1,11 +1,11 @@
-import { useAuth } from "components/AuthProvider/AuthProvider";
 import { FC } from "react";
 import { Helmet } from "react-helmet-async";
-import { pageTitle } from "utils/page";
-import { SetupPageView } from "./SetupPageView";
-import { Navigate, useNavigate } from "react-router-dom";
 import { useMutation } from "react-query";
+import { Navigate, useNavigate } from "react-router-dom";
+import { pageTitle } from "utils/page";
 import { createFirstUser } from "api/queries/users";
+import { useAuth } from "contexts/AuthProvider/AuthProvider";
+import { SetupPageView } from "./SetupPageView";
 
 export const SetupPage: FC = () => {
   const { signIn, isConfiguringTheFirstUser, isSignedIn, isSigningIn } =

@@ -5,7 +5,7 @@ import { useOrganizationId } from "hooks";
 import { useMe } from "hooks/useMe";
 import { usePermissions } from "hooks/usePermissions";
 import { groupsForUser } from "api/queries/groups";
-import { useAuth } from "components/AuthProvider/AuthProvider";
+import { useAuth } from "contexts/AuthProvider/AuthProvider";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
 import { Section } from "../Section";
 import { AccountUserGroups } from "./AccountUserGroups";

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -4,9 +4,9 @@ import {
   type DeploymentConfig,
 } from "api/api";
 import { FieldError } from "api/errors";
-import * as TypesGen from "api/typesGenerated";
+import type * as TypesGen from "api/typesGenerated";
 import range from "lodash/range";
-import { Permissions } from "components/AuthProvider/permissions";
+import { Permissions } from "contexts/AuthProvider/permissions";
 import { TemplateVersionFiles } from "utils/templateVersion";
 import { FileTree } from "utils/filetree";
 import { ProxyLatencyReport } from "contexts/useProxyLatency";

@@ -1,6 +1,6 @@
 import { rest } from "msw";
 import { CreateWorkspaceBuildRequest } from "api/typesGenerated";
-import { permissionsToCheck } from "components/AuthProvider/permissions";
+import { permissionsToCheck } from "contexts/AuthProvider/permissions";
 import * as M from "./entities";
 import { MockGroup, MockWorkspaceQuota } from "./entities";
 import fs from "fs";

@@ -4,7 +4,10 @@ import {
   waitFor,
   renderHook,
 } from "@testing-library/react";
-import { AppProviders, ThemeProviders } from "App";
+import { ReactNode, useState } from "react";
+import { QueryClient } from "react-query";
+import { AppProviders } from "App";
+import { ThemeProviders } from "contexts/ThemeProviders";
 import { DashboardLayout } from "components/Dashboard/DashboardLayout";
 import { TemplateSettingsLayout } from "pages/TemplateSettingsPage/TemplateSettingsLayout";
 import { WorkspaceSettingsLayout } from "pages/WorkspaceSettingsPage/WorkspaceSettingsLayout";
@@ -13,10 +16,8 @@ import {
   createMemoryRouter,
   RouteObject,
 } from "react-router-dom";
-import { RequireAuth } from "../components/RequireAuth/RequireAuth";
+import { RequireAuth } from "components/RequireAuth/RequireAuth";
 import { MockUser } from "./entities";
-import { ReactNode, useState } from "react";
-import { QueryClient } from "react-query";
 
 function createTestQueryClient() {
   // Helps create one query client for each test case, to make sure that tests

@@ -12,6 +12,7 @@ export interface Theme extends MuiTheme {
 const theme = {
   dark,
   darkBlue,
+  light: darkBlue,
 } satisfies Record<string, Theme>;
 
 export default theme;