Zeronoise. A theme aiming to create a pleasant reading experience

Hello Meta! I’ve built a theme for discourse focusing on having clear color accents and subtly differentiated content areas trying to create a pleasant reading experience.

In the desktop version I also moved the topic creator avatar to the left side of the title In order to give it a higher hierarchy in the design.

It was also fun to play with serif fonts and in the end “Playfair Display” really gives a character (hehe) to the theme.

Another fun thing is that, since the theme header is black, you can play with some aspects of the logo through Theme Settings (color inversion, hue rotation and brightness).

Useful links:

I hope you enjoy it, use it and fork it :100:!

34 Likes

Wow! Beautiful theme! Many of the elements should honestly be baked into Material Theme, but both themes are awesome. Great job! :+1:

This theme actually looks good. Will definitely try this on my website.

1 Like

new topic is a component?

Honestly this is one of the best looking themes I have found! Thank you so much :slight_smile:

I just need one help, if it’s not too much trouble @ruidovisual :slight_smile:

  • I am a complete noob with all this, so forgive my naivety. I have managed to fork your file and change the colour themes. I need to change the font and I see I can do that by importing my own font family inside the variable SCSS?
  • What I am not able to figure is how to set two different fonts, one for the titles, headers etc., and the other for the body.

It will be so great if you could help me out here, I know this might be totally out of scope but it would certainly help a lot :slight_smile:

1 Like

Hey Karthikk! I’m glad you like the theme : )

The easiest way would be to define a font-family for the body (I think doing it in common.scss would be the best):

body {
  font-family: 'The Name of your Font Family', [FALLBACKS];
} 

I don’t know if you are adding your own fonts or picking up some google fonts, but, I would advise that you pick a family from the google catalog.

Remember to replace [FALLBACKS] with your fallbacks depending on what type of font you’ve chosen, you can see more on font-family fallbacks here

About changing the font for titles and headers, I think that’s the part that you already figured out, but as a reminder, besides from importing it you need to declare it in the line 116 of variables.scss

Hope it helps! have a nice weekend : )

1 Like

You mean a custom component for the theme? in this case the answer is no. It’s there with position: fixed See line 36 of mobile.scss

Have a nice weekend and thank you for your patience : )

Very nice theme! I can’t wait building a new theme for our discourse based upon zeronoise.
Thank you for sharing!