Input
Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Update CSS Variables</title> <style> :root { --bg-color: #f0f0f0; --text-color: #333; } body { background-color: var(--bg-color); color: var(--text-color); } button { padding: 10px 20px; background-color: #3498db; color: white; border: none; cursor: pointer; } </style> </head> <body> <button onclick="changeTheme()">Change Theme</button> <script> function changeTheme() { document.documentElement.style.setProperty('--bg-color', '#2ecc71'); document.documentElement.style.setProperty('--text-color', '#fff'); } </script> </body> </html>