查看“︁Template:SwitchImage/style.css”︁的源代码

/* 容器样式 */
.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;
    }
}

/* 嵌入文本模式的样式 */
.themed-image-inline {
    display: inline-flex;
    align-self: center;
    vertical-align: middle; /* 关键：使图片与文字对齐 */
}

.themed-image-inline img {
    height: 1em; /* 关键：高度与当前行文字高度一致 */
    width: auto; /* 宽度根据比例自适应 */
    display: inline-block;
    margin: 0 2px; /* 给图标左右留一点点空隙 */
}