Skip to content
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

Implement html color-scheme meta tag and remove custom scrollbar #59

Closed
mxdanger opened this issue May 15, 2021 · 8 comments
Closed

Implement html color-scheme meta tag and remove custom scrollbar #59

mxdanger opened this issue May 15, 2021 · 8 comments
Labels
enhancement New feature or request
Projects

Comments

@mxdanger
Copy link
Contributor

mxdanger commented May 15, 2021

Describe the change you'd like:

  1. Add the following to the header of the website to get theme aware browser UA styling for UI input controls such as checkboxes, dropdowns, and scrollbars.
  2. The custom webkit scrollbar styling should be removed. Additional testing may need to be done to ensure this doesn't negatively effect users on Linux versions of Firefox.
<meta name="color-scheme" content="dark light">

Order of dark light means that dark is default if no theme is detected, the same as how the prefers-color-scheme CSS is currently set up.

Additional context:
https://web.dev/color-scheme/

@mxdanger mxdanger added the enhancement New feature or request label May 15, 2021
@RiedleroD
Copy link
Contributor

You forgot a tiny little detail: browser compatibility. Scroll down a bit & see that none of the variants work on more than 90% of all devices.

@RiedleroD
Copy link
Contributor

besides the fact that I'm very sceptical of handing the responsibility of styling elements down to the system.

@Gusted
Copy link
Member

Gusted commented May 15, 2021

There is 2 things here, Quite frankly the one Riedler has pointed.

  1. I see you've mentioned that this is a native dark mode, it isn't. It's pure to style certain elements + the scrollbar.
  2. Don't trust the browsers. I've see chromium's dark mode development, I don't trust it to let chromium users see that mixed with our dark mode.
  3. It might be standardized for Safari/Chromium, but it still has some problems, see: Pages with color-scheme: dark have too low link color contrast whatwg/html#5426

^^ So that means that Chromium/Safari get's to see a mixed dark mode and we somehow have to resolve around the problem with other CSS engines to not be affected by this. I really love new inventions and that such things actually get standardized instead of just pushing it down to users/developers to adopt to, but it's at the moment not possible to have this implemented well holding compatibility.

@Gusted Gusted closed this as completed May 15, 2021
@mxdanger
Copy link
Contributor Author

besides the fact that I'm very sceptical of handing the responsibility of styling elements down to the system.

We talked about this on the Discord, but I just want to let you know that this issue request is not anything you are suggesting. Using this option to let the browser know the website supports dark mode changes the default UA styling, it does not override any of the existing styling. As this website already has its own styling the only elements this change would affect, would be the native input elements like I mentioned such as checkboxes, dropdowns, and scrollbars.

The only potential compatibility issue is that users on old versions of Chromium would get white scrollbars instead of the website's custom scrollbar. Use GitHub for example, they already support this feature and it's a non-issue.

@mxdanger
Copy link
Contributor Author

You forgot a tiny little detail: browser compatibility. Scroll down a bit & see that none of the variants work on more than 90% of all devices.

This feature has 84% browser support. The other variants that you mentioned are deprecated, which you may have been unaware of.

@Gusted
Copy link
Member

Gusted commented May 16, 2021

As this website already has its own styling the only elements this change would affect, would be the native input elements like I mentioned such as checkboxes, dropdowns, and scrollbars.

That's still the same problem I see, why partially let the system handle this and the other half let us style it with other non-color properties.

The only potential compatibility issue is that users on old versions of Chromium would get white scrollbars instead of the website's custom scrollbar.

It was rather a draft change, it seems like scrollbar wasn't originally covered in the css-color-adjust-1 and was still up to discussion so far I can see the history of the document with chromium source code. As it's still a draft and any comparability can change any time and chromium don't hassle to just remove the old behavior. I can implement it for now and see how things settle, but if causing me to write workarounds for workarounds the thing will get removed and Il let this draft get to a level-1 version before considering things again.

Regards,
Gusted

@Gusted Gusted reopened this May 16, 2021
@Gusted
Copy link
Member

Gusted commented May 18, 2021

See, 9953239 in it will be working in combination of the upcoming user settings.

@Gusted Gusted closed this as completed May 18, 2021
@vednoc
Copy link
Member

vednoc commented May 18, 2021

@Gusted I'm going to reopen it and have it close automatically once changes are merged and live in production.

@vednoc vednoc reopened this May 18, 2021
@vednoc vednoc closed this as completed in 9953239 May 22, 2021
@vednoc vednoc added this to Done in Roadmap May 29, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Done
Roadmap
  
Done
Development

No branches or pull requests

4 participants