Welcome hero css broke night mode

Gatsu

Hi to all,
in my flarum’s forum I got a welcome hero CSS for welcome message and a banner.
This CSS broke my fof/nightmode or dark mode.
How can I fix this CSS?
Thank you.

.WelcomeHero {
    background-image: url('/assets/bg.jpg');
    color:#996676;
    text-align:center;
    background-size:cover !important;
    color:#FFFFFF;
    height:200px;
    text-shadow:1px 1px 2px #000,0 0 25px #000,0 0 5px #000;
    background-position: center;}
.containerNarrow{padding-top:20px;max-width:700px}.Hero-title{font-size:2.0rem;font-weight:100}.Hero-subtitle{font-size:1.0rem}
@media (max-width: 767px){
.App-content {
    background: #eff3f7;}}

phenomlab

Gatsu are you referring to the dark colour of the buttons ? If so, what colour would you like them to be ?

Gatsu

phenomlab If I remove welcome hero CSS, the fof/nightmode works well.
So I think there is some code in the CSS that breaks night mode.

phenomlab

Gatsu can you provide a forum URL ?

Gatsu

phenomlab https://www.nuovacaptur.it

Gatsu

> .Hero {
>     background: linear-gradient(rgba(0,0,0,0.95), rgba(0,0,0,0.45)),url(/assets/bg.jpg) !important;
>     background-repeat: no-repeat !important;
>     background-size: cover !important;
>     color: #ffffff;
>     padding-top: 53px;
>     height: 206px;
> }

I partially solved. Now everything works but the image is dark, how can I make it light / natural?

phenomlab

Gatsu This line is your problem

background: linear-gradient(rgba(0,0,0,0.95), rgba(0,0,0,0.45)),url(/assets/bg.jpg) !important;

You’re using a background image, but applying a gradient to darken it. Replace the CSS so it looks like this

background: url(/assets/bg.jpg)!important;

However, taking this approach makes the white text difficult to read in my view. You may want to consider using text-shadow as a means of making the text easier to read if you remove the overlay gradient.

Gatsu

phenomlab Thank you very much!