HTML Editor - Edit Your Source Code Online | W3docs

Source Code: (back to article)

Result: Report an issue

<style>
    :root {
        --bg-color: #ffffff;
        --text-color: #000000;
    }
    .dark {
        --bg-color: #333333;
        --text-color: #ffffff;
    }
    body {
        background-color: var(--bg-color);
        color: var(--text-color);
        transition: background-color 0.5s, color 0.5s;
    }
    button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }
</style>
</head>
<body>
<button onclick="toggleTheme()">Toggle Theme</button>
<script>
    function setTheme(themeName) {
        localStorage.setItem('theme', themeName);
        document.documentElement.className = themeName;
    }

function toggleTheme() {
        var currentTheme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
        if (currentTheme === 'light') {
            setTheme('dark');
        } else {
            setTheme('light');
        }
    }

function loadTheme() {
        var theme = localStorage.getItem('theme') || 'light';
        setTheme(theme);
    }

// Initial theme load
    loadTheme();
</script>
</body>