Beginner here: How would I change the background color(s) and text color?

[RistrettoMike]

Hey folks, dipping my toe into making a website for the first time using Hugo + Papermod.

I'm really grateful to have such a nice jumping-off point with Papermod for starting to shape my website, but I'm having trouble trying to learn how to change the default background colors and font colors for light & dark themes. I've browsed through the first handful of discussions here without any luck.

I'm trying to make both the light & dark themes a bit more warm and "sepia" - or at least I'd like to try that out - but I'm not sure what I need to edit in order to do that properly. Should I be editing the theme's .css files? Should I be making my own .css files somewhere else for the site to use instead of the default theme ones? What do I even write in the .css to tweak colors like that?

Any help would be massively appreciated - Cheers & Thanks!

~M

[danielfdickinson]

In your site (not the theme) create a file such as assets/css/extended/theme-vars-override.css

containing something like:

:root {
    --theme: #fff;
    --entry: #cfcfff;
    --primary: rgba(0, 0, 106, 0.88);
    --secondary: rgba(0, 0, 80, 0.78);
    --tertiary: rgba(0, 0, 106, 0.16);
    --content: rgba(0, 0, 60, 0.88);
    --hljs-bg: #1c1d21;
    --code-bg: #f5f5f5;
    --border: #eee;
}

.dark {
    --theme: #101c7a;
    --entry: #202062;
    --primary: rgba(235, 235, 255, 0.96);
    --secondary: rgba(235, 235, 255, 0.66);
    --tertiary: rgba(1, 1, 5, 0.32);
    --content: rgba(235, 235, 255, 0.82);
    --hljs-bg: #2e2e33;
    --code-bg: #37383e;
    --border: #446;
}

Adjusted to your preferred colours of course.

Also I'd recommend not using rgba (transparency) due to issues with it; I just haven't gotten around to changing it for this site as of yet.

[RistrettoMike]

This was exactly what I needed, and helped me start putting together what I wanted from Papermod. Thanks so much!