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

[QuincyLarson]

I just designed a dark theme “night mode” based off of the colors in freeCodeCamp’s Design Style Guide.

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

[DanielJBailey]

nice quincy! Looks great!

[DanielJBailey]

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.

[Xiija]

I’m McLuvin It! …

[QuincyLarson]

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

[texas2010]

Whoo! dark theme is so nice!

[owel]

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

[DanielJBailey]

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

[QuincyLarson]

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

[owel]

Yes, much more comfortable. Thank you.

[ArielLeslie]

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 –

---

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?

[QuincyLarson]

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.

[stefika]

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

[evaristoc]

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

[Saddam]

Very nice and thanks for that great work:ok_hand:

[owel]

@QuincyLarson

There are edge cases like the one you highlighted, and I’m not 100% sure how to resolve that particular one.

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

line 23, canned-replies.scss

[rug3y]

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.

[CryptoVamp]

soooo much better…thank you quincy!!

[QuincyLarson]

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

[owel]

It works.