32:[] 30:{"title":"How to Change the Value of CSS Variables with JavaScript","cells":[{"id":0,"value":"# How to Change the Value of CSS Variables with JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"An Observable notebook implementing the tips from https://stackdiary.com/snippet/change-css-variable-value-javascript/","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":18,"value":"

This is the header for our demo.

This is some text.

And some more text.

Click me to change text color!

\n","pinned":false,"hidden":false,"mode":"html"},{"id":20,"value":"{\n html_main; // make sure HTML is defined for Observable foo.\n // selecting the :root theme\nconst root_theme = document.querySelector(':root');\n// seleting the button which will trigger the event\nconst root_btn = document.querySelector('.btn-css-v');\n// the event listener to change the text color upon 'click'\nroot_btn.addEventListener('click', () => {\n // changing the color from #0b32e7 to #f44336\n root_theme.style.setProperty('--demo-color-change', '#f44336'); \n});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"Let's add to this tutorial:\n","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"viewof color = Inputs.color({label: \"Favorite color\", value: \"#4682b4\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"html_color = html` to change the text color.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"changeColor = ()=>{\n console.log('changeColor called')\n document.querySelector(':root').style.setProperty('--demo-color-change', color)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"{\n html_color.querySelector('button').addEventListener('click', changeColor)\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}