/* Default */
.vp-darkmode {
border: 1px solid #a2a9b1;
background-color: var(--background-color-neutral-subtle, #f8f9fa);
color: var(--color-base, #202122);
}
/* Lime */
.vp-darkmode-lime {
background-color: #edffed;
}
.vp-darkmode-lime:not(.vp-darkmode-defaultborder) {
border-color: #00af89;
}
/* Green */
.vp-darkmode-green {
background-color: #C7F2C7;
}
.vp-darkmode-green:not(.vp-darkmode-defaultborder) {
border-color: #008000;
}
/* Yellow */
.vp-darkmode-yellow {
background-color: #FFFFD9;
}
.vp-darkmode-yellow:not(.vp-darkmode-defaultborder) {
border-color: gold;
}
/* Orange */
.vp-darkmode-orange {
background-color: #ffe7ce;
}
.vp-darkmode-orange:not(.vp-darkmode-defaultborder) {
border-color: #f28500;
}
/* Red */
.vp-darkmode-red {
background-color: #ffdbdb;
}
.vp-darkmode-red:not(.vp-darkmode-defaultborder) {
border-color: #b32424;
}
/* Skyblue */
.vp-darkmode-skyblue {
background-color: #F3F9FF;
}
.vp-darkmode-skyblue:not(.vp-darkmode-defaultborder) {
border-color: #88C3FE;
}
/* Blue */
.vp-darkmode-blue {
background-color: #dfe8ff;
}
.vp-darkmode-blue:not(.vp-darkmode-defaultborder) {
border-color: #36c;
}
/* Purple */
.vp-darkmode-purple {
background-color: #e4d8ff;
}
.vp-darkmode-purple:not(.vp-darkmode-defaultborder) {
border-color: #9932cc;
}
/* For preference-originating dark mode */
@media screen {
html.skin-theme-clientpref-night .vp-darkmode-skyblue {
background-color: #0d243c;
}
html.skin-theme-clientpref-night .vp-darkmode-red {
background-color: #390000;
}
html.skin-theme-clientpref-night .vp-darkmode-orange {
background-color: #412100;
}
html.skin-theme-clientpref-night .vp-darkmode-lime {
background-color: #204220;
}
html.skin-theme-clientpref-night .vp-darkmode-green {
background-color: #002400;
}
html.skin-theme-clientpref-night .vp-darkmode-yellow {
background-color: #452d00;
}
html.skin-theme-clientpref-night .vp-darkmode-purple {
background-color: #13003d;
}
html.skin-theme-clientpref-night .vp-darkmode-blue {
background-color: #001830;
}
}
/* For OS-originating dark mode */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .vp-darkmode-blue {
background-color: #001830;
}
html.skin-theme-clientpref-os .vp-darkmode-purple {
background-color: #13003d;
}
html.skin-theme-clientpref-os .vp-darkmode-lime {
background-color: #204220;
}
html.skin-theme-clientpref-os .vp-darkmode-green {
background-color: #002400;
}
html.skin-theme-clientpref-os .vp-darkmode-yellow {
background-color: #452d00;
}
html.skin-theme-clientpref-os .vp-darkmode-orange {
background-color: #412100;
}
html.skin-theme-clientpref-os .vp-darkmode-red {
background-color: #390000;
}
html.skin-theme-clientpref-os .vp-darkmode-skyblue {
background-color: #0d243c;
}
}
/* [[Category:テンプレートスタイル|ダークモード互換]] */