Changing the Value of a Custom Property Using JavaScript I’ve been mentioning throughout this whole article that variables can be updated using JavaScript, so let’s get into that. Say you have a light theme and want to switch it to a dark theme, assuming you have some CSS like the following: ```css :root { --text-color: black; --background-color: white; } body { color: var(--text-color); background: var(--background-color); } ``` You can update the `--text-color` and `--background-color` custom properties by doing the following: ```js var bodyStyles = document.body.style; bodyStyles.setProperty('--text-color', 'white'); bodyStyles.setProperty('--background-color', 'black'); ```
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter