可以通过使用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，我们可以监听主题切换的事件，并根据需要更新这个颜色变量。最后，我们添加了一个过渡效果，使之平滑地过渡到新的主题模式。