根据浏览器与系统设置自动切换明暗主题，也可手动切换。
Default
Slate
<script>
var buttons = document.querySelectorAll("button[data-md-color-scheme]")
Array.prototype.forEach.call(buttons, function(button) {
button.addEventListener("click", function() {
document.body.dataset.mdColorScheme = this.dataset.mdColorScheme;
localStorage.setItem("data-md-color-scheme",this.dataset.mdColorScheme);
})
})
</script>
点击色块可更换主题的主色。
Red
Pink
Purple
Deep Purple
Indigo
Blue
Light Blue
Cyan
Teal
Green
Light Green
Lime
Yellow
Amber
Orange
Deep Orange
Brown
Grey
Blue Grey
White
<script>
var buttons = document.querySelectorAll("button[data-md-color-primary]");
Array.prototype.forEach.call(buttons, function(button) {
button.addEventListener("click", function() {
document.body.dataset.mdColorPrimary = this.dataset.mdColorPrimary;
localStorage.setItem("data-md-color-primary",this.dataset.mdColorPrimary);
})
})
</script>
点击色块更换主题的辅助色。
Red
Pink
Purple
Deep Purple
Indigo
Blue
Light Blue
Cyan
Teal
Green
Light Green
Lime
Yellow
Amber
Orange
Deep Orange
<script>
var buttons = document.querySelectorAll("button[data-md-color-accent]");
Array.prototype.forEach.call(buttons, function(button) {
button.addEventListener("click", function() {
document.body.dataset.mdColorAccent = this.dataset.mdColorAccent;
localStorage.setItem("data-md-color-accent",this.dataset.mdColorAccent);
})
})
</script>
<style>
button[data-md-color-accent]> code {
background-color: var(--md-code-bg-color);
color: var(--md-accent-fg-color);
}
button[data-md-color-primary] > code {
background-color: var(--md-code-bg-color);
color: var(--md-primary-fg-color);
}
button[data-md-color-primary='white'] > code {
background-color: var(--md-primary-bg-color);
color: var(--md-primary-fg-color);
}
button[data-md-color-accent],button[data-md-color-primary],button[data-md-color-scheme]{
width: 8.4rem;
margin-bottom: .4rem;
padding: 2.4rem .4rem .4rem;
transition: background-color .25s,opacity .25s;
border-radius: .2rem;
color: #fff;
font-size: .8rem;
text-align: left;
cursor: pointer;
}
button[data-md-color-accent]{
background-color: var(--md-accent-fg-color);
}
button[data-md-color-primary]{
background-color: var(--md-primary-fg-color);
}
button[data-md-color-scheme='default']{
background-color: hsla(0, 0%, 100%, 1);
}
button[data-md-color-scheme='slate']{
background-color: var(--md-default-bg-color);
}
button[data-md-color-accent]:hover, button[data-md-color-primary]:hover {
opacity: .75;
}
</style>