<div id="theme-selector">
<div class="color-circle light-mode" data-theme="light-mode"></div>
<div class="color-circle dark-mode" data-theme="dark-mode"></div>
<div class="color-circle sepia-mode" data-theme="sepia-mode"></div>
<div class="color-circle high-contrast-mode" data-theme="high-contrast-mode"></div>
<div class="color-circle blue-light-mode" data-theme="blue-light-mode"></div>
<div class="color-circle green-mode" data-theme="green-mode"></div>
<div class="color-circle pastel-mode" data-theme="pastel-mode"></div>
<div class="color-circle gray-scale-mode" data-theme="gray-scale-mode"></div>
<div class="color-circle vintage-mode" data-theme="vintage-mode"></div>
<div class="color-circle neutral-mode" data-theme="neutral-mode"></div>
</div>
<style>
:root {
--light-bg: #fff; --light-text: #000;
--dark-bg: #121; --dark-text: #e0e;
--sepia-bg: #f4ecd8; --sepia-text: #5b3a29;
--high-contrast-bg: #000; --high-contrast-text: #fff;
--blue-light-bg: #e1e8f0; --blue-light-text: #2d3748;
--green-bg: #e8f5e9; --green-text: #1b5e20;
--pastel-bg: #fdebd0; --pastel-text: #6d4c41;
--gray-scale-bg: #f5f5f5; --gray-scale-text: #7d7d7d;
--vintage-bg: #e0cdaa; --vintage-text: #5d3a29;
--neutral-bg: #f3f4f6; --neutral-text: #333;
}
.light-mode {
background-color: var(--light-bg);
color: var(--light-text);
}
.dark-mode {
background-color: var(--dark-bg);
You may like these posts :