ThemeProvider

The ThemeProvider makes a theme available to components within its provider hierarchy. It is used to apply a shared theme configuration across your application.

Create a theme using the createTheme function and pass the resulting theme to the theme prop.

import Button from "rocksolidjs/Button";
import ThemeProvider from "rocksolidjs/ThemeProvider";
import createTheme from "rocksolidjs/styles/createTheme";

export default function Example() {
  const theme = createTheme({
    colors: {
      default: {
        solid: {
          background: "bg-blue-500 dark:bg-blue-400",
          text: "text-neutral-50 dark:text-neutral-900",
        },
      },
    },
  });

  return (
    <div class="flex flex-col gap-4">
      <Button>Button With Default Theme</Button>
      <ThemeProvider theme={theme}>
        <Button>Button With Overriden Theme</Button>
      </ThemeProvider>
    </div>
  );
};

Accessing the Theme

Use the useTheme hook to access the theme from any component rendered within the ThemeProvider hierarchy.

import Button, { type ButtonProps } from "rocksolidjs/Button";
import ThemeProvider from "rocksolidjs/ThemeProvider";
import createTheme from "rocksolidjs/styles/createTheme";
import useTheme from "rocksolidjs/styles/useTheme";

export default function Example() {
  const theme = createTheme({});
  return (
    <ThemeProvider theme={theme}>
      <MyButton>Customized Button</MyButton>
    </ThemeProvider>
  );
}

const MyButton = (
  props: ButtonProps,
) => {
  const theme = useTheme();
  return (
    <Button
      {...props}
      class={theme.rounded.full}
    />
  );
};

The useTheme hook returns the theme provided by the nearest ThemeProvider. This allows components to access theme tokens and other theme configuration without passing the theme through props.

Theme Overrides

The theme prop accepts a theme created using createTheme. Theme overrides must follow the structure expected by the theme system.

ThemeProvider throws an error when a theme override does not match the expected pattern. This helps identify invalid theme configuration early.

See the Theme Tokens documentation for more information about the available tokens and the expected theme structure.

TypeScript

If you add custom theme tokens, you can extend the library’s TypeScript interfaces to make those values available to TypeScript throughout your application.

See the Extending Theme Types documentation for information about extending the theme types.

API

ThemeProvider

The ThemeProvider accepts a theme and renders its children within the provided theme context.

Related

• createTheme — Create a theme configuration.
• Theme Tokens — Learn about available theme tokens and their structure.