Kevin Powell - Community•2y ago

media query based on an attribute or media query within an a selector

Hey everyone, I have light/dark mode setup on my website. I'm also trying to handle prefers-color-contrast: less and prefers-color-contrast: more everything is working as expected but one thing! if I go to my site when my OS system theme is light, I get my website in light theme and vice versa if I go there when my OS is set to dark, I get my website in dark mode... however, if I click the theme changer on my website it doesn't change my prefers-color-scheme because that's set by my OS settings.

1 Reply

NazCodeland•2y ago

So, to be able to activate prefers-contrast: less and prefers-contrast: more when I click the site-wide theme changer, I need to somehow do this

@media (prefers-contrast: less) and ((prefers-color-scheme: dark) or ([color-scheme='light'])) {

@media (prefers-contrast: less) and ((prefers-color-scheme: dark) or ([color-scheme='light'])) {

or something like this

[color-scheme='light'] {
  @media (prefers-contrast: less) and (prefers-color-scheme: light) {
    .menu__links li a {
      color: canvasText;
      font-weight: 600;
      font-size: 4rem;
    }
  }
}

[color-scheme='light'] {
  @media (prefers-contrast: less) and (prefers-color-scheme: light) {
    .menu__links li a {
      color: canvasText;
      font-weight: 600;
      font-size: 4rem;
    }
  }
}

Thinking about it, I think I need to do this with JS Actually figured out something that's css only

Gaming

Programming

media query based on an attribute or media query within an a selector