opensourcediversity.org icon indicating copy to clipboard operation
opensourcediversity.org copied to clipboard

Published 20 hours ago • verified publisher icon opensourcediversity

Dark theme for opensourcediversity

Open siddhanth339 opened this issue 3 years ago • 5 comments

A glimpse of the dark theme:

darkTheme1

darkTheme2

darkTheme3

Also, some links were unnecessary so I have fixed them.

siddhanth339 avatar May 01 '21 19:05 siddhanth339

Please review my PR and let me know if any changes are to be made. Thanks in advance.

siddhanth339 avatar May 01 '21 19:05 siddhanth339

Hi @siddhanth339, good stuff! :) Here’s some points:

  • [ ] Easier than having 2 full CSS files would be using CSS variables
  • [ ] Instead of the toggle and the Javascript, using whatever people set on their platform could be nice :) This can be done by using prefers-color-scheme in the CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
  • [ ] Might be nice to keep the heading in the branded green?

What do you think? :)

jancborchardt avatar May 08 '21 02:05 jancborchardt

Good idea! I am working on it and will make a commit soon. Thanks for your time!

siddhanth339 avatar May 08 '21 03:05 siddhanth339

@jancborchardt please review my latest commit https://github.com/opensourcediversity/opensourcediversity.org/pull/118/commits/1f4252363c70ec6084cd1a2205835ded24e4ca7e

  • [x] CSS variables are used and there is only one file "styles.css" for both light and dark themes
  • [x] Toggle for the theme is removed and prefers-color-scheme is used to detect theme
  • [x] Heading is in branded green colour for the dark mode

siddhanth339 avatar May 08 '21 14:05 siddhanth339

@jancborchardt any updates?

siddhanth339 avatar May 15 '21 06:05 siddhanth339