css variables defined under :root could not be found？

Question

:root{
--errorColor: #ff665d;
}
::-webkit-scrollbar-thumb {
    /* --errorColor is not defined */
    background-color: rgba(var(--errorColor), 0.8);
}

demo: https://codepen.io/ZeronoFreya/pen/VwBQarJ

What should I do?

Thank you for your help, I am a little confused about the syntax of scss and css

(I have voted to reopen because the problem being experienced is not just about how to set the opacity - nor was the problem to do with a variable being undefined). — A Haworth, Jan 22 '23 at 15:13

score 2 · Accepted Answer · answered Jan 22 '23 at 14:56

Don't believe everything you read!

--errorColor is defined, but it seems that the changing of background in that pseudo element does not work unless the scrollbar is set to auto (I haven't yet found a definitive reference for this). You could test this out without use of a CSS variable, e.g. try setting with background-color: red.

However, you have another problem which is that the format for the background-color isn't going to work with that hex code color (see answer from @BernardBorg) so use an rgb setting instead.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     :root {
      --errorColor: #ff665d;
      --errorColor: 255, 102, 93;
    }
    
    div {
      width: 300px;
      height: 300px;
      border: 1px red solid;
      overflow: auto;
    }
    
    ::-webkit-scrollbar-thumb {
      background-color: rgba(var(--errorColor), 0.8);
    }
    
    ::-webkit-scrollbar {
      overflow: auto;
    }
  </style>
</head>

<body>
  <div id="div"></div>
  <script>
    let div = document.querySelector("#div")
    let str = ""
    for (let i = 0; i < 100; i++) {
      str += `<p>${i}</p>`
    }
    div.innerHTML = str
  </script>
</body>

</html>

You can also set `appearance: none;` to the scrollbar. Like many default elements (button for example) you need to disable the appearance to be able to style it (or define any other CSS). I still think it's a duplicate question because nowhere in the question the OP is asking about how to style scrollbar but he's trying to use CSS variable with opacity which is what people will see when finding such question. If the question is edited to include the scrollbar part we can also find many dupe here: https://www.google.com/search?q=style+scrollbar+with+css+site%3Astackoverflow.com — Temani Afif, Jan 22 '23 at 20:43
I get your point, but my worry was that the OP was focused on the CSS variable not being defined, when in fact it was so there needed to be some point made on that. Quite understand if you close it again! Incidentally, do you know why browsers can say a variable is undefined when it is in fact defined? — A Haworth, Jan 23 '23 at 07:27

Bernard Borg · Answer 2 · 2023-01-23T13:36:14.217

rgba(hexcode, 0.8) is invalid CSS. You could do the following instead;

:root{
    --errorColor: 255, 102, 93;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(var(--errorColor), 0.8);
}

Source

I spent a while trying to figure out why the background-color wasn't getting applied to the scrollbar thumb, but it seems someone else has figured it out before me. Please refer to @AHaworth's answer and @TemaniAfif's comment on his answer

(setting appearance: none or overflow: auto on ::webkit-scrollbar)

Extra note: if you want the colour to only apply to the div's scrollbar you can do

#div::-webkit-scrollbar {
    appearance: none;
}

#div::-webkit-scrollbar-thumb {
    background-color: rgba(var(-errorColor), 0.8);
}

css variables defined under :root could not be found？

2 Answers2