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

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!


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! …


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


Whoo! dark theme is so nice!


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


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


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


Yes, much more comfortable. Thank you.


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:




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


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


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


It works.