如何在形状中启用暗模式？ Html CSS

Question

我正在尝试将徽标添加到我的网站，但该徽标的矩形形状中的深色模式存在问题。 当我启用暗模式（浏览我的网站时）时，我的文本会自动调整（变成白色），但形状不会。 如你看到的：

在白色模式下（工作正常）

在黑暗模式下（形状不会变白）

我的网站上的实时结果： https://premiumerblogger.blogspot.com/

我认为我网站的主题支持深色模式下的文本，但对于其他功能，我们必须应用一些与我网站的深色完全匹配的深色模式 CSS。 请有人帮我解决这个问题。

这是徽标的代码：

    <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 black;
    border-radius: 5px;
    padding: 6px;
    height: 34px;
}

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

.fox {
    font-weight: bold;
}

</style>



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

该代码非常适合我的网站，我唯一想要的就是在我的网站上启用暗模式时修复矩形的暗色（它应该变成白色）。

Answer 1

添加这个：

.drK .sonOne {
    border-color: var(--darkT);
}

Answer 2

由于在演示页面上切换深色主题会在主体上插入drK class，因此您可以利用它来发挥自己的优势：

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

在这里，第一个.sonOne块在所有情况下都使用，除了border属性，它被第二个body.drK.sonOne块覆盖——但前提是drK class 存在于主体上。 由于更高的特异性，如果第二条规则匹配，第二条规则将覆盖第一条规则。