Customization

The Swing widget is built using Tailwind CSS scoped by the ID #swing and CSS variables. You can override the default styles by overriding these CSS variables and/or by targeting the #swing class names.

Primary color

First get your primary color in the HSL color space. Then set the --color-primary CSS variable to your primary color

:root {
  /* hue saturation lightness */
  --color-primary: 88 181 126;
}

#swing .dark {
  /* hue saturation lightness */
  --color-primary: 88 181 126;
}

Additional theming

Need to change any additonal colors? Please reach out to us on Discord and we'll help you out.