# Zeronoise Theme

**URL:** https://meta.discourse.org/t/zeronoise-theme/171809
**Category:** Theme
**Tags:** official, zeronoise-theme
**Created:** [December 1, 2020, 12:21am UTC](https://meta.discourse.org/t/zeronoise-theme/171809 "2020-12-01T00:21:52Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [December 1, 2020, 12:21am UTC](https://meta.discourse.org/t/zeronoise-theme/171809/1 "2020-12-01T00:21:52Z")

</div>

| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Zeronoise** focusses on having **clear color accents** and **subtly differentiated content areas** trying to create a pleasant reading experience. |
| 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/zeronoise-theme) |
| 🛠 | **Repository Link** | [https://github.com/discourse/zeronoise](https://github.com/discourse/zeronoise) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme

> [@](#):
>
> :discourse2: As this is an #official theme maintained by the Discourse team, #Support issues, #Contribute > Bug reports, #Contribute > UX suggestions, and requests for #Development advice can be made in the respective categories here on Meta, and tagged with the appropriate theme tag. Click on a link below to get one started. 👍
> 
> [❓&nbsp; **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=zernoise-theme "Ask for support on configuring and using the Zeronoise Theme") [🐛&nbsp; **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=zeronoise-theme "A bug report means something is broken, preventing normal/typical use of the theme") [👀&nbsp; **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=zeronoise-theme "Discussion about the user interface of the Zeronoise Theme, and how features are presented (including language and UI elements)") [🧑‍🎨&nbsp; **Dev**](https://meta.discourse.org/new-topic?category_id=7&tags=zeronoise-theme "Advice on how to customise this theme for your site")

### Features

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.

 ![zeronoise example](https://global.discourse-cdn.com/meta/original/3X/5/9/59ef5cfb844585033e09f9621a536a7bfd42ad6b.png)

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).

I hope you enjoy it, use it and fork it 💯!

 ![100288928-60e40980-2f3d-11eb-8261-14dae619f103](https://global.discourse-cdn.com/meta/original/3X/f/b/fbb270983db6a01f1f368ef3c9f05f9fc5bc9739.png)

 ![100288929-617ca000-2f3d-11eb-9a77-f6455fa19c26](https://global.discourse-cdn.com/meta/original/3X/d/1/d1c76c1ccbba0dc1d5a137d4a1c7d6a022ebbc90.png)

### Settings

| Name | Description |
| --- | --- |
| logo invert colors | |
| logo hue rotation | Specify a value in degrees to change the color of your logo. If you don’t know what this is you could leave it in 0 or google ‘css filter hue rotation’ |
| logo brightness | Set the amount of brightness you want to add to your logo (if you want to make it darker, set a negative number) |

## Credits

Created by @ruidovisual

  

> :discourse2: **Hosted by us?** Themes are available to use on our Standard, Business, and Enterprise plans.

> Last edited by @JammyDodger 2024-06-17T13:43:50Z
> 
> > **Check document**
> >
> > Perform check on document:

---

<div class="post-metadata">

### Author: ![anon82467725](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@anon82467725](https://meta.discourse.org/u/anon82467725)
#### Post date: [December 1, 2020, 12:37am UTC](https://meta.discourse.org/t/zeronoise-theme/171809/2 "2020-12-01T00:37:54Z")

</div>

Wow! Beautiful theme! Many of the elements should honestly be baked into [Material Theme](https://meta.discourse.org/t/daemonite-material-theme/64521), but both themes are awesome. Great job! 👍

---

<div class="post-metadata">

### Author: ![thegurjyot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thegurjyot/32/120516_2.png) [@thegurjyot](https://meta.discourse.org/u/thegurjyot)
#### Post date: [December 1, 2020, 3:48pm UTC](https://meta.discourse.org/t/zeronoise-theme/171809/3 "2020-12-01T15:48:06Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Eduardo\_Braga](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eduardo_braga/32/110348_2.png) [@Eduardo\_Braga](https://meta.discourse.org/u/Eduardo_Braga)
#### Post date: [February 1, 2021, 2:33pm UTC](https://meta.discourse.org/t/zeronoise-theme/171809/4 "2021-02-01T14:33:25Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/3X/5/a/5a1312abc629302fb50cfaa4da28bade258d55c6.jpeg)

new topic is a component?

---

<div class="post-metadata">

### Author: ![Karthikk\_Vijay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/karthikk_vijay/32/199586_2.png) [@Karthikk\_Vijay](https://meta.discourse.org/u/Karthikk_Vijay)
#### Post date: [March 5, 2021, 12:07pm UTC](https://meta.discourse.org/t/zeronoise-theme/171809/5 "2021-03-05T12:07:05Z")

</div>

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

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

- 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 🙂

---

<div class="post-metadata">

### Author: ![ruidovisual](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ruidovisual/32/201341_2.png) [@ruidovisual](https://meta.discourse.org/u/ruidovisual)
#### Post date: [March 6, 2021, 4:37am UTC](https://meta.discourse.org/t/zeronoise-theme/171809/6 "2021-03-06T04:37:39Z")

</div>

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](https://css-tricks.com/css-basics-fallback-font-stacks-robust-web-typography/)

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](https://github.com/discourse/zeronoise/blob/2f5d5736a6515165f714127ffe97addcd054dba3/scss/variables.scss#L116)

Hope it helps! have a nice weekend : )

---

<div class="post-metadata">

### Author: ![ruidovisual](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ruidovisual/32/201341_2.png) [@ruidovisual](https://meta.discourse.org/u/ruidovisual)
#### Post date: [March 6, 2021, 4:41am UTC](https://meta.discourse.org/t/zeronoise-theme/171809/7 "2021-03-06T04:41:46Z")

</div>

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](https://github.com/discourse/zeronoise/blob/2f5d5736a6515165f714127ffe97addcd054dba3/mobile/mobile.scss#L36)

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

---

<div class="post-metadata">

### Author: ![Matze](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/matze/32/208654_2.png) [@Matze](https://meta.discourse.org/u/Matze)
#### Post date: [March 6, 2021, 10:38pm UTC](https://meta.discourse.org/t/zeronoise-theme/171809/8 "2021-03-06T22:38:23Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Zup](https://avatars.discourse-cdn.com/v4/letter/z/c37758/32.png) [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [March 22, 2021, 7:28am UTC](https://meta.discourse.org/t/zeronoise-theme/171809/9 "2021-03-22T07:28:39Z")

</div>

excellent theme. high on my personal like list. 🙂

would be even more interesting if font could be optionally same as whatever was chosen in the wizard.

---

<div class="post-metadata">

### Author: ![daemon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/daemon/32/256632_2.png) [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [March 28, 2021, 4:47pm UTC](https://meta.discourse.org/t/zeronoise-theme/171809/10 "2021-03-28T16:47:52Z")

</div>

Hi @ruidovisual ,

I like your Theme a lot.

Is it possible to change the purple color to red? Can you release a red version of your theme?

I tried it myself but after that I lost the Theme effects and it wasn’t red. 😁

---

<div class="post-metadata">

### Author: ![Karthikk\_Vijay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/karthikk_vijay/32/199586_2.png) [@Karthikk\_Vijay](https://meta.discourse.org/u/Karthikk_Vijay)
#### Post date: [April 6, 2021, 10:43am UTC](https://meta.discourse.org/t/zeronoise-theme/171809/11 "2021-04-06T10:43:03Z")

</div>

@ruidovisual Thanks for the explanation, I have figure out how to change the fonts, thanks to you!

I am now playing around with my own light and dark version of the theme. I am using the Color Palettes to achieve this, as I wish to stay away from CSS as much as possible.

I have managed to tweak almost everything except these two elements :

1. The status bar below the post has a special effect in your theme and I am not able to control it with the Color Palette. How do I tweak this using CSS? Which part do I target?  

2. The bar on top of all topics in the separate category view stays white no matter what colour I set in the palette 

Would be great if you could help me with these 🙂

P.S. This is my Color Palette for your reference :

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/d/cd3a576a59e2a9f53d9f251b78a3d08e2f435d8b.png)

---

<div class="post-metadata">

### Author: ![Iceman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/iceman/32/181309_2.png) [@Iceman](https://meta.discourse.org/u/Iceman)
#### Post date: [May 6, 2021, 11:23am UTC](https://meta.discourse.org/t/zeronoise-theme/171809/12 "2021-05-06T11:23:21Z")

</div>

Great theme.

One question, has anyone been able to make it work with “Box-type” Categories? They just get random shapes and the text remains white.

---

<div class="post-metadata">

### Author: ![png](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/png/32/332783_2.png) [@png](https://meta.discourse.org/u/png)
#### Post date: [May 7, 2021, 3:52pm UTC](https://meta.discourse.org/t/zeronoise-theme/171809/13 "2021-05-07T15:52:48Z")

</div>

This is extremely clean and modern. The community makes the best themes ever!

---

<div class="post-metadata">

### Author: ![KevinBlandy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kevinblandy/32/155478_2.png) [@KevinBlandy](https://meta.discourse.org/u/KevinBlandy)
#### Post date: [May 21, 2021, 7:14am UTC](https://meta.discourse.org/t/zeronoise-theme/171809/14 "2021-05-21T07:14:51Z")

</div>

Hi,This theme looks great  
However, there seems to be some problems with the style in the Chinese forum.

## zeronoise theme

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/b/eb998157c49b526563f20822e086ee4045a6714a.png)

## default theme

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/a/8a49e200a40c70f10336d58d9976417c66c0fb11.png)

---

<div class="post-metadata">

### Author: ![png](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/png/32/332783_2.png) [@png](https://meta.discourse.org/u/png)
#### Post date: [June 22, 2021, 4:23pm UTC](https://meta.discourse.org/t/zeronoise-theme/171809/15 "2021-06-22T16:23:28Z")

</div>

Probably a formatting issue with Chinese characters

---

<div class="post-metadata">

### Author: ![marthasimmons](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marthasimmons/32/252987_2.png) [@marthasimmons](https://meta.discourse.org/u/marthasimmons)
#### Post date: [March 12, 2022, 8:12am UTC](https://meta.discourse.org/t/zeronoise-theme/171809/16 "2022-03-12T08:12:03Z")

</div>

First of all, thank you very much for this beautiful theme @ruidovisual . I have been using it for my community forum for almost 2 months now.

I have one question. Is it possible to remove the navigation dropdown on mobile?

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/6/e6415a04205b5c04f8670279e431cdfa9cea2255.jpeg)

Thanks in advance.

---

<div class="post-metadata">

### Author: ![diabolicvincent](https://avatars.discourse-cdn.com/v4/letter/d/4da419/32.png) [@diabolicvincent](https://meta.discourse.org/u/diabolicvincent)
#### Post date: [June 26, 2022, 2:20pm UTC](https://meta.discourse.org/t/zeronoise-theme/171809/17 "2022-06-26T14:20:49Z")

</div>

Thanks for this theme, loving it so far! One of the most pleasant discourse-styles I have yet seen 🙂

Only one issue: When performing mass operations in a category, the checkboxes do not appear, thus I can’t select multiple topics. This is really bugging me and I am unable to regularly use the theme, due to this issue. Could this be fixed? \<3

---

<div class="post-metadata">

### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [September 26, 2022, 10:51am UTC](https://meta.discourse.org/t/zeronoise-theme/171809/18 "2022-09-26T10:51:13Z")

</div>

> [@KevinBlandy](#):
>
> However, there seems to be some problems with the style in the Chinese forum.

This does not have anything to do with Chinese characters, it is an issue with the `category style` “box” setting.

 ![afbeelding](https://global.discourse-cdn.com/meta/original/4X/b/3/c/b3cb4495657e856e73829a544f6baa9d83c2c2ff.png)

```plaintext
.badge {
  &-category-bg, /* <------ bad!! */
  &-wrapper.bullet &-category-parent-bg,
  &-wrapper.bullet &-category-parent-bg + &-category-bg {
    border-radius: 50%;
    width: 9px;
  }

```

To resolve this, apply this as a theme component

```plaintext
.badge {
  &-wrapper.bar &-category-bg,
  &-wrapper.bar &-category-parent-bg,
  &-wrapper.bar &-category-parent-bg + &-category-bg {
     border-radius: 0%;
  }
  &-wrapper.box &-category-bg,
  &-wrapper.box &-category-parent-bg,
  &-wrapper.box &-category-parent-bg + &-category-bg {
    border-radius: 0%;
    width: 100%;
  }
}

```

---

<div class="post-metadata">

### Author: ![bosal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bosal/32/282180_2.png) [@bosal](https://meta.discourse.org/u/bosal)
#### Post date: [November 23, 2022, 7:43pm UTC](https://meta.discourse.org/t/zeronoise-theme/171809/21 "2022-11-23T19:43:16Z")

</div>

Love the theme but… 😉

Could you help me or fix this print view as it’s not usable:

- title should be small
- the border with shadow should not be visible

 ![CleanShot 2022-11-19 at 14.15.52@2x](https://global.discourse-cdn.com/meta/original/4X/7/e/4/7e4c249b9e20bd3555c1a2ae291a39743f899d48.png)

Also the topic selection doesn’t work

![CleanShot 2022-11-20 at 00.12.18](https://global.discourse-cdn.com/meta/original/4X/1/1/5/115fcfac5a6fb95301e21bd03a39cc5e40e7770a.gif)

Also, how can I globally change the font to this theme ?

---

<div class="post-metadata">

### Author: ![bquast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bquast/32/289307_2.png) [@bquast](https://meta.discourse.org/u/bquast)
#### Post date: [February 3, 2023, 7:46pm UTC](https://meta.discourse.org/t/zeronoise-theme/171809/22 "2023-02-03T19:46:14Z")

</div>

Very impressive, thank you very much.

Will deploy now, hopefully more to contribute soon 🙂

[Next page](https://meta.discourse.org/t/zeronoise-theme/171809.md?page=2)
