Website Dark Mode Features With Multiple Colour Using HTML, CSS & JavaScript

.light-mode {
    background-color: var(--light-bg);
    color: var(--light-text);
}
.dark-mode {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}
.sepia-mode {
    background-color: var(--sepia-bg);
    color: var(--sepia-text);
}
.high-contrast-mode {
    background-color: var(--high-contrast-bg);
    color: var(--high-contrast-text);
}
.blue-light-mode {
    background-color: var(--blue-light-bg);
    color: var(--blue-light-text);
}
.green-mode {
    background-color: var(--green-bg);
    color: var(--green-text);
}
.pastel-mode {
    background-color: var(--pastel-bg);
    color: var(--pastel-text);
}
.gray-scale-mode {
    background-color: var(--gray-scale-bg);
    color: var(--gray-scale-text);
}
.vintage-mode {
    background-color: var(--vintage-bg);
    color: var(--vintage-text);
}
.neutral-mode {
    background-color: var(--neutral-bg);
    color: var(--neutral-text);
}

.color-circle {
    width: 25px; height: 25px; border-radius: 50%; cursor: pointer; border: 2px solid #ccc;
}
.selected { border: 2px solid red; }
#theme-selector { display: flex; gap:5px; }
</style>

document.querySelectorAll('.color-circle').forEach(circle => {
    circle.addEventListener('click', () => {
        const theme = circle.dataset.theme;
        setTheme(theme);
    });
});

window.addEventListener('load', () => {
    const savedTheme = localStorage.getItem('theme') || 'light-mode';
    setTheme(savedTheme);
});
</script>

Website Dark Mode Features With Multiple Colour Using HTML, CSS & JavaScript

You may like these posts :

Write Your Comment