-
Notifications
You must be signed in to change notification settings - Fork 122
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: prefers-color-scheme: dark feature implement. Issue #645 #934
base: master
Are you sure you want to change the base?
Conversation
super, I'll look at this after lunch |
It looks like this sets some default dark colours for the background and text inside the observable that watches the display options and sets the corresponding CSS properties. This means that the display options modal can look misleading: with dark mode on, if you select a white background you instead get a dark one. If the student was looking to override their OS's preference, that would be impossible. It also doesn't deal with I think that when the display options modal is shown, the defaults should be set based on the current value of The default values can be given in CSS by something like this: :root {
--background-colour: #ffffff;
--text-colour: #000000;
}
@media (prefers-color-scheme: dark) {
--background-color: #000000;
--text-colour: #ffffff;
} When the JS code sets properties on the |
Right, that's what I tried at first. I just tied choosing specific elements and setting their colours manually. I forgot that media queries can overwrite global variables. I overthinked this issue perhaps. |
… in javascript according to it
It now should change default values which can be seen in a modal and only uses default if default is chosen accordingly. |
this also sets --main-colour and --main-darker to significantly darker shades of the same hue as the light scheme. There are lots of other bits that need to change in dark scheme, including but not limited to: * links (and `btn-link` buttons) * buttons * input boxes with feedback styling
Thanks, I've tried it and it now seems to work how I intended. It turns out the defaults are set in There are lots of other colours that need to change in dark mode, including but not limited to:
If you have any more time, please try to fix some of these. Use the accessibility inspector to aim for AAA contrast ratios, and ensure it's at least AA. |
I am trying to reinstall the editor, it's still doesn't work but I will try as soon as I do |
#645
If media property matches of prefers-color-scheme: dark is true and CSS variables are set to defaults, dark background colour and white text colour will be applied. If the CSS variables are not default (customized by user), dark background or/and white text will not be applied (relatively to what was customized).