我将从markdown生成一个具有内联样式和内联脚本的单个脱机HTML页面。它有三个主题的选择列表，使用:root和切换暗或亮模式，类.vscode-dark和.vscode-light，基于VSCode的markdown预览。
<p> Choose one theme</p>
<select name="theme-select" id="theme-select">
<option value="voxel-theme-empresas">empresas</option>
<option value="voxel-theme-ion">ion</option>
<option value="voxel-theme-iti">iti</option>
</select>
<button onclick="switchMode()">Toggle dark or light mode</button>
<script>
function switchMode() {
var element = document.body;
element.classList.toggle("vscode-dark");
}
</script>
应该是这样的:
<body class="voxel-theme-empresas vscode-light">
# Teste 2
Nostrud nostrud excepteur mollit anim. Sint proident officia anim eu pariatur laboris excepteur amet Lorem Lorem commodo consequat ullamco. Pariatur aute ut aliqua aliquip consectetur ea.
</body>
<body class="voxel-theme-empresas vscode-dark">
# Teste 2
Nostrud nostrud excepteur mollit anim. Sint proident officia anim eu pariatur laboris excepteur amet Lorem Lorem commodo consequat ullamco. Pariatur aute ut aliqua aliquip consectetur ea.
</body>
<body class="voxel-theme-iti vscode-light">
# Teste 2
Nostrud nostrud excepteur mollit anim. Sint proident officia anim eu pariatur laboris excepteur amet Lorem Lorem commodo consequat ullamco. Pariatur aute ut aliqua aliquip consectetur ea.
</body>
<body class="voxel-theme-iti vscode-dark">
# Teste 2
Nostrud nostrud excepteur mollit anim. Sint proident officia anim eu pariatur laboris excepteur amet Lorem Lorem commodo consequat ullamco. Pariatur aute ut aliqua aliquip consectetur ea.
</body>
CSS:和
:root[class*=voxel-theme-empresas], :root:not([class^=voxel-theme-])
{
--ids_color_action_primary_base: #ec7000;
--ids_color_darktBg_base: #001e4f;
--ids_color_lightBg_base: #fde9d7;
}
:root[class*=voxel-theme-ion], :root:not([class^=voxel-theme-])
{
--ids_color_action_primary_base: #a7ce2e;
--ids_color_darktBg_base: #133134;
--ids_color_lightBg_base: #efface;
}
:root[class*=voxel-theme-iti], :root:not([class^=voxel-theme-])
{
--ids_color_action_primary_base: #fe3386;
--ids_color_darktBg_base: #2b374a;
--ids_color_lightBg_base: #fcefef;
}
body
{
font-size: large;
}
h1
{
color: var(--ids_color_action_primary_base);
}
.vscode-light
{
background-color: var(--ids_color_lightBg_base);
color: var(--ids_color_darktBg_base);
}
.vscode-dark
{
background-color: var(--ids_color_darktBg_base);
color: var(--ids_color_lightBg_base);
}
重要必须保留root元素类。我知道它不会工作，如果你试图添加类voxel-theme-empresasbody或div，因为它会触发voxel-theme-iti的颜色，而不是。
试试这个简单的方法来切换主题。
// Initial elements
const select = document.getElementById('theme-select');
const button = document.getElementById('dark-mode');
const body = document.body;
const h1 = document.querySelector('h1');
const LIGHT = 'vscode-light';
const DARK = 'vscode-dark';
// Selection handler
select.addEventListener('change', event => {
// We take a second class to use it later
const classVScode = body.className.split(' ')[1];
h1.textContent = event.target.value;
// If the body has no current value (class)
if (!body.classList.contains(event.target.value)) {
// Making new styles
body.className = `${event.target.value} ${classVScode}`;
}
});
// Switch handler
button.addEventListener('click', () => {
// We take a first class to use it later
const classVoxel = body.className.split(' ')[0];
// If body has a 'vscode-dark' class
if (body.classList.contains(DARK)) {
// Making new styles
body.className = `${classVoxel} ${LIGHT}`;
// Set attribute 'data' with theme
body.setAttribute('data-vscode-theme-kind', `${LIGHT}`);
} else {
body.className = `${classVoxel} ${DARK}`;
body.setAttribute('data-vscode-theme-kind', `${DARK}`);
}
});.voxel-theme-empresas,
:root:not([class^='voxel-theme-']) {
--ids_color_action_primary_base: #ec7000;
--ids_color_darktBg_base: #001e4f;
--ids_color_lightBg_base: #fde9d7;
}
.voxel-theme-ion,
:root:not([class^='voxel-theme-']) {
--ids_color_action_primary_base: #a7ce2e;
--ids_color_darktBg_base: #133134;
--ids_color_lightBg_base: #efface;
}
.voxel-theme-iti,
:root:not([class^='voxel-theme-']) {
--ids_color_action_primary_base: #fe3386;
--ids_color_darktBg_base: #2b374a;
--ids_color_lightBg_base: #fcefef;
}
body {
font-size: large;
}
h1 {
color: var(--ids_color_action_primary_base);
}
.vscode-light {
background-color: var(--ids_color_lightBg_base);
color: var(--ids_color_darktBg_base);
}
.vscode-dark {
background-color: var(--ids_color_darktBg_base);
color: var(--ids_color_lightBg_base);
}<body class="voxel-theme-empresas vscode-dark" data-vscode-theme-kind="vscode-dark">
<p>Choose one theme</p>
<h1>voxel-theme-empresas</h1>
<select name="theme-select" id="theme-select">
<option value="voxel-theme-empresas">empresas</option>
<option value="voxel-theme-ion">ion</option>
<option value="voxel-theme-iti">iti</option>
</select>
<button id="dark-mode">Toggle dark or light mode</button>
</body>