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

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 :sun_with_face: :first_quarter_moon_with_face:


nice quincy! Looks great!

1 Like

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.


I’m McLuvin It! …

1 Like

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


Whoo! dark theme is so nice!

1 Like

While we’re nit-picking… :slight_smile: :slight_smile: :slight_smile:

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

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

1 Like

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

1 Like

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

Yes, much more comfortable. Thank you.

1 Like

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?

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.

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



1 Like

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

Very nice and thanks for that great work:ok_hand:

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

line 23, canned-replies.scss

1 Like

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.


soooo much better…thank you quincy!!

1 Like

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

It works.

1 Like