Why are the colour variables of the dark theme duplicated?

[jesusfj710]

So, I was doing some research of how to change the colours of the theme and I found that we those are define in these files:

• /assets/css/core/theme-vars.css

  .dark {
    --theme: rgb(29, 30, 32);
    --entry: rgb(46, 46, 51);
    --primary: rgb(218, 218, 219);
    --secondary: rgb(155, 156, 157);
    --tertiary: rgb(65, 66, 68);
    --content: rgb(196, 196, 197);
    --hljs-bg: rgb(46, 46, 51);
    --code-bg: rgb(55, 56, 62);
    --border: rgb(51, 51, 51);
  }

• /layouts/partials/head.html

    @media (prefers-color-scheme: dark) {
        :root {
            --theme: rgb(29, 30, 32);
            --entry: rgb(46, 46, 51);
            --primary: rgb(218, 218, 219);
            --secondary: rgb(155, 156, 157);
            --tertiary: rgb(65, 66, 68);
            --content: rgb(196, 196, 197);
            --hljs-bg: rgb(46, 46, 51);
            --code-bg: rgb(55, 56, 62);
            --border: rgb(51, 51, 51);
        }
   ....
    }

I have play a little with the first values and those are taked into account, but no the second ones.

Any idea @adityatelange?

[adityatelange]

Case where javascript is disabled in browser and owner has set default theme to auto, we use browser set choice for user.

[adityatelange]

Notice the noscript tag

[jesusfj710]

Okay, that makes sense.

So, when we arrive to the web for the first time, we get the light colors by the css. Then if you have JS enabled, you'll use the ones defined on the theme-vars.css. If you have JS disabled, the browser will use the ones defined in the partial.

Makes sense now. I didnt see the noscript tag.

In case I would like to do some changes in the color, I would have to change all of them, right?