可以通过使用CSS变量和JavaScript来解决这个问题。首先,在CSS中设置一个默认的颜色变量,然后使用JavaScript检测当前的主题模式并根据需要更新这个变量。最后,在页面上添加一个过渡效果,以平滑地过渡到新的主题模式。下面是具体的代码示例:
CSS:
:root { --background-color: #fff; /* 默认颜色变量 */ }
body { background-color: var(--background-color); /* 应用颜色变量 / transition: background-color 0.3s ease; / 添加过渡效果 */ }
JavaScript:
const toggleSwitch = document.querySelector('.toggle-switch');
toggleSwitch.addEventListener('change', function() { if (this.checked) { document.documentElement.setAttribute('data-theme', 'dark'); // 设置主题模式 document.documentElement.style.setProperty('--background-color', '#0d1117'); // 更新颜色变量 } else { document.documentElement.setAttribute('data-theme', 'light'); // 设置主题模式 document.documentElement.style.setProperty('--background-color', '#fff'); // 更新颜色变量 } });
在上面的代码中,我们首先为根元素设置了一个默认的颜色变量,并在页面背景中使用了它。通过JavaScript,我们可以监听主题切换的事件,并根据需要更新这个颜色变量。最后,我们添加了一个过渡效果,使之平滑地过渡到新的主题模式。