Theming

Themes in macaron are fully type safe css-variables that are hashed and scoped to your app. These themes can either be set on a global element like :root or be scoped to a class.

Creating scoped themes

import { createTheme } from '@macaron-css/core';
export const [themeClass, vars] = createTheme({
  color: {
    brand: 'blue',
  },
  font: {
    body: 'arial',
  },
});

This theme can then be used like

const Button = styled('button', {
  base: {
    color: vars.color.brand,
    fontFamily: vars.font.body,
  },
});

Creating global theme

import { createGlobalTheme } from '@macaron-css/core';
export const vars = createGlobalTheme(':root', {
  color: {
    brand: 'blue',
  },
  font: {
    body: 'arial',
  },
});

Creating scoped css variables

You can also create individual scoped css variables that can be used for changing value of styles at runtime, without conflicting with other css variables of same name

import { createVar } from '@macaron-css/core';
const colorVar = createVar();

For more information view https://vanilla-extract.style/documentation/theming