I use CSS Variables in my NativeScript-Vue App, as described in the official documentation. I am looking for a way to read the value of a variable using JavaScript. Since there is no real browser engine, the established way doesn't work.
Add a comment
|
2 Answers
There is not much documentation, but there actually is a method mentioned in the API documentation: Style.getCssVariable(name). Using this method you can read CSS Variables, defined in the app.[s]css like this:
const color = this.$root.nativeView.style.getCssVariable('--color-primary')
console.log(color); // e.g. '#FF0000'
I would have expected this to also work on this.$el, but for some reason, this will only return null in my setup, allthough the variables are in the global scope and available in the style of the very same component. Maybe someone else can clarify, why this is.
Comments
in app.css
.main{
--primary: #02AC46;
--secondary: #ED7200;
}
in any .css
background-color: var(--primary);
1 Comment
tillsanders
This is correct, but the actual question was how to read CSS Variables using JavaScript.