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.

2

Don’t use inline styles.

Usually, with themes you have a class added to the html or body element that sets the theme. Any style you write can be scoped to that parent class.

.dark-mode someChild {
  /* some darkmode styles */
}

If you use custom properties you can do the same and change the value of the variables depending on the theme class.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.