<script>
let styles = {
'note-bg-color': '#f4ed2a',
'note-color': '#FF5555',
'bg': '#AAAAAA',
};
$: cssVarStyles = Object.entries(styles)
.map(([key, value]) => `--${key}:${value}`)
.join(';');
// Or just this is fine too.
// let noteBgColor = '#f4ed2a';
// let noteColor = '#FF5555';
// $: cssVarStyles = `--note-color:${noteColor};--note-bg-color:${noteBgColor}`;
</script>
<style>
#top {
background-color: var(--bg, lightgray);
height: 100%;
}
.note {
color: var(--note-color, tomato);
background-color: var(--note-bg-color, lightgray);
}
.yellow-theme {
--note-color: black;
--note-bg-color: khaki;
}
.purple-note-text {
--note-color: rebeccapurple;
}