Template:SwitchImage/style.css:修订间差异
模板页面
更多操作
小 弃权者移动页面Template:SwichImage/style.css至Template:SwitchImage/style.css,不留重定向 |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
/* 容器样式 */ | |||
.themed-image-container { | .themed-image-container { | ||
display: inline-block; | display: inline-block; | ||
| 第4行: | 第5行: | ||
} | } | ||
/* 默认逻辑:显示浅色图,隐藏深色图 */ | |||
.themed-image-dark { | .themed-image-dark { | ||
display: none; | display: none; | ||
} | } | ||
.themed-image-light { | |||
display: block; | |||
} | |||
/* --- 情况 A:手动切换模式 --- */ | |||
html. | /* 1. 强制深色模式 (Night) */ | ||
display: none; | html.skin-theme-clientpref-night .themed-image-light { | ||
display: none !important; | |||
} | |||
html.skin-theme-clientpref-night .themed-image-dark { | |||
display: block !important; | |||
} | } | ||
html. | /* 2. 强制浅色模式 (Day) - 确保在 OS 模式切换后能正确切回 */ | ||
display: | html.skin-theme-clientpref-day .themed-image-light { | ||
display: block !important; | |||
} | |||
html.skin-theme-clientpref-day .themed-image-dark { | |||
display: none !important; | |||
} | } | ||
/* --- 情况 B:跟随系统模式 (OS) --- */ | |||
@media (prefers-color-scheme: dark) { | @media (prefers-color-scheme: dark) { | ||
html. | /* 当用户选择“跟随系统”且系统当前为深色时 */ | ||
display: none; | html.skin-theme-clientpref-os .themed-image-light { | ||
display: none !important; | |||
} | } | ||
html. | html.skin-theme-clientpref-os .themed-image-dark { | ||
display: block; | display: block !important; | ||
} | } | ||
} | } | ||
2026年5月3日 (日) 22:27的版本
/* 容器样式 */
.themed-image-container {
display: inline-block;
line-height: 0;
}
/* 默认逻辑:显示浅色图,隐藏深色图 */
.themed-image-dark {
display: none;
}
.themed-image-light {
display: block;
}
/* --- 情况 A:手动切换模式 --- */
/* 1. 强制深色模式 (Night) */
html.skin-theme-clientpref-night .themed-image-light {
display: none !important;
}
html.skin-theme-clientpref-night .themed-image-dark {
display: block !important;
}
/* 2. 强制浅色模式 (Day) - 确保在 OS 模式切换后能正确切回 */
html.skin-theme-clientpref-day .themed-image-light {
display: block !important;
}
html.skin-theme-clientpref-day .themed-image-dark {
display: none !important;
}
/* --- 情况 B:跟随系统模式 (OS) --- */
@media (prefers-color-scheme: dark) {
/* 当用户选择“跟随系统”且系统当前为深色时 */
html.skin-theme-clientpref-os .themed-image-light {
display: none !important;
}
html.skin-theme-clientpref-os .themed-image-dark {
display: block !important;
}
}