Added Dark Mode to website #12 #17
Conversation
| var options = { | ||
| bottom: '64px', // default: '32px' | ||
| right: 'unset', // default: '32px' | ||
| left: '32px', // default: 'unset' | ||
| time: '0.5s', // default: '0.3s' | ||
| mixColor: '#fff', // default: '#fff' | ||
| backgroundColor: '#fff', // default: '#fff' | ||
| buttonColorDark: '#100f2c', // default: '#100f2c' | ||
| buttonColorLight: '#fff', // default: '#fff' | ||
| saveInCookies: false, // default: true, | ||
| label: '🌓', // default: '' | ||
| autoMatchOsTheme: true // default: true | ||
| } |
There was a problem hiding this comment.
@wajeehsheikh : Nicely done. These changes are are just superficial, but it would make the code cleaner:
- remove the inline comments as they are unnecessary and add no value to the
optionsobject. - indent the
optionsobject by 2 spaces:
var options = {
bottom: '64px',
right: 'unset',
left: '32px',
time: '0.5s',
mixColor: '#fff'
backgroundColor: '#fff',
buttonColorDark: '#100f2c',
buttonColorLight: '#fff',
saveInCookies: false,
label: '🌓',
autoMatchOsTheme: true
}There was a problem hiding this comment.
I see that you have included the issue number in the title of the pull request (PR), which is great, but it would be stupendous if you start referencing the issue in the PR description as well. https://help.github.com/en/github/managing-your-work-on-github/closing-issues-using-keywords
There was a problem hiding this comment.
I agree with your comment about indentation, however, I think the default values are helpful during the pull request stage. Once the code is added to the master and is included in a stable release, I'll remove them. Thanks!
| <script src="js/script.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.1/lib/darkmode-js.min.js"></script> |
There was a problem hiding this comment.
Do you think it might be less confusing to add these into a new file? Going for readability here.
There was a problem hiding this comment.
I think that's a great idea! I'll make the change and notify you.
|
This looks really great! The problem is that I believe it is inverting the page, which means the shades colors don't come out right. I'm pretty new to GitHub, so I'm not really sure how to add pictures, but the issue is pretty easy to replicate. Just enter the digits and generate. You can see what color is showing up. Then, press the dark mode button, and the shades change, but the digits don't. |
|
@varlevi @wajeehsheikh : I believe that would be an easy fix. According to the docs just adding the class |
This allows them to stay the same color even when in dark mode.
|
Alright. I added the darkmode-ignore class, which worked very well. Thanks! |
Hi,
Hope you like it.
Thank you
Wajeeh