diff --git a/web/src/context/providers.tsx b/web/src/context/providers.tsx
index efcf2a10b..b239aff47 100644
--- a/web/src/context/providers.tsx
+++ b/web/src/context/providers.tsx
@@ -13,7 +13,7 @@ function providers({ children }: TProvidersProps) {
   return (
     <RecoilRoot>
       <ApiProvider>
-        <ThemeProvider defaultTheme="light" storageKey="frigate-ui-theme">
+        <ThemeProvider defaultTheme="system" storageKey="frigate-ui-theme">
           <TooltipProvider>
             <IconContext.Provider value={{ size: "20" }}>
               {children}