Customizing color scheme

Hi all, I tried searching existing topics but couldn’t find an answer on this. I made a new custom color scheme under /admin/customize/colors and things are almost how I want them but I noticed that the dark grey color I set for “secondary” is filling the entire background. What I would like is a separate color (e.g. white) in the background area behind the topic list. See screenshot. So the red highlighted area (1) I want the background to be white, and the area (2) highlighted in blue I want to be the dark grey color as shown.

Does anyone have any tips or guidance about how I can achieve this?

TIA,
Chris

This should work for you:

@import 'theme_variables';

html {
    background-color: pink; /* white */
}
div#main-outlet {
    background-color: green; /* $secondary */
    margin-left: auto;
    margin-right: auto;
    max-width: calc(1110px + 15px * 2);
}

6 Likes

That works, thanks Kane! Appreciate your help very much :smile:!

Chris