Added dark mode button #2980
Added dark mode button #2980
Conversation
There was a problem hiding this comment.
Thank you for making a contribution!
The change is welcome and it works, but:
- the styling needs refinement, and
- I think it would be better if dark mode is automatically selected for people who prefer it.
Please take a look at the screenshot by @gprasanth and his gist in which he shared the CSS that made it work, including the media selector that takes care of selecting dark mode automatically.
This is what your version of dark mode currently looks like in Safari:
There was a problem hiding this comment.
Tip: try to avoid pure whitespace changes in your next few pull requests.
| background-color: #000000; | ||
| color: white; |
There was a problem hiding this comment.
Hard white on deep black is considered uncomfortable for the eyes.
| font-size: 14px; | ||
| line-height: 22px; | ||
| background: #f4f4f4 url(docs/images/background.png); |
There was a problem hiding this comment.
There is no need to remove the background in light mode.
| @@ -143,7 +162,7 @@ | |||
| } | |||
| tt { | |||
| padding: 0px 3px; | |||
| background: #fff; | |||
There was a problem hiding this comment.
Preferably replace the background color in dark mode, rather than removing it in both modes.
| <!-- <div class="mode"> | ||
| Dark mode: | ||
| <span class="change">OFF</span> | ||
| </div> --> |
There was a problem hiding this comment.
Seems like you forgot to remove an outcomment here.
| <span class="change">OFF</span> | ||
| </div> --> | ||
| <div class="mode"> | ||
| <span class="change">OFF</span> |
There was a problem hiding this comment.
If the button just says "ON"/"OFF", it is rather mysterious what it will do. For the color mode, this not too unproblematic because it is non-essential, but more people will be able to find the feature if you make it more self-describing.
| $( ".change" ).on("click", function() { | ||
| if( $( "body" ).hasClass( "dark" )) { | ||
| $( "body" ).removeClass( "dark" ); | ||
| $( ".change" ).text( "OFF" ); | ||
| } else { | ||
| $( "body" ).addClass( "dark" ); | ||
| $( ".change" ).text( "ON" ); | ||
| } | ||
| }); |
There was a problem hiding this comment.
Kudos on making this work!
| <script src= | ||
| "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"> | ||
| </script> |
| .change { | ||
| cursor: pointer; | ||
| border: 1px solid #555; | ||
| border-radius: 40%; | ||
| width: 20px; | ||
| text-align: center; | ||
| padding: 5px; | ||
| margin-left: 8px; | ||
|
|
||
| } |
I have added dark mode button and it is able to change the state ON and OFF.