nativescript-vue

How can I read a CSS Variable in NativeScript using JavaScript


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.


Solution

  • 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.