This PR adds a theme store to allow components to directly access the
theme without requiring it to be passed down as props every time it is
used.
So before, you might need to do something like `text(theme, "variant",
"hovered")`, you could now just call `text("variant", "hovered")`.
This also means that style_trees don't need to be called with a theme
either:
```ts
export default function app(): any {
const theme = useTheme()
return {
meta: {
name: theme.name,
is_light: theme.is_light,
},
command_palette: command_palette(),
contact_notification: contact_notification(),
// etc...
}
}
```
We do this by creating a zustand store to store the theme, and allow it
to be accessed with `useThemeStore.getState().theme`.
```ts
import { create } from "zustand"
import { ColorScheme } from "./color_scheme"
type ThemeState = {
theme: ColorScheme | undefined
setTheme: (theme: ColorScheme) => void
}
export const useThemeStore = create<ThemeState>((set) => ({
theme: undefined,
setTheme: (theme) => set(() => ({ theme })),
}))
export const useTheme = (): ColorScheme => {
const { theme } = useThemeStore.getState()
if (!theme) throw new Error("Tried to use theme before it was loaded")
return theme
}
```
Release Notes:
- N/A (No public facing changes)39 files changedLine totals unavailable