Changing the Background of the "Mobile" site?

Brokenshield

The issue

I changed the background of my flarum site to a slight gray to make it easier on the eyes with the following code in custom css:

body when (@config-dark-mode = false) {
    background-color: #e2e2e2;
}

Which works, but it switches back to the default white when the site is viewed in the "mobile version". I tried looking into flarum's css to see how it handles responsive css and tried the following:

@media only screen and (max-width: 767.98px) {
   body {
     background-color: #e2e2e2;
   }
}

Which didn't work. If I change something to Flarum's css, does anyone know how I can also change it for the "mobile" version of the site? Thanks!

Flarum information

Flarum
1.2.1
PHP
7.4.33
MySQL
5.7.44-cll-lve

GreXXL

Brokenshield please update to a current Flarum Release (we are already 1.8.4). You are also using both an outdated PHP version and a non-supported database. We love to support you - but we require you to be on a current version.

Brokenshield

GreXXL I will get on that. The question still stands though - assuming I finish the update, is there a way to easily do this on the latest version?

Brokenshield

GreXXL Backed up my website and upgraded my php, database, and flarum (to 1.8.4). The issue still persists with my current CSS code, and I don't see a new way in the admin panel to adjust this.

Any and all help is welcome. Thank you!

clarkwinkelmann

On the mobile view, the .App-content element also receives the background color.

Better than targeting individual elements, you can change the background color variable, which will automatically be picked up by Flarum and other extensions that rely on it. The Less variable is @body-bg and the CCS variable is --body-bg. If you change the Less variable it will automatically change the CSS variable as well, together with the other CSS variables that are calculated based on @body-bg like --body-bg-light.

I'm not going to attempt to provide an example because I'm not sure how that interacts together with night mode.

Subarist

body when (@config-dark-mode = false) {
--body-bg: #e2e2e2;
}

Brokenshield

Subarist This worked perfectly, thank you (and clarkwinkelmann, whose extensions I also use)! I did the following to also change the header to match, which also switched to white, in case anyone comes across this in the future.

body when (@config-dark-mode = false) {
    --body-bg: #e2e2e2;
    --header-bg: #e2e2e2;
}

Subarist

Brokenshield
No problem, I like etherealgem , nice & clean.