Feat/theme toggle (#96)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

.changeset/open-ravens-brake.md

@@ -0,0 +1,8 @@
+---
+'@tanstack/react-devtools': minor
+'@tanstack/solid-devtools': minor
+'@tanstack/devtools-ui': patch
+'@tanstack/devtools': patch
+---
+
+added support for dark/light mode

packages/devtools-ui/src/components/main-panel.tsx

@@ -15,11 +15,14 @@ export const MainPanel = ({
   withPadding,
 }: PanelProps) => {
   const styles = useStyles()
+
   return (
     <div
-      class={clsx(styles().mainPanel.panel, className, classStyles, {
-        [styles().mainPanel.withPadding]: withPadding,
-      })}
+      class={clsx(
+        styles().mainPanel.panel(Boolean(withPadding)),
+        className,
+        classStyles,
+      )}
     >
       {children}
     </div>

packages/devtools-ui/src/components/theme.tsx

@@ -0,0 +1,34 @@
+import { createContext, createEffect, createSignal, useContext } from 'solid-js'
+import type { Accessor, JSX } from 'solid-js'
+
+export type Theme = 'light' | 'dark'
+
+type ThemeContextValue = {
+  theme: Accessor<Theme>
+  setTheme: (theme: Theme) => void
+}
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
+
+export const ThemeContextProvider = (props: {
+  children: JSX.Element
+  theme: Theme
+}) => {
+  const [theme, setTheme] = createSignal<Theme>(props.theme)
+  createEffect(() => {
+    setTheme(props.theme)
+  })
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {props.children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeContextProvider')
+  }
+
+  return context
+}

packages/devtools-ui/src/index.ts

@@ -13,3 +13,4 @@ export {
   SectionIcon,
 } from './components/section'
 export { Header, HeaderLogo } from './components/header'
+export { useTheme, ThemeContextProvider } from './components/theme'