CSS variables

Access theme tokens outside of Hope UI's components.

Usage

All Hope UI theme tokens are available as CSS custom properties (aka CSS variables) with the hope prefix.

Let's say you want to change your application's #root background using a color from the Hope UI theme. In a plain CSS file, you can do it like this:

css
/* index.css */
#root {
  background-color: var(--hope-colors-neutral-100);
}

css
/* index.css */
#root {
  background-color: var(--hope-colors-neutral-100);
}

Customizing the prefix

If you want to use a custom CSS variable prefix, you can do it by extending the default theme.

tsx
import { extendTheme, HopeProvider } from "@hope-ui/core";
const theme = extendTheme({
  cssVarPrefix: "custom",
});
function Demo() {
  return (
    <HopeProvider theme={theme}>
      <App />
    </HopeProvider>
  );
}

tsx
import { extendTheme, HopeProvider } from "@hope-ui/core";
const theme = extendTheme({
  cssVarPrefix: "custom",
});
function Demo() {
  return (
    <HopeProvider theme={theme}>
      <App />
    </HopeProvider>
  );
}

And use it like this:

css
/* index.css */
#root {
  background-color: var(--custom-colors-neutral-100);
}

css
/* index.css */
#root {
  background-color: var(--custom-colors-neutral-100);
}