Customizing Your Theme with @blockle/blocks

@blockle/blocks comes equipped with a versatile theming system, empowering you to tailor the look of its components to align seamlessly with your brand.

The theme object acts as a repository for tokens and component themes. Tokens set the groundwork for base styles, while component themes specify variations and styling rules for individual components.

Creating a Theme

Crafting a theme is a breeze with makeTheme. This function yields a theme object that seamlessly integrates with the ThemeProvider.

import { makeTheme } from '@blockle/blocks';

// Local imports to your theme files
import { components } from './components';
import { tokens } from './tokens.css';

export const myTheme = makeTheme({
  name: 'MyTheme',
  tokens,
  components,
});