variable-theming
CSS theming based on custom properties.
Install
Usage
Theming
theming
takes a non opinionated approach regarding the contents of your theme.
;; const mainTheme = custom: primaryPalette: main: 'red' contrast: 'blue' tint: 'white' shade: 'black' elements: h1: fontSize: '2em' color: 'var(--primary-palette-main)' background: 'green' const secondaryTheme = custom: primaryPalette: main: 'green' contrast: 'red' tint: 'white' shade: 'black' elements: h1: fontSize: '1em' color: 'var(--primary-palette-main)' background: 'yellow' /* `elements` properties will be assigned to variables on `setup` styles*/const setup ...main = ; /* Add setup styles as globals: - use setup.css string to create a global <style> tag, - or the setup.styles if you're using css-in-js. Then, add variable assignments on the :root scope.*/;; /* We don't need to assign element properties to variables anymore as they are already globally set, so we don't need to separate element styles and custom properties for setup.*/const secondary = ;;
Palettes
palettes(options?: PaletteOptions): Function
Returns a function that, taking a record of PaletteInput
s, returns a record of complete Palettes
.
; const theme = ;
palettes.mui(palettes: Record<string, Palette>): Record<string, MuiPalette>
Creates a Material UI
compatible palette from a Palette
.
;; const mui = ;