feat: resolve the theme context on access

swordev · Sep 17, 2024 · 6406d78 · 6406d78
1 parent 0272aa9
commit 6406d78
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/.changeset/nine-buckets-worry.md b/.changeset/nine-buckets-worry.md
@@ -0,0 +1,6 @@
+---
+"@suid/material": minor
+"@suid/system": minor
+---
+
+Resolve the theme context on access
diff --git a/packages/material/src/styles/ThemeProvider.tsx b/packages/material/src/styles/ThemeProvider.tsx
@@ -1,9 +1,9 @@
 import { Theme } from ".";
 import ThemeContext from "@suid/system/ThemeContext";
-import { JSXElement } from "solid-js";
+import { Accessor, JSXElement } from "solid-js";
 
 function ThemeProvider<T extends string>(props: {
-  theme: Theme<T>;
+  theme: Theme<T> | Accessor<Theme<T>>;
   children: JSXElement;
 }) {
   return (

diff --git a/packages/system/src/useTheme.ts b/packages/system/src/useTheme.ts
@@ -9,11 +9,14 @@ function useTheme(
   Context: typeof ThemeContext = ThemeContext
 ) {
   const theme = useContext(Context);
-  if (isEmptyObject(theme) && defaultTheme) {
+  if (typeof theme === "function") {
+    return new Proxy({}, { get: (_, p) => theme()[p] });
+  } else if (isEmptyObject(theme) && defaultTheme) {
     if (typeof defaultTheme === "function") return defaultTheme();
     return defaultTheme;
+  } else if (!theme) {
+    throw new Error("Theme is not defined");
   }
-  if (!theme) throw new Error("Theme is not defined");
   return theme as Theme;
 }