feat(embed): override theme variables

outerbase · Aug 22, 2024 · 3f11b25 · 3f11b25
1 parent fc99b83
commit 3f11b25
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/src/app/(theme)/embed/sqlite/page.tsx b/src/app/(theme)/embed/sqlite/page.tsx
@@ -2,7 +2,11 @@ import ThemeLayout from "../../theme_layout";
 import EmbedPageClient from "./page-client";
 
 export default async function EmbedPage(props: {
-  searchParams: { theme?: string; disableThemeToggle?: string };
+  searchParams: {
+    theme?: string;
+    disableThemeToggle?: string;
+    [key: string]: any;
+  };
 }) {
   let overrideTheme: "dark" | "light" | undefined = undefined;
   const disableToggle = props.searchParams.disableThemeToggle === "1";
@@ -11,8 +15,22 @@ export default async function EmbedPage(props: {
     overrideTheme = props.searchParams.theme === "dark" ? "dark" : "light";
   }
 
+  const overrideThemeVariables: Record<string, string> = {};
+
+  for (const key in props.searchParams) {
+    if (!key.startsWith("themeVariables[")) {
+      continue;
+    }
+
+    overrideThemeVariables[key.slice(15, -1)] = props.searchParams[key];
+  }
+
   return (
-    <ThemeLayout overrideTheme={overrideTheme} disableToggle={disableToggle}>
+    <ThemeLayout
+      overrideTheme={overrideTheme}
+      disableToggle={disableToggle}
+      overrideThemeVariables={overrideThemeVariables}
+    >
       <EmbedPageClient />
     </ThemeLayout>
   );

diff --git a/src/app/(theme)/theme_layout.tsx b/src/app/(theme)/theme_layout.tsx
@@ -13,17 +13,24 @@ export default async function ThemeLayout({
   children,
   overrideTheme,
   disableToggle,
+  overrideThemeVariables,
 }: PropsWithChildren<{
   overrideTheme?: "dark" | "light";
   disableToggle?: boolean;
+  overrideThemeVariables?: Record<string, string>;
 }>) {
   const cookieStore = cookies();
   const theme =
     overrideTheme ??
     (cookieStore.get("theme")?.value === "dark" ? "dark" : "light");
+  const style = overrideThemeVariables ?? {};
 
   return (
-    <body className={cn(inter.className, theme)} suppressHydrationWarning>
+    <body
+      className={cn(inter.className, theme)}
+      style={style}
+      suppressHydrationWarning
+    >
       <ThemeProvider defaultTheme={theme} disableToggle={disableToggle}>
         <Fragment>{children}</Fragment>
         <Toaster />