ThemeProvider

ThemeProvider allows you to theme your app. You can even nest ThemeProviders to apply a theme on just a section of your app as well.

⚠️ ThemeProvider only works in secure contexts

Usage

import { ThemeProvider } from "@asphalt-react/theme-provider"
import { Button } from "@asphalt-react/button"

const customTheme = {
  // your theme tokens
}

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Button>Click me</Button>
    </ThemeProvider>
  )
} 

Available themes

Asphalt web support these themes:

1. Lyra - Default theme
2. Aloha
3. Carina
4. Draco
5. Lynx
6. Vela

And here is how to use Asphalt web themes with Theme Provider

import ThemeProvider from "@asphalt-react/theme-provider";
import { lynx } from "@gojek/theme-asphalt-web-lynx"; // import the theme here
import { Button } from "@asphalt-react/button";

export const App = () => {
  return (
    // add imported theme in the ThemeProvider theme prop
    <ThemeProvider theme={lynx}>
      <h2>Themed App</h2>
      <Button>Hello</Button>
    </ThemeProvider>
  );
};

Props

children

React node or node tree to apply theme to.

| type | required | default | | ---- | -------- | ------- | | node | true | N/A |

theme

Asphalt Theme object.

| type | required | default | | ------ | -------- | --------------- | | object | false | legacyVariables |

as

Html element/React component to render as container.

| type | required | default | | ----------- | -------- | ------- | | elementType | false | "div" |