How to enable dark mode in shapes? Html CSS-CodePudding

I'm trying to add a logo to my website, but there's a problem with the dark mode in the rectangular shape of this logo. when I enable dark mode (while browsing my site) my text adjusts(turns white) automatically but the shape won't. As you can see:

When In White Mode(works fine)

When In Dark Mode(shape won't turn white)

Live result on my website: https://premiumerblogger.blogspot.com/

I think my website's theme support text in dark mode but for other features, we've to apply some dark mode CSS that matches exactly with my website's dark color. Please someone help me fix this.

Here's the code of logo:

    <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 >
        <div ><span>S</span></div>
        <div ><span >Fox.</span></div>
    </div>

The code is fitted well on my website the only thing I want is to fix the dark color of the rectangular shape when I enable dark mode on my website(It should turn white).

CodePudding user response：

Add this:

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

CodePudding user response：

Since toggling the dark theme on your demo page inserts the drK class on the body, you can use that to your advantage:

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

Here, the first .sonOne block is used in all cases, except for the border property, which is overwritten by the second body.drK .sonOne block -- but only if the drK class is present on the body. Due to higher specificity the second rule will override the first, if it matches.