如何为网站Logo矩形框适配暗黑模式？HTML CSS求助

方法1：利用currentColor继承文本颜色 #

将.sonOne的边框颜色改为currentColor，边框会自动继承文本颜色，当暗黑模式下文本变为白色时，边框也会同步变白，无需额外判断模式：

.sonOne {
    border: 2px solid currentColor; /* 替换原有的black */
    border-radius: 5px;
    padding: 6px;
    height: 34px;
}

方法2：针对暗黑模式类单独设置边框颜色 #

如果你的主题通过给body添加特定类（比如dark-mode）切换暗黑模式，可直接给该类下的.sonOne设置白色边框：

.sonOne {
    border: 2px solid black;
    border-radius: 5px;
    padding: 6px;
    height: 34px;
}

/* 暗黑模式下覆盖边框颜色 */
body.dark-mode .sonOne {
    border-color: white;
}

完整修改后的代码 #

<style>
.sonTwo,.sonOne {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sonTwo,.sonOne span {
    font-size: 30px;
}

.father {
    display: flex;
    flex-direction: row;
}

.sonOne {
    border: 2px solid currentColor;
    border-radius: 5px;
    padding: 6px;
    height: 34px;
}

.sonTwo {
    padding: 5px;
    height: 30px;
}

.fox {
    font-weight: bold;
}

/* 可选：若currentColor不生效，启用以下代码 */
/* body.dark-mode .sonOne {
    border-color: white;
} */
</style>

<div class="father">
    <div class="sonOne"><span>S</span></div>
    <div class="sonTwo"><span class="fox">Fox.</span></div>
</div>

说明 #

• 方法1更简洁，借助CSS的currentColor关键字自动适配文本颜色变化，无需关心主题的模式切换逻辑。
• 方法2适用于主题通过类名控制明暗模式的场景，精准覆盖暗黑模式下的边框样式。

内容的提问来源于stack exchange，提问作者Shinesfox