createGlobalTheme

Creates a theme attached to a global selector, but with locally scoped variable names.

🎨 New to theming in Navita? Make sure you've read the theming overview first.

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

All theme values must be provided, or it is a type error.

Import this stylesheet as a side effect to include the styles in your CSS bundle.

// app.ts
import './theme.ts';

Implementing a Theme Contract

An existing theme contract can be implemented by passing it as the second argument.

// theme.ts
import { createThemeContract, createGlobalTheme } from '@navita/css';
 
export const vars = createThemeContract({
  color: {
    brand: null
  },
  font: {
    body: null
  }
});
 
createGlobalTheme(':root', vars, {
  color: {
    brand: 'blue'
  },
  font: {
    body: 'arial'
  }
});