Design: Dark theme

[adachiu]

I've created the dark theme for the lesson page. Since most of the reading is on the lesson pages, I think we can have the dark theme implemented on lesson pages first. The component underneath consisting of "view course" and "next lesson" may or may not need a dark theme. Let's have a discussion around this.

Edit Will have a mock for another lesson page with more page variety. Ie. code blocks, Assignment block, etc.

[Deetss]

:+1:

[CouchofTomato]

@adachiu It looks amazing and will definitely be a nice choice to give users. Thanks for putting this together.

[mindovermiles262]

Hey @adachiu this looks really good. Thanks for putting it together :smiley:

A few suggestions from the peanut gallery over here:

• The top SVG round icon for "ruby on rails" looks very out of place. I don't know much about SVG graphics but if it's simple to replace the colors it may be worth looking into - something closer to the dark gray of the background so it's not so flashy.

• The very light gray background in the student solutions area is a little bright for a dark theme. Maybe we can darken it a bit to match the dark theme above.

[adachiu]

Thanks for the input @mindovermiles262 !

• There are pros and cons for the badge (top SVG icon) to have a different color. The con would be that the dark theme badge may be confusing from the original set of badges. The pro would be the whole page aligning more to the dark theme if the badge was darker. Or we can try to keep the original badge and adjust the top to allow a smooth transition into the dark theme.

• The bottom solutions part has a dark theme in this newest upload 😄

Another lesson page with more content variety. The "assignment" component can stay the same in dark mode.

[CouchofTomato]

I think that looks awesome @adachiu

Thanks for putting this together.

[KevinMulhern]

This looks fantastic @adachiu, great work 🎉

[LE-HU]

Guys just to let you know what i've been using so far when coding @ night. These examples might provide you with some example and ideas in further development of in-app dark mode. Both are mozilla add-ons.

1. Custom TOP dark theme created solely for this website, unfortunatelly I dont know who's the creator. This add-on worked quite well but I've spot some issues like not seeing comments properly or code highlighting, so I've switched to 2. https://addons.mozilla.org/en-US/firefox/addon/the-odin-project-dark-theme/
2. All purpose Dark-Reader for firefox, works very well, and i use it every time i code during nighttime - worth giving a shot to see how it looks. https://addons.mozilla.org/en-US/firefox/addon/darkreader/

Thanks!

ps. a pic from dark-reader

[mindovermiles262]

Hey thanks @LE-HU ! I'm the creator of the dark mode plugins for firefox.

There is also one available for chrome: https://chrome.google.com/webstore/detail/the-odin-project-dark-the/omiecnmmajomefpodcdjkebeonieonef

[I3uckwheat]

Hey guys, this is for adding an actual dark mode to the Odin site itself, not to discuss dark reader.

[brooksquil]

I would love to take a whack at this!

[KevinMulhern]

Hey @brooksquil, this could potentially be a big piece of work. Are you in our discord? it would be worth having a chat about the approach.

[brooksquil]

I just got on discord. I know it's a big chunk of work but I have done a lot of react component styling on a project at my first consulting firm and on contract with the same client after I went to work on a Ruby app. I have also done research on how to go about this and while it looks challenging, it also looks like this ticket has been sitting around for a while so I have no need to rush through it. Are there Sketch files to get the styles and everything from?

@KevinMulhern my discord handle is BrooklynDodger

On Sat, Dec 19, 2020 at 7:35 AM Kevin Mulhern [email protected] wrote:

Hey @brooksquil https://github.com/brooksquil, this could potentially be a big piece of work. Are you in our discord? it would be worth having a chat about the approach.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/TheOdinProject/theodinproject/issues/908#issuecomment-748475779, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGMWV7QV2OXP2MFGNIGZQXDSVST23ANCNFSM4FELKUMA .

[KevinMulhern]

Hey @brooksquil, hopefully you haven't done too much with this. We recently decided to convert the site to use Tailwind. We're starting to look at converting everything over. We're putting this story on hold until thats done.

[brooksquil]

Thanks for letting me know

On Fri, May 28, 2021 at 7:54 PM Kevin Mulhern @.***> wrote:

Hey @brooksquil https://github.com/brooksquil, hopefully you haven't done too much with this. We recently decided to convert the site to use Tailwind. We're starting to look at converting everything over. We're putting this story on hold until thats done.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/TheOdinProject/theodinproject/issues/908#issuecomment-850739417, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGMWV7UC5DLYGMXPPTRYE7TTQA3KZANCNFSM4FELKUMA .

[twalton83]

A beta was released that differs from the final designs seen above in #2202.

[qazip]

The dark mode implemented in the TOP site is not really eye-friendly, in my opinion. The contrast is too big. The white too white, the dark too dark. I have sensitive eyes, and it gets tiring very fast. I would suggest changing the white to some off-white color.

[ChargrilledChook]

Closing as will be resolved soon by #3385 :tada: