打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

Template:SwitchImage/style.css:修订间差异

模板页面
弃权者留言 | 贡献
创建页面,内容为“.themed-image-container { display: inline-block; line-height: 0; } .themed-image-dark { display: none; } html.client-dark-mode .themed-image-light { display: none; } html.client-dark-mode .themed-image-dark { display: block; } @media (prefers-color-scheme: dark) { html.client-js:not(.client-light-mode) .themed-image-light { display: none; } html.client-js:not(.client-light-mode) .themed-image-dark { display: b…”
 
弃权者留言 | 贡献
无编辑摘要
 
(未显示同一用户的2个中间版本)
第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.client-dark-mode .themed-image-light {
/* 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.client-dark-mode .themed-image-dark {
/* 2. 强制浅色模式 (Day) - 确保在 OS 模式切换后能正确切回 */
     display: block;
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.client-js:not(.client-light-mode) .themed-image-light {
    /* 当用户选择“跟随系统”且系统当前为深色时 */
         display: none;
     html.skin-theme-clientpref-os .themed-image-light {
         display: none !important;
     }
     }
     html.client-js:not(.client-light-mode) .themed-image-dark {
     html.skin-theme-clientpref-os .themed-image-dark {
         display: block;
         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; /* 给图标左右留一点点空隙 */
}
}

2026年5月3日 (日) 22:31的最新版本

/* 容器样式 */
.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; /* 给图标左右留一点点空隙 */
}