# I designed a dark theme "night mode" you can easily toggle on and off

**URL:** <https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711>\
**Category:** freeCodeCamp Contributors\
**Tags:** contributing\
**Created:** [April 4, 2018, 11:07pm UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711 "2018-04-04T23:07:39Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![QuincyLarson](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/quincylarson/32/212400_2.png) [@QuincyLarson](https://forum.freecodecamp.org/u/QuincyLarson)\
**Post date:** [April 4, 2018, 11:07pm UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/1 "2018-04-04T23:07:39Z")

</div>

I just designed a dark theme “night mode” based off of the colors in freeCodeCamp’s [Design Style Guide](https://design-style-guide.freecodecamp.org/).

I also added a component to the dropdown menu so you can toggle the dark theme on and off in just 2 clicks. Try it out and let me know what you think of it 🌞 🌛

 ![Categories_-_freeCodeCamp_Forum_%F0%9F%94%8A](https://global.discourse-cdn.com/freecodecamp/original/3X/8/b/8b419a0b57672d9910a6c75d65cf73129e11abf8.png)

---

<div class="post-metadata">

**Author:** ![DanielJBailey](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/danieljbailey/32/93801_2.png) [@DanielJBailey](https://forum.freecodecamp.org/u/DanielJBailey)\
**Post date:** [April 4, 2018, 11:47pm UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/2 "2018-04-04T23:47:02Z")

</div>

nice quincy! Looks great!

---

<div class="post-metadata">

**Author:** ![DanielJBailey](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/danieljbailey/32/93801_2.png) [@DanielJBailey](https://forum.freecodecamp.org/u/DanielJBailey)\
**Post date:** [April 4, 2018, 11:48pm UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/3 "2018-04-04T23:48:51Z")

</div>

now if only we could center the logo on our nav bar using flex or something so my OCD won’t kill me every time I am log on haha.

---

<div class="post-metadata">

**Author:** ![Xiija](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/xiija/32/108018_2.png) [@Xiija](https://forum.freecodecamp.org/u/Xiija)\
**Post date:** [April 5, 2018, 1:25am UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/4 "2018-04-05T01:25:03Z")

</div>

I’m McLuvin It! …

---

<div class="post-metadata">

**Author:** ![QuincyLarson](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/quincylarson/32/212400_2.png) [@QuincyLarson](https://forum.freecodecamp.org/u/QuincyLarson)\
**Post date:** [April 5, 2018, 2:18am UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/5 "2018-04-05T02:18:11Z")

</div>

OK - I went in and modified the CSS. How does it look now?

---

<div class="post-metadata">

**Author:** ![texas2010](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/texas2010/32/74840_2.png) [@texas2010](https://forum.freecodecamp.org/u/texas2010)\
**Post date:** [April 5, 2018, 2:21am UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/6 "2018-04-05T02:21:11Z")

</div>

Whoo! dark theme is so nice!

---

<div class="post-metadata">

**Author:** ![owel](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/owel/32/48425_2.png) [@owel](https://forum.freecodecamp.org/u/owel)\
**Post date:** [April 5, 2018, 2:27am UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/7 "2018-04-05T02:27:39Z")

</div>

While we’re nit-picking… 🙂 🙂 🙂

Pure white #FFF on a dark theme is hard on the eyes.

Maybe some subtlety… color: rgba(255,255,255,0.8);

---

<div class="post-metadata">

**Author:** ![DanielJBailey](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/danieljbailey/32/93801_2.png) [@DanielJBailey](https://forum.freecodecamp.org/u/DanielJBailey)\
**Post date:** [April 5, 2018, 3:03am UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/8 "2018-04-05T03:03:18Z")

</div>

So much better! Good job. I can relax now ha

---

<div class="post-metadata">

**Author:** ![QuincyLarson](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/quincylarson/32/212400_2.png) [@QuincyLarson](https://forum.freecodecamp.org/u/QuincyLarson)\
**Post date:** [April 5, 2018, 4:02am UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/9 "2018-04-05T04:02:16Z")

</div>

OK - I’ve changed it to a slightly darker shade - let me whether if that helps.

---

<div class="post-metadata">

**Author:** ![owel](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/owel/32/48425_2.png) [@owel](https://forum.freecodecamp.org/u/owel)\
**Post date:** [April 5, 2018, 5:00am UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/10 "2018-04-05T05:00:58Z")

</div>

Yes, much more comfortable. Thank you.

---

<div class="post-metadata">

**Author:** ![ArielLeslie](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/arielleslie/32/264841_2.png) [@ArielLeslie](https://forum.freecodecamp.org/u/ArielLeslie)\
**Post date:** [April 5, 2018, 4:42pm UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/11 "2018-04-05T16:42:34Z")

</div>

Is this somewhere in one of the FCC repos? My experience with theming is that weird little situations will keep being discovered.

For example: the hover effect of the Canned replies –

 ![image](https://global.discourse-cdn.com/freecodecamp/original/3X/2/2/229e641b982eb8b417abbd0cb4a8eaa382c04d5d.png)

* * *
On another note, if we're going to start a Design section, would you have time/interest in sharing what resources and design principles went into creating a dark theme that compliments the "normal" design and branding?

---

<div class="post-metadata">

**Author:** ![QuincyLarson](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/quincylarson/32/212400_2.png) [@QuincyLarson](https://forum.freecodecamp.org/u/QuincyLarson)\
**Post date:** [April 5, 2018, 5:02pm UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/12 "2018-04-05T17:02:46Z")

</div>

Sure - I used the Design Style Guide and picked colors from it that have high contrast. There are edge cases like the one you highlighted, and I’m not 100% sure how to resolve that particular one.

---

<div class="post-metadata">

**Author:** ![stefika](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/stefika/32/104785_2.png) [@stefika](https://forum.freecodecamp.org/u/stefika)\
**Post date:** [April 5, 2018, 5:44pm UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/13 "2018-04-05T17:44:27Z")

</div>

@QuincyLarson Little mistake, when you hover on normal, the circle is invisible. This is also in a Light mode, becomes invisible on hover 🙂

![hover1](https://global.discourse-cdn.com/freecodecamp/original/3X/8/1/81cac638babf123cc226cdbbe0fc804759b7cd62.png)

![hover2](https://global.discourse-cdn.com/freecodecamp/original/3X/d/a/da0ae47dfa9ba0e62fd958489d302067f258e913.png)

---

<div class="post-metadata">

**Author:** ![evaristoc](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/evaristoc/32/80687_2.png) [@evaristoc](https://forum.freecodecamp.org/u/evaristoc)\
**Post date:** [April 5, 2018, 5:47pm UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/14 "2018-04-05T17:47:52Z")

</div>

I will let you know if I find something. So far it looks nice!

---

<div class="post-metadata">

**Author:** ![Saddam](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/saddam/32/81313_2.png) [@Saddam](https://forum.freecodecamp.org/u/Saddam)\
**Post date:** [April 5, 2018, 6:48pm UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/15 "2018-04-05T18:48:39Z")

</div>

Very nice and thanks for that great work:ok\_hand:

---

<div class="post-metadata">

**Author:** ![owel](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/owel/32/48425_2.png) [@owel](https://forum.freecodecamp.org/u/owel)\
**Post date:** [April 5, 2018, 6:56pm UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/16 "2018-04-05T18:56:20Z")

</div>

> [@QuincyLarson](#):
>
> There are edge cases like the one you highlighted, and I’m not 100% sure how to resolve that particular one.

```auto
.canned-reply-title:hover {
    background-color: #834917; // original value: #eee  
    cursor: pointer;
}

```

line 23, canned-replies.scss

---

<div class="post-metadata">

**Author:** ![rug3y](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rug3y/32/64395_2.png) [@rug3y](https://forum.freecodecamp.org/u/rug3y)\
**Post date:** [April 6, 2018, 4:48pm UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/17 "2018-04-06T16:48:52Z")

</div>

Thanks! I love the dark theme! Every time I have a choice, I use a dark theme, it’s so much easier on the eyes.

---

<div class="post-metadata">

**Author:** ![CryptoVamp](https://avatars.discourse-cdn.com/v4/letter/c/a5b964/32.png) [@CryptoVamp](https://forum.freecodecamp.org/u/CryptoVamp)\
**Post date:** [April 6, 2018, 6:14pm UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/18 "2018-04-06T18:14:59Z")

</div>

soooo much better…thank you quincy!!

---

<div class="post-metadata">

**Author:** ![QuincyLarson](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/quincylarson/32/212400_2.png) [@QuincyLarson](https://forum.freecodecamp.org/u/QuincyLarson)\
**Post date:** [April 6, 2018, 7:48pm UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/19 "2018-04-06T19:48:39Z")

</div>

OK - I’ve applied this CSS - please verify it looks right.

---

<div class="post-metadata">

**Author:** ![owel](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/owel/32/48425_2.png) [@owel](https://forum.freecodecamp.org/u/owel)\
**Post date:** [April 6, 2018, 7:51pm UTC](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711/20 "2018-04-06T19:51:40Z")

</div>

It works.

 ![](https://global.discourse-cdn.com/freecodecamp/original/3X/7/c/7cc7cbcdfb4728e51a697c37b03865e9c26ce2d1.png)

[Next page](https://forum.freecodecamp.org/t/i-designed-a-dark-theme-night-mode-you-can-easily-toggle-on-and-off/183711.md?page=2)