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.

Sign up for GitHub

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

Jump to bottom

[lumo] Dark palette is unusable in polyfilled browsers #1702

Open
jouni opened this issue Oct 31, 2018 · 0 comments
Open

[lumo] Dark palette is unusable in polyfilled browsers #1702

jouni opened this issue Oct 31, 2018 · 0 comments
Labels
known issue Known issue that can't be easily fixed theme
Projects
vaadin-core

Comments

@jouni
Copy link
Member

jouni commented Oct 31, 2018

It’s not possible to use the dark palette in browsers that do not have native support for CSS Custom Properties.

Applying theme="dark" on the <html> element does not work even if you include the lumo-color (or lumo-color-legacy) style module in the global scope.

For example, this works in all other supported browsers except IE11:

<html theme="dark">

  <link href="vaadin-lumo-styles/color.html" rel="import">

  <custom-style>
    <style include="lumo-color"></style>
  </custom-style>

</html>

ShadyCSS seemingly only polyfills custom properties inside the exact html selector, and ignores all other selectors like html[theme="dark"] and html, [theme="dark"]. Currently the lumo-color style module assumes [theme~="dark"] would work when applied on the document root element.

So in order to get dark palette working in the global scope in IE11, we need to include a separate style module which overrides the color properties for the html selector.

For example:

<custom-style>
  <style include="lumo-color lumo-dark"></style>
</custom-style>

/* 
Assuming the "lumo-dark" style module has the following content:

html {
  /* The dark palette */
  --lumo-base-color: hsl(214, 35%, 21%);
  ...
}
*/

It basically requires us to copy-paste the dark palette custom properties into an additional style module.

We can choose to make this an opt-in on top of the currently documented way of using <html theme="dark"> or we can update the documentation to show only this one way which works everywhere but is more cumbersome to implement if you want to provide a toggle for the end user.

We should try to align how the color palettes work in the Lumo and the Material theme. Currently they are structured differently, and the dark palette for global scope is not working in the Material theme either.

Originating issue: https://github.com/vaadin/bookstore-starter-flow/issues/55
@vaadin-bot vaadin-bot transferred this issue from vaadin/vaadin-lumo-styles May 19, 2021
@vaadin-bot vaadin-bot added known issue Known issue that can't be easily fixed theme labels May 19, 2021
@web-padawan web-padawan changed the title Dark palette is unusable in polyfilled browsers [lumo] Dark palette is unusable in polyfilled browsers May 20, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
known issue Known issue that can't be easily fixed theme
Projects
No open projects
vaadin-core
  
📬  Inbox
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jouni @vaadin-bot