# Radiant, an elegant theme for Discourse

**URL:** https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552
**Category:** Theme
**Created:** [February 5, 2021, 2:09pm UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552 "2021-02-05T14:09:10Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![meghna](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meghna/32/453356_2.png) [@meghna](https://meta.discourse.org/u/meghna)
#### Post date: [February 5, 2021, 2:09pm UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/1 "2021-02-05T14:09:10Z")

</div>

This theme aims to be minimal and at the same time has modern appeal. The entire styling is implemented via CSS and no image has been used.

🌈 💫 🚀

Homepage:

 ![Screenshot 2021-02-05 at 6.56.13 PM](https://global.discourse-cdn.com/meta/original/3X/b/8/b8d4456521731cd16348a2c8144b87bc52c6afa5.jpeg)

Topic page:

 ![Screenshot 2021-02-10 at 10.49.12 PM](https://global.discourse-cdn.com/meta/original/3X/9/f/9f94ab2a6fa24a5d08ce66faf39119772ab354bc.jpeg)

Full page search:

 ![Screenshot 2021-02-10 at 10.48.34 PM](https://global.discourse-cdn.com/meta/original/3X/8/8/8846b873c76984ec12adb81af5944671134d1062.jpeg)

Modal:

 ![Screenshot 2021-02-10 at 10.51.36 PM](https://global.discourse-cdn.com/meta/original/3X/8/7/87b5da85842036ffd4fc6e731a2c8180f8c4c87a.jpeg)

Let me know how this theme can be further improved. Enjoy! 😃

| | | |
| --- | --- | --- |
| 🕶 | **Preview** | [Preview on theme creator](https://theme-creator.discourse.org/theme/meghna/radiant) |
| 🔗 | **Github Repo** | [discourse-radiant-theme](https://github.com/discourse/discourse-radiant-theme) |
| 🛠 | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |

---

<div class="post-metadata">

### Author: ![Jack51](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jack51/32/201652_2.png) [@Jack51](https://meta.discourse.org/u/Jack51)
#### Post date: [February 6, 2021, 5:07am UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/2 "2021-02-06T05:07:24Z")

</div>

Very nice design!

Is there a way to customize the background shapes/colors? Being able to customize the “glow” of the main body on the background could be useful too.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [February 6, 2021, 10:50am UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/3 "2021-02-06T10:50:54Z")

</div>

Hello,

Amazing work ❤ This theme looks pretty cool 😍  
I have one suggestion with uniform rounded corners and shadows. I mean the popups, menu, input fields etc… Will be pretty awesome with the new loading slider 😍

---

<div class="post-metadata">

### Author: ![meghna](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meghna/32/453356_2.png) [@meghna](https://meta.discourse.org/u/meghna)
#### Post date: [February 6, 2021, 12:02pm UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/4 "2021-02-06T12:02:34Z")

</div>

> [@Jack51](#):
>
> Is there a way to customize the background shapes/colors? Being able to customize the “glow” of the main body on the background could be useful too.

No, the background is made via CSS linear gradients and adding the ability to customize it will add complexity for forum admins.

Feel free to fork the theme to further customize it as per your requirements.

> [@Don](#):
>
> I have one suggestion with uniform rounded corners and shadows. I mean the popups, menu, input fields etc…

Good point. I’ll add it on my list for improvements. 👍

---

<div class="post-metadata">

### Author: ![meghna](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meghna/32/453356_2.png) [@meghna](https://meta.discourse.org/u/meghna)
#### Post date: [February 10, 2021, 5:26pm UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/5 "2021-02-10T17:26:56Z")

</div>

I have improved the theme to make form inputs, header menu and modal consistent with the theme styling. Updated the first post with latest screenshots. 🙂

---

<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 16, 2021, 9:59am UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/6 "2021-03-16T09:59:34Z")

</div>

lovely theme. i might be using this soon. thanks, good work.

---

<div class="post-metadata">

### Author: ![derak](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/derak/32/214158_2.png) [@derak](https://meta.discourse.org/u/derak)
#### Post date: [March 23, 2021, 2:10am UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/7 "2021-03-23T02:10:17Z")

</div>

![tempsnip](https://global.discourse-cdn.com/meta/original/3X/f/8/f8d71441ddfe807da75850161a1c11c5b1a31efe.png)

Hi, the theme is very good. Is there any way to reduce that space at the top (see arrow)?

---

<div class="post-metadata">

### Author: ![meghna](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meghna/32/453356_2.png) [@meghna](https://meta.discourse.org/u/meghna)
#### Post date: [March 23, 2021, 5:09pm UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/8 "2021-03-23T17:09:34Z")

</div>

I have reduced the default `margin-top` to `30px`, via:

[https://github.com/MeghnaAJ/discourse-radiant-theme/commit/d3eac88041c3e5ebc8529ac79d99193c2d285349](https://github.com/MeghnaAJ/discourse-radiant-theme/commit/d3eac88041c3e5ebc8529ac79d99193c2d285349)

Feel free to fork the theme and further customize it as per your requirements. 🙂

---

<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 24, 2021, 12:21am UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/9 "2021-03-24T00:21:07Z")

</div>

personally i think the smaller margin makes the gradient too noticeable. 😕

could you lead me in the right direction to implement this as the background? [https://codepen.io/chris22smith/pen/RZogMa](https://codepen.io/chris22smith/pen/RZogMa)

---

<div class="post-metadata">

### Author: ![LucasMZReal](https://avatars.discourse-cdn.com/v4/letter/l/bcef8e/32.png) [@LucasMZReal](https://meta.discourse.org/u/LucasMZReal)
#### Post date: [April 26, 2021, 3:40am UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/10 "2021-04-26T03:40:28Z")

</div>

I absolutely love this theme, I would request it to the forum I’m on, just wanted to ask you some stuff.

I’m not someone who uses Discourse to make any forums, I’m the user of these forums, so some stuff might come out wrong, or too obvious, but I never used Discourse to build anything.

Are there any plans to make a Dark Mode version of this? I personally have the ‘Force Dark Mode for Web Contents’ flag on Edge enabled. _It’s also a thing for Chrome._ And it usually helps, these are some of the results I got from it.

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/4/74acc65782f441e16fa2af52bc42497d88c4d97b.png)

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

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

Overall it looks fine with that flag on, but there’s some stuff that looks out of place for no obvious reason, which I would love to see adapted / fixed for Dark Mode if that’s possible :)

You woudn’t necessarily need to modify everything to make a Dark Mode specific version, as long as you fixed the weird color difference on the profile pages, it would pretty much work just fine with the flag enabled.

---

<div class="post-metadata">

### Author: ![meghna](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meghna/32/453356_2.png) [@meghna](https://meta.discourse.org/u/meghna)
#### Post date: [April 28, 2021, 3:37am UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/11 "2021-04-28T03:37:38Z")

</div>

> [@LucasMZReal](#):
>
> Are there any plans to make a Dark Mode version of this?

Not yet, but I’ll look into it. I’ll have to go with different color scheme though.

> [@LucasMZReal](#):
>
> Overall it looks fine with that flag on, but there’s some stuff that looks out of place for no obvious reason, which I would love to see adapted / fixed for Dark Mode if that’s possible 🙂

Thanks for the suggestions! I’ll look into them and make the changes if they do not affect the default (original) light version. 🙂

---

<div class="post-metadata">

### Author: ![bentsai](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bentsai/32/220317_2.png) [@bentsai](https://meta.discourse.org/u/bentsai)
#### Post date: [May 11, 2021, 6:05pm UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/12 "2021-05-11T18:05:47Z")

</div>

I’ve just set up a Discourse and was itching to customizing it. I’m really glad I found your theme—it’s fresh, colorful, and lovely. Thanks!

– ben

---

<div class="post-metadata">

### Author: ![applebee1558](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@applebee1558](https://meta.discourse.org/u/applebee1558)
#### Post date: [May 8, 2022, 11:08pm UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/13 "2022-05-08T23:08:46Z")

</div>

Really nice theme, but as of lately, it seems like this theme is incompatible with discourse. The sidebar is completely squished together.

> **[msedge\_lTaKEIMsyU.png](https://applebee.host/i/zOLpUASUJkaRCw)**
>
> Uploaded by applebee from Main PC on 05/08/2022, 23:07:50 (UTC) (8KB)

`

---

<div class="post-metadata">

### Author: ![meghna](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meghna/32/453356_2.png) [@meghna](https://meta.discourse.org/u/meghna)
#### Post date: [May 10, 2022, 11:12am UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/14 "2022-05-10T11:12:37Z")

</div>

Good catch! Now fixed via:

[https://github.com/discourse/discourse-radiant-theme/commit/5c03967c2f3ad48e6031c49bf92bee411c7d0177](https://github.com/discourse/discourse-radiant-theme/commit/5c03967c2f3ad48e6031c49bf92bee411c7d0177)

---

<div class="post-metadata">

### Author: ![applebee1558](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@applebee1558](https://meta.discourse.org/u/applebee1558)
#### Post date: [May 11, 2022, 3:22am UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/15 "2022-05-11T03:22:28Z")

</div>

Thanks, looks cool and issue is fixed

---

<div class="post-metadata">

### Author: ![mydnic](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mydnic/32/263695_2.png) [@mydnic](https://meta.discourse.org/u/mydnic)
#### Post date: [June 15, 2022, 7:47am UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/16 "2022-06-15T07:47:39Z")

</div>

Hello

Since the last update it seems all the content is “stuck” on both sides. It’s like the right and left padding/margin are gone

 ![Screenshot 2022-06-15 at 09.43.46](https://global.discourse-cdn.com/meta/original/4X/3/9/b/39ba8f8379630d5cab91720e8bcf2d6017024fda.png)

Is this intentional ? On the preview images of the theme it’s not like that. How can I fix it ?

Thanks a lot

---

<div class="post-metadata">

### Author: ![meghna](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meghna/32/453356_2.png) [@meghna](https://meta.discourse.org/u/meghna)
#### Post date: [June 15, 2022, 9:59am UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/17 "2022-06-15T09:59:25Z")

</div>

This is now fixed:

[https://github.com/discourse/discourse-radiant-theme/pull/5](https://github.com/discourse/discourse-radiant-theme/pull/5)

Thanks for reporting this issue 👍

---

<div class="post-metadata">

### Author: ![mydnic](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mydnic/32/263695_2.png) [@mydnic](https://meta.discourse.org/u/mydnic)
#### Post date: [June 15, 2022, 10:15am UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/18 "2022-06-15T10:15:10Z")

</div>

I confirm it’s fixed !

That was incredibly fast, thank you so much

Amazing theme btw 🙂

---

<div class="post-metadata">

### Author: ![bitmage](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bitmage/32/389881_2.png) [@bitmage](https://meta.discourse.org/u/bitmage)
#### Post date: [May 31, 2024, 11:28pm UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/19 "2024-05-31T23:28:43Z")

</div>

Can you help me understand how to change the color of the blue accent bar at the top?

I see in desktop.scss this is defined:

```scss
#main-outlet {
  border-top: 8px solid $tertiary;
}

```

Where `$tertiary` I assume comes from variables defined by Discourse core SCSS, and should pull from the user’s selected color palette.

I can see in devtools the bar is set to `#3977ff` which you can see as the blue bar in the screenshot below. But in my color palette, I have a yellow color set for the “tertiary” and I don’t have a color `#3977ff` defined anywhere.

So what’s going on here, and how can I set the color?

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/1/a/71adee20c7d6d2d27cc2592f84da3a1fc15d54b0.png)

---

<div class="post-metadata">

### Author: ![bitmage](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bitmage/32/389881_2.png) [@bitmage](https://meta.discourse.org/u/bitmage)
#### Post date: [May 31, 2024, 11:34pm UTC](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552/20 "2024-05-31T23:34:29Z")

</div>

Oh! I see `tertiary` is defined in `about.json`:

```json
  "color_schemes": {
    "radiant": {
      "primary": "000000",
      "tertiary": "3977FF",
      "header_primary": "4d4d4d"
    }
  },

```

So I assume this must be where it’s getting the color value. But why would it be pulling from this if I don’t have the “radiant” color scheme selected?

[Next page](https://meta.discourse.org/t/radiant-an-elegant-theme-for-discourse/178552.md?page=2)
