# Use theme store to pass \`color_scheme\` directly to components \(\#2675\) · gitcafe/zed

[View on GitCafe](https://git.cafe/gitcafe/zed/commit/0b4c5db5e25fe1d86e9d8c7d971ac87767d91e4f)

Repository: [gitcafe/zed](https://git.cafe/gitcafe/zed)

Visibility: public

Requested revision: 0b4c5db5e25fe1d86e9d8c7d971ac87767d91e4f

Requested commit: 0b4c5db5e25fe1d86e9d8c7d971ac87767d91e4f

Commit: 0b4c5db5e25fe1d86e9d8c7d971ac87767d91e4f

Tree: f37c804913618907bdc7818212399ad31a4bff42

Author: Nate Butler

Committer: GitHub

## Message

````
Use theme store to pass `color_scheme` directly to components (#2675)

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)
````

## Parents

- [f8316dd127ca8f53c81ee6a654019a5d5b18e732](https://git.cafe/gitcafe/zed/commit/f8316dd127ca8f53c81ee6a654019a5d5b18e732?format=markdown)

- [8a5e7047f0e59178e11eadd96a4a7b3ef417fbf7](https://git.cafe/gitcafe/zed/commit/8a5e7047f0e59178e11eadd96a4a7b3ef417fbf7?format=markdown)

[Source at this commit](https://git.cafe/gitcafe/zed/tree/0b4c5db5e25fe1d86e9d8c7d971ac87767d91e4f?format=markdown)