From 86f0dcd7b531eb1a2f7b808e05c83a5de6a9d274 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sun, 9 Nov 2025 09:06:30 +0000
Subject: [PATCH] Theme context for docs with toggle

cgen-456cc8ceb4d140328e2136d6f2591aa7
---
 client/contexts/DocsThemeContext.tsx | 100 +++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 client/contexts/DocsThemeContext.tsx

diff --git a/client/contexts/DocsThemeContext.tsx b/client/contexts/DocsThemeContext.tsx
new file mode 100644
index 00000000..b4f744eb
--- /dev/null
+++ b/client/contexts/DocsThemeContext.tsx
@@ -0,0 +1,100 @@
+import React, { createContext, useContext, useState } from "react";
+
+type ThemeType = "professional" | "brand";
+
+interface ThemeColors {
+  background: string;
+  foreground: string;
+  sidebar: string;
+  sidebarText: string;
+  sidebarHover: string;
+  sidebarActive: string;
+  sidebarActiveBg: string;
+  accent: string;
+  accentHover: string;
+  border: string;
+  cardBg: string;
+  cardBorder: string;
+  buttonBg: string;
+  buttonText: string;
+  inputBg: string;
+  inputBorder: string;
+  headingColor: string;
+  textMuted: string;
+}
+
+const professionalTheme: ThemeColors = {
+  background: "bg-white",
+  foreground: "text-slate-900",
+  sidebar: "bg-white",
+  sidebarText: "text-slate-700",
+  sidebarHover: "hover:bg-slate-100",
+  sidebarActive: "text-blue-600",
+  sidebarActiveBg: "bg-blue-50",
+  accent: "text-blue-600",
+  accentHover: "hover:text-blue-700",
+  border: "border-slate-200",
+  cardBg: "bg-slate-50",
+  cardBorder: "border-slate-200",
+  buttonBg: "bg-blue-600",
+  buttonText: "text-white",
+  inputBg: "bg-slate-50",
+  inputBorder: "border-slate-300",
+  headingColor: "text-slate-900",
+  textMuted: "text-slate-600",
+};
+
+const brandTheme: ThemeColors = {
+  background: "bg-gradient-to-br from-slate-950 via-purple-900 to-slate-950",
+  foreground: "text-white",
+  sidebar: "bg-slate-900",
+  sidebarText: "text-slate-300",
+  sidebarHover: "hover:bg-purple-800/30",
+  sidebarActive: "text-cyan-400",
+  sidebarActiveBg: "bg-purple-900/50",
+  accent: "text-cyan-400",
+  accentHover: "hover:text-cyan-300",
+  border: "border-purple-700",
+  cardBg: "bg-slate-800/50",
+  cardBorder: "border-purple-700",
+  buttonBg: "bg-gradient-to-r from-purple-600 to-cyan-500",
+  buttonText: "text-white",
+  inputBg: "bg-slate-800/50",
+  inputBorder: "border-purple-600",
+  headingColor: "text-white",
+  textMuted: "text-slate-400",
+};
+
+interface DocsThemeContextType {
+  theme: ThemeType;
+  colors: ThemeColors;
+  toggleTheme: () => void;
+}
+
+const DocsThemeContext = createContext<DocsThemeContextType | undefined>(
+  undefined
+);
+
+export function DocsThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<ThemeType>("professional");
+
+  const colors = theme === "professional" ? professionalTheme : brandTheme;
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "professional" ? "brand" : "professional"));
+  };
+
+  return (
+    <DocsThemeContext.Provider value={{ theme, colors, toggleTheme }}>
+      {children}
+    </DocsThemeContext.Provider>
+  );
+}
+
+export function useDocsTheme() {
+  const context = useContext(DocsThemeContext);
+  if (!context) {
+    throw new Error("useDocsTheme must be used within DocsThemeProvider");
+  }
+  return context;
+}