diff --git a/apps/web/app/providers/theme.tsx b/apps/web/app/providers/theme.tsx
new file mode 100644
index 0000000..3ebbcb7
--- /dev/null
+++ b/apps/web/app/providers/theme.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
+
+const STORAGE_KEY = "theme";
+
+export type Theme = "default" | "bbg" | "system";
+
+type ThemeContextValue = {
+ theme: Theme;
+ setTheme: (theme: Theme) => void;
+};
+
+const isTheme = (value: string | null): value is Theme => {
+ return value === "default" || value === "bbg" || value === "system";
+};
+
+const ThemeContext = createContext(null);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+ const [theme, setTheme] = useState("default");
+
+ useEffect(() => {
+ const stored = localStorage.getItem(STORAGE_KEY);
+ if (isTheme(stored)) {
+ setTheme(stored);
+ } else if (stored !== null && !isTheme(stored)) {
+ localStorage.removeItem(STORAGE_KEY);
+ }
+ }, []);
+
+ useEffect(() => {
+ document.documentElement.dataset.theme = theme;
+ localStorage.setItem(STORAGE_KEY, theme);
+ }, [theme]);
+
+ const value = useMemo(() => ({ theme, setTheme }), [theme]);
+
+ return {children};
+}
+
+export function useTheme(): ThemeContextValue {
+ const context = useContext(ThemeContext);
+ if (!context) {
+ throw new Error("useTheme must be used within a ThemeProvider");
+ }
+ return context;
+}