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.
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 % ;
}
}
CopyCopied!
Need to change any additonal colors? Please reach out to us on Discord and we'll help you out.