Styling

Convert object to CSS

Spark provides a function that will turn an object of CSS rules, where the key is the selector and the value is an object containing properties with values, into a CSS string.

obj2CSS({"input":{"color":"green"}}); // Result: input{color:green;}

Apply multiple styles to an element

This function allows for the application of multiple CSS properties to an HTMLElement reference.

applyStyle(element, {
    paddingTop: '5px',
    color: 'white'
});

Media Store

Spark provides a Store called MediaStore that models its value based on if the provided CSS media query matches.

const darkMode = new MediaStore('(prefers-color-scheme: dark)');

let icon = (darkMode.value) ? 'moon' : 'sun';

darkMode.model((newValue) => icon = (newValue ? 'moon' : 'sun'));