Component configuration

General guidelines#

In most cases, component configuration will be done using HTML attributes but colors and dimensions can also be configured with CSS variables.

Here's an example of a component configured with some HTML attributes:

Check the documentation of each component for a complete list of settings:

• <wavekit-audio>
• <wavekit-overlay>
• <wavekit-playlist>
• <wavekit-play-button>
• <wavekit-ribbon>

HTML attributes vs CSS vars#

Some settings can be configured both with HTML attributes and CSS vars. In case of conflict the HTML attribute will have priority over the CSS variables defined in your stylesheets.

Dimensions#

Dimensions of our components are configured using the width and/or height attributes with any CSS length value:

You can also use CSS variables:

Themes#

Our components have a dark and light themes. The light theme will be used by default:

Auto theme#

If your website is adapting to user preferences using CSS media queries, you can use auto theme. This will make our components switch themes automatically depending on the browser and OS settings.

Colors#

Every component has a number of colors that can be configured using CSS color values. For example accent-color:

Colors can also be set using CSS variables:

Colors will be applied to a component regardless of the active theme. For example, if you define an accent color as shown above, this will apply to both light and dark themes.

See the documentation of each component to see the full list of colors that can be applied.

Dark mode#

If you'd like to have different colors applied specifically to the dark theme, simply add -dark to either HTML attributes or the CSS variable names. So accent-color will become accent-color-dark and the CSS variable will be --wk-accent-color-dark.