[bug] demo doesn't work in IE11

[Hulkmaster]

Demo app doesn't work in IE11, guess same goes for IE9+ (as far as i understood you use css-variables and they are not supported by IE)

[TheAlexLichter]

Probably because the media query, which is being watched by the module, isn't available on IE at all according to MDN.

IE doesn't support color modes so nothing fancy the module can do here regarding automatic detection 🤷🏻‍♂️

Manual switching not working in IE might be a fixable thing though

[atinux]

Ah dammit I used css variables, I will need to update the example to not depend on it, any PR more than welcome 👍

[bdrtsky]

Or just don't use IE 🧐

[Hulkmaster]

@bdrtsky When client says "support IE11" - its pretty hard to get rid of it :)

The reason i tested it - because it is written to support IE9+, and we had a problem with it on our project - wondered if the problem was solved somehow :)

[bdrtsky]

@Hulkmaster you can use anything, CSS variables is just an option that demo is using. It's up to you use CSS variables or stick with good ol' stylesheet cascade. I guess you were confused by example, and thought CSS variables is the only option.

If you need more detailed explanation how to use it without CSS variables, I can give you a hint. Probably will be faster than wait demo rewriting.

[Hulkmaster]

i really misunderstood about css-variables (my bad)

but we have next problem: instead of dark/light theme we have 9*9*9 themes (layout*color scheme*something else)

and we have to support IE11 so we had 3 choices:

1. css vars (no ie11)
2. build giant css and use css cascading (too big)
3. build 9*9*9 css files and request them on demand (takes a lot of time to build)

and i was wondering if someone managed to find better solution :)

[bdrtsky]

So you have 9 color schemes/modes, right? And you want to reuse each of this color mode with 9 layouts? If CSS vars approach is not working for you (which is absolutely perfect especially for your use case), then you need to figure out CSS architecture to reuse this schemes in each layout, so you could declare them only once. It could be custom utility classes for example. Or you can use Tailwind plugin.

[Hulkmaster]

we need to support IE11, so no css vars there are not much approaches actually you either create complex rules structure (with scss mixins or whatever) - but then you have to build 1 giant css file either you build 9*9*9 variants :)

no silver bullet

what you suggest are libraries, but they also use one of these approaches

[bdrtsky]

Actually I do not suggest any libraries. I suggest you to abstract your theme design tokens in separate entities. Can you describe your use case with more details? It's actually pretty interesting .

[Hulkmaster]

the problem is: we allow user to choose 1 out of 9 layouts/color palettes/styles then on certain pages only specific combination should be used

[atinux]

Added the help-wanted label if anyone wants to replace the CSS vars.

[Suven]

@Hulkmaster: Maybe just a hint for direction: in less/scss, when extending classes, it will generate one big selector, with all those combined rules. In other words: It generates a single replaceable selector that you could use to centrally switch colors for all usages, without replacing the complete css. Maybe that's a strategy you could adopt (even without less). Here is a quick example:

Input

.fg-color {
  color: red;
}

.my-box {
  &:extend(.fg-color);
  transform: scale(2);
}

.other-box {
  &:extend(.fg-color);
  transform: scale(5);
}

Output

/** This single selector could be moved into a dark.css or bright.css
and so on and you swap css-files depending on your theme **/
.fg-color, .my-box, .other-box {
  color: red;
}
.my-box {
  transform: scale(2);
}
.other-box {
  transform: scale(5);
}

I used that approach for white-label-products in the past, where some colors could be swapped via configuration / js in real time and it always served me good, although I would always prefer css-vars nowadays where applicable and I feel like this would be much out of scope from this project.

[Hulkmaster]

That approach is, basically, #2 from https://github.com/nuxt-community/color-mode-module/issues/11#issuecomment-621804193

Build every single possibility in one css file, but then it will be too big

[Suven]

Not really. With the shown approach you are able having one big universal/theme-agnostic css-file which contains everything except the bg/fg-colors and then one css file per theme, which only contains the selectors for your colors.

Sure, it is not as comfortable as having css-vars, but in the end that's the reason they have been introduced.

Edit: By the way. Under the assumption that a user will stick to one theme, having one big seperate css-file per theme is the most efficient thing you can ship (when not using css-vars). But anyway.. Just wanted to show something you could do, but if that's not suitable to you, thats fine too (:

[Hulkmaster]

Sorry, maybe i misunderstood your suggestion, but from your example i understood that you either suggest to build (in our case) individual css file for each situation, based on vars (thats what we are currently doing), or i hadn't understood

[atinux]

I think we can use a ponyfill for CSS vars: https://github.com/jhildenbiddle/css-vars-ponyfill

[shtinmn]

Hello, @Atinux!

I have the same problem.

Сolor-mode doesn't work for me in ie11 (version 11.0.9600.19230)

I found out that at least shorthand-properties and for...of doesn't work in ie.

I think the problem is that script.min.js imported(using fs.ReadFile (ScriptPath, 'utf-8') ) directly into the body ignores babel in nuxt.config.js

I found a solution to this problem by taking a script.js and transforming it with https://babeljs.io/repl ( with ie11 support ) and then pasting the result into a file script.min.js

I hope you pay attention to this problem and convert the file script.js or point me to my error ( perhaps via nuxt.config it is possible to convert this file yourself)

[atinux]

Hi @shtinmn

We are actually using rollup to minify the script.js, see https://github.com/nuxt-community/color-mode-module/blob/master/rollup.config.js

Feel free to open a PR to configure babel plugin to support IE11.