feat: extra css property for themes

allows adding extra css to custom themes, useful for loading fonts, etc.

src/components/ThemeProvider.tsx

@@ -65,17 +65,21 @@ export default function ThemeProvider({
   }
 
   return (
-    <ThemeContext.Provider value={{ themes: themes ?? [] }}>
-      <MantineProvider
-        defaultColorScheme={theme.colorScheme as unknown as any}
-        forceColorScheme={theme.colorScheme as unknown as any}
-        theme={createTheme({
-          ...themeComponents(theme),
-          defaultRadius: 'md',
-        })}
-      >
-        {children}
-      </MantineProvider>
-    </ThemeContext.Provider>
+    <>
+      {theme?.extraCss && <style>{theme.extraCss}</style>}
+
+      <ThemeContext.Provider value={{ themes: themes ?? [] }}>
+        <MantineProvider
+          defaultColorScheme={theme.colorScheme as unknown as any}
+          forceColorScheme={theme.colorScheme as unknown as any}
+          theme={createTheme({
+            ...themeComponents(theme),
+            defaultRadius: 'md',
+          })}
+        >
+          {children}
+        </MantineProvider>
+      </ThemeContext.Provider>
+    </>
   );
 }

src/lib/theme/index.ts

@@ -16,6 +16,7 @@ export type ZiplineTheme = MantineTheme & {
   name: string;
   colorScheme: string;
   mainBackgroundColor: string;
+  extraCss?: string;
 };
 
 export function findTheme(id: string, themes: ZiplineTheme[] = []): ZiplineTheme | undefined {