Comments (18)
Or just don't use IE π§
from color-mode.
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
from color-mode.
Ah dammit I used css variables, I will need to update the example to not depend on it, any PR more than welcome π
from color-mode.
@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 :)
from color-mode.
@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.
from color-mode.
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:
- css vars (no ie11)
- build giant css and use css cascading (too big)
- 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 :)
from color-mode.
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.
from color-mode.
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
from color-mode.
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 .
from color-mode.
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
from color-mode.
Added the help-wanted
label if anyone wants to replace the CSS vars.
from color-mode.
@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.
from color-mode.
That approach is, basically, #2 from #11 (comment)
Build every single possibility in one css file, but then it will be too big
from color-mode.
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 (:
from color-mode.
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
from color-mode.
I think we can use a ponyfill for CSS vars: https://github.com/jhildenbiddle/css-vars-ponyfill
from color-mode.
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)
from color-mode.
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.
from color-mode.
Related Issues (20)
- allow disabling css transitions while changing color scheme
- Get color-theme while server render HOT 2
- Forced color mode incorrect timing
- Adding class "theme-red" to <html> breaks color-mode
- Load color-mode already in spa template
- helper.getColorScheme is not a function error when trying to use the module HOT 7
- Can I use only data value?
- Selected Color dosn't save on LocalStorage
- Question about demo asset regarding license HOT 2
- On light mode background-color is transparent HOT 1
- Document how to force color mode dynamically (e.g. from a useFetch response) HOT 6
- Color of element stuck in 1 color.
- Reactive `useColorMode()` value HOT 1
- tailwind module integration breaks dark mode HOT 7
- Support set html attribute HOT 1
- Why is my nuxt app color mode configuration not working with the "prefrence : light" ? HOT 3
- Should there be a way to force a color mode in the root of the app?
- How to set a theme in arc design
- feat: link script in head for CSP 'self' compliance in v3 HOT 4
- TypeError: Mt.getColorScheme
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from color-mode.