Is there any way to access to a custom variable through dot notation (or bracket) instead of doing the getComputedStyle and getPropertyValue methods? In example (I know it's not the best way):
let darkColor = getComputedStyle(document.documentElement).getPropertyValue('--dark-color');
console.log(darkColor):root {
--dark-color: black;
}Is there any way to dont use those methods and write something like document.documentElement.style['--dark-color']? (this one doesn't work, but just for getting the idea).
I am curious at it because you can access to regular attributes like color or background-color through the dot notation but not for custom variables.
You can get the applied custom properties only using getComputedStyle and getPropertyValue.
element.style[someProperty] and getComputedStyle(element)[someProperty] are not equivalent.
element.style gives you the property directly assigned to the element (not what is currently applied, which can be different).
And your :root { --dark-color: black; } is applied through the stylesheet and not at the element directly.
getComputedStyle returns a CSSStyleDeclaration where the values of the properties reflect the result of all applied rules. To get the correct custom property you need getComputedStyle, so you can't get rid of that.
For getComputedStyle(element).getPropertyValue(name) compared to getComputedStyle(element)[name] part.
The dot notation or array access is not possible for custom properties. That access is given by this part of the specification:
For each CSS property
propertythat is a supported CSS property, the following partial interface applies where camel-cased attribute is obtained by running the CSS property to IDL attribute algorithm forproperty.partial interface CSSStyleDeclaration { [CEReactions] attribute [LegacyNullToEmptyString] CSSOMString _camel_cased_attribute; };The camel-cased attribute
attribute, on getting, must return the result of invokinggetPropertyValue()with the argument being the result of running the IDL attribute to CSS property algorithm for camel-cased attribute.
And supported CSS property is specified as:
[…] The term supported CSS property* refers to a CSS property that the user agent implements, including any vendor-prefixed properties, but excluding custom properties. […]