Hello 
I’ve set an auto dark mode with:
@media (prefers-color-scheme: dark)
Everything works well except JS text colors interaction (set on the expertise list). In darkmode text, colors keep being updated with my lightmode colors variable. JS interraction don’t seems to be affected by “@media (prefers-color-scheme: dark)” Anyone got a solution? 
I’ve made a 1 min video to explain visually my issue here
Unexpected colors
Expected colors
Here is my site Read-Only
Here is my website link
That’s a cool idea however I don’t think interactions will support the preservation of your CSS classes. You can see here in dark mode, the CSS classes are overriding correctly [1] but the elements themselves have a style applied that is using an RGB color.
I have Génétique hovered in the screenshot, so AI générative is highlighted by your interaction but is showing rgb(0,0,0). [2]
Most likely, interactions is picking up the original color and then storing it for changes, but has lost the underlying variable connection and is therefore unaware of changes.
Your best options here are direct custom CSS using classes or attributes as the selectors, or else Javascript, or perhaps GSAP.
C’est une idée intéressante, cependant, je ne pense pas que les interactions prendront en charge la préservation de vos classes CSS. Vous pouvez voir ici en mode sombre, les classes CSS sont correctement appliquées [1] mais les éléments eux-mêmes ont un style appliqué qui utilise une couleur RGB.
J’ai survolé Génétique dans la capture d’écran, donc AI générative est mise en évidence par votre interaction mais affiche rgb(0,0,0). [2]
Très probablement, les interactions récupèrent la couleur d’origine puis la stockent pour les changements, mais ont perdu la connexion à la variable sous-jacente et ne sont donc pas au courant des changements.
Vos meilleures options ici sont d’utiliser du CSS personnalisé direct en utilisant des classes ou des attributs comme sélecteurs, ou sinon JavaScript, ou peut-être GSAP.
hi @Nicolas_Gavrilenko I have tested @media (prefers-color-scheme: dark) { ...} and it works as expected in WF.
Try it again, you may try to use !important but IMO it should work without. make sure that selectors works as expected, means style can’t be applied if you do not select it correctly.
BTW: in custom code you need only one <style> ... </style> it is not an issue but …
Thank you for your recommendations
Thank you Stan, I’m not sure to understand how it would solve my issue. Indeed, CSS text color works well, but JS text color doesn’t seem to be reactive to the darkmode.
If not already the case, I recommend you watch my small video to get a better understanding 
I’ve made a 1 min video to explain visually my issue here
_
Waiting to find a clean solution, I will change the opacity of text instead of colors to get a similar effect. But if someone has a great fix, I will be glad to try it.
hi @Nicolas_Gavrilenko I have watched you video before 
All I’m saying that you should revisit your CSS as it can be simple solution to select elements correctly.
where is your custom javaScript code that suppose to change font color? I can’t find it.
You can find my trigger JS as .div-project (inside my navbar component)
And the elements to style as .filter (again inside my navbar)
Styling my items with CSS would definitively solve the issue, but I don’t know how to get hovering trigger elements affecting other (non-nested) elements. 
Thank you very much for your help!
hi @Nicolas_Gavrilenko I’m 100% convinced you talk about CSS animations as there is no embed in your link component that contains custom code.
The only custom CSS I have found is in your project setting where you have set CSS only for body and there is no any @media query.
Hope you understand that if you do not set anything for prefers-color-scheme the website color scheme would not change. this means that even if client will have set system to dark website will not change.
That is why some websites offers light/dark theme switcher as option that change whole color theme.
Anyway, your approach is unusual as you are changing all manually means what I saw you have specific animation for each single nav link.
As @memetican mentioned WF doesn’t offer natively @media you have to use to make it work.
Your best bet will be clear up all settings in WF UI including animations and use ONLY CUSOM CSS.
You should also keep in mind that :hover doesn’t exist on mobile devices as they have touch instead. But I believe that this will be your next step to solve.
Good luck
@media (prefers-color-scheme: dark) query inside my global site head code.
Thank you for your help
I’ve made everything work using opacity instead of text color variable interaction (so the color variables are not broken by interactions). Not a clean solution, but working perfectly.
I’m sorry but I have no time to re-think and redesign your project make it more dynamic.
… if it works for you …
They are. Just as a note though, I think Stan was mislead by your mention of “JS interactions” which usually refers to custom interactions you’ve coded yourself in JS.
When you’re talking about Webflow interactions, I’d stick with that name or just “interactions”, and most people will know to look there specifically.
I haven’t unpacked your interactions, but the library Webflow is using is quite old and likely does not support CSS vars. However you might check to see if you are doing any kind of color-fade or opacity change on your colors inside of your interactions. If so, that would force the interactions JS to decouple from your CSS var, and work with your color in RGBA. It might be that if you avoid any impacts to your colors ( like a fade-in effect ) then it will preserve the CSS var, which would give you what you want.
You best approach here is to skip Webflow interactions and use GSAP or your own custom CSS/JS to achieve the highlighting, That’s the only way you’ll get the CSS var preservation you need.
true, my bad. Sorry. 
