This is a CSS Only theme.
The main goal of the theme is improve readability, defining the interest areas and separating them from the background through color. It also tries to emphasize the topics and the authors through text hierarchies.
You can edit the color palette in the about.json
file
The main colors of the theme in order of importance are:
It's used in the site header through all the platform
Is the accent color, which gives a voice to the theme. You can replace it by a brand color, or another accent that suits for you
This is the color of the light backgrounds and light accents (good ol' #FFF)
This is the body background color which serves as a basis to make the white backgrounds pop.
It's basically the Body and Title text color
You can manipulate the --main-background
and --light-accent
colors in the variables.scss
file just in case you don't want them to be equal.
It was easier to edit the theme like that from a technical point of view. A side note: That's why I don't like the "primary, secondary…" naming convention; it's hard to tell what has to be the primary color, because it's completely up to the author. For me, primary would be the brand, secondary would be the background, and so on, but I'd prefer calling them by their function, for example: brand, main-background, secondary-background, text, headings, etcetera.
I added the Playfair Display Font to make the titles a bit more interesting. You can change this font in the variables.scss
under the --heading-font-family
custom property.
Since I'm using a black background in the header and the discourse logo is mainly dark, I used some css filters to add contrast to it. You can check the settings in the settings.yaml
(and also in the theme page when you install it) in case you want to change something.
I believe all themes are a work in progress so feel free to open an issue if you have suggestions, and obviously to fork it if you want to make it to your taste :)