Buttons do not respect dark/light switch

[GeorgEchterling]

Buttons currently only support the user agent's preferred color scheme. They should also support the recently added theme toggling.

[argyleink]

confirmed. ty for logging, will get on it!

[GeorgEchterling]

I looked into it some more and it looks like only two lines in buttons.css need to be changed.

• --_text: initial should be --_text: var(--text-2) to match the current non-switch settings. Otherwise, initial will refer to the html element's color, which may not match the locally selected color scheme.
• I don't know what --_accent: initial should be changed to. Afaict, _accent isn't being set anywhere.

[argyleink]

i fixed it in my local demo by reordering my imports:

HAS BUG:

@import 'open-props/style';
@import 'open-props/normalize';
@import 'open-props/switch/light';
@import 'open-props/switch/dark';
@import 'open-props/buttons';

FIXED:

@import 'open-props/style';
@import 'open-props/normalize';
@import 'open-props/buttons';
@import 'open-props/switch/light';
@import 'open-props/switch/dark';

This way the overrides from the switch style win based on cascade. gonna close this assuming it fixes your issue too. lemme know!

[GeorgEchterling]

This doesn't quite fix my issue. Looks like my issue is more specific than what I initially described:

• I have a global data-theme on my html element, which a user can change using a theme toggle.
• I have a local data-theme="dark" on my navigation, which should override the global theme for just that element. This works for everything I've tried except for the buttons' text color. (Although I haven't tried much, so there may be other parts that don't work with this setup.)

I don't know if the theme switch is intended to be used in this way. Maybe it was only intended for the root element?

[argyleink]

yeah, def intended for root propagating all the way throughout. BUT!

you could just reach in and write a button color to fix this? (maybe you've already done that) you shouldnt need to battle Open Props styles, they're wrapped in :where(), so hopefully it's easy to patch for your use case? 🙂