How to remove Background Color in Dark Mode

HTML & CSS
1

Hello,

I’m currently working on implementing a dark mode feature for my website, EZ Online Tools, and I’m facing a challenge with the background styling.

I have a element with a gradient background defined using CSS. However, when I toggle the dark mode on, I want to remove this gradient background and replace it with transparent.

Here’s the relevant HTML and CSS code snippet:

<section id="parallax" class="text-white">
    <div class="position-relative overflow-hidden text-center bg-light">
        <span class="mask" style="background: #cee3f5;
                                    background: -moz-linear-gradient(to left, #cee3f5, #fcf3ec);
                                    background: -webkit-linear-gradient(to left, #cee3f5, #fcf3ec);
                                    background: linear-gradient(to left, #cee3f5, #fcf3ec);
                                    opacity: 0.9;"></span>

        <div class="container position-relative zindex-1">
            <div class="col text-center p-lg-5 mx-auto my-5">
                <h1 class="display-5 fw-normal">EZOnlineTools</h1>
                <h2 class="fw-normal">The Ultimate Collection of Free Online Web Tools That You Will Ever Need.</h2>
            </div>
        </div>
    </div>
</section>

I’m looking for guidance on how to modify this code so that when the dark mode is enabled, the gradient background is replaced with transparent. Any help or suggestions on how to achieve this would be greatly appreciated.

Live Testing:
If you would like to test the dark mode changes live, you can visit: ezonlinetools.com

2

The…same way you’ve done all the other color changes you’ve done in the dark mode?

Why is your gradient not in the CSS file?

3

Don’t use in-line styling. Especially when you want to do things like different colour modes, in-line styles are particularly difficult to alter. Keep everything in a style sheet.

4

The challenge arises because the gradient background was added separately, not integrated with the theme’s color scheme.

5

So… fix it?

I’m failing to see why this is a problem. Take it out of the inline style, and put it into your css file, and then override it with dark mode stuff as you have done for everything else. (Also, why am I having to explain to a 6-years-in-business, 5-star rated “custom web development” company thats trusted by microsoft and dhl and the like how to fix basic CSS?)

6

You’d need to set the mask to transparent also.

.theme-dark #parallax > div.bg-light,
.theme-dark #parallax > div.bg-light > span.mask{
background:transparent!important;
}

www.ezonlinetools.com_
www.ezonlinetools.com_1104×388 8.63 KB