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
0

#1

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:


#2

nice quincy! Looks great!


#3

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.


#4

I’m McLuvin It! …


#5

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


#6

Whoo! dark theme is so nice!


#7

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


#8

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


#9

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


#10

Yes, much more comfortable. Thank you.


#11

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?

#12

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.


#13

@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:

hover1

hover2


#14

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


#15

Very nice and thanks for that great work:ok_hand:


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

line 23, canned-replies.scss


#17

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.


#18

soooo much better…thank you quincy!!


#19

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


#20

It works.