HTML attributes#
Main settings#
HTML attribute |
Default |
Value |
audio-id Required |
-- |
A valid audio id |
theme |
light |
light dark auto |
type |
wave
|
wave
compact
compact_wave
micro
micro_wave
|
Colors#
All colors have a -dark
variant. More information on customizing colors.
HTML attribute |
Type |
Default |
accent-color |
CSS color |
Defined by the theme |
background-color |
CSS color |
Defined by the theme |
border-color |
CSS color |
Defined by the theme |
play-arrow-color |
CSS color |
Calculated automatically |
text-color |
CSS color |
Defined by the theme |
wave-color |
CSS color |
Same color as the accent color |
wave-opacity |
CSS opacity |
Calculated automatically |
Other settings#
HTML attribute |
Default |
Value |
always-show-volume |
false |
true or false |
border |
true |
true or false |
hide-cover |
false |
true or false |
ignore-metrics |
false |
true or false |
referer |
-- |
A valid URL that will appear in your metrics. |
rounded |
false |
true or false |
transparent |
false |
true or false |
CSS variables#
All colors have a -dark
variant. More information on customizing colors and dimensions using CSS variables.
CSS variable |
Type |
Default |
--wk-accent-color |
CSS color |
Defined by the theme |
--wk-background-color |
CSS color |
Defined by the theme |
--wk-border-color |
CSS color |
Defined by the theme |
--wk-height |
CSS length |
Depends on the player type |
--wk-play-arrow-color |
CSS color |
Calculated automatically |
--wk-text-color |
CSS color |
Defined by the theme |
--wk-wave-color |
CSS color |
Same color as the accent color |
--wk-wave-opacity |
CSS opacity |
Calculated automatically |
--wk-width |
CSS length |
100% |