CSS Change Link Color Using @media Query-CodePudding

I am trying to change the color of some links when the window is resized down. When the window is resized down below 1000px, the background changes to a dark theme and I need the link text to change to white. This is what I have tried and it is not working:

 @media (max-width: 1000px) {
    :root {
      --building-color1: #000;
      --building-color2: #000;
      --building-color3: #000;
      --building-color4: #000;
    --window-color1: #777;
    --window-color2: #777;
    --window-color3: #777;
    --window-color4: #777;
    }
    .sky {
      background: radial-gradient(
          closest-corner circle at 15% 15%,
          #ccc,
          #ccc 20%,
          #445 21%,
          #223 100%
        );
    }
      a {
        color: #fff;
      }
      
      a:visited {
        color: #fff;
      }
      
      a:hover {
        color: #fff;
      }
      
      a:active {
        color: #fff;
      }
  }

Anyone have any suggestions for how to make this work? I thought I could call the element and just set the colors, but it didn't work.

CodePudding user response：

add a seperate custom prop for your link color and change it in the media query like you did for the other ones (--window-color, --building-color).

also, to make your code a bit more concise I suggest using the :where() pseudo-function.

a, a:where(:hover, :visited, :active) {
   color: var(--link-color)
}