From 6406d78845ef694b044c36a7739edf823c6f286a Mon Sep 17 00:00:00 2001
From: Juanra GM <juanrgm724@gmail.com>
Date: Tue, 17 Sep 2024 20:10:42 +0200
Subject: [PATCH] feat: resolve the theme context on access

---
 .changeset/nine-buckets-worry.md               | 6 ++++++
 packages/material/src/styles/ThemeProvider.tsx | 4 ++--
 packages/system/src/useTheme.ts                | 7 +++++--
 3 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/nine-buckets-worry.md

diff --git a/.changeset/nine-buckets-worry.md b/.changeset/nine-buckets-worry.md
new file mode 100644
index 000000000..ef62423b6
--- /dev/null
+++ 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
index eb78cee21..8b04831b8 100644
--- 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
index 11b7cf614..606e32239 100644
--- 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;
 }