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.

CSS Variables

Available starting in v0.25.0

Our CSS variables are configured in the HSL color space. You can override their default values using the CSS below:

#swing {
  /* Primary color available in all versions */
  --color-primary: 88 181 126;
 
  /* Base background color */
  --background: 0 0% 100%;
 
  /* Base text color */
  --foreground: 222.2 47.4% 11.2%;
 
  /* Border color */
  --border: 214.3 31.8% 91.4%;
 
  /* Subtext color */
  --muted: 215.4 16.3% 46.9%;
 
  /* Popover background color */
  --popover: 0 0% 100%;
  /* Popover text color */
  --popover-foreground: 222.2 47.4% 11.2%;
 
  /* Secondary background color */
  --secondary: 210 40% 96.1%;
  /* Secondary text color */
  --secondary-foreground: 222.2 47.4% 11.2%;
 
  /* Hover/focus background color */
  --accent: 210 40% 96.1%;
  /* Hover/focus text color */
  --accent-foreground: 222.2 47.4% 11.2%;
}
 
/* Override colors for dark mode */
@media (prefers-color-scheme: dark) {
  #swing {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
 
    --border: 216 34% 17%;
 
    --muted: 215.4 16.3% 56.9%;
 
    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;
 
    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;
 
    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;
  }
}

Additional theming

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