THEME- Can I change the main.ts

Ionic Framework Ionic Vue
1

Can I change the main.ts in Vue framework to the user to use own theme. This is the system: In the theme folder there is a file"themeConfig.json". The main.ts reads the file and gets the theme variable and sets the theme to like if the theme variable is “mytheme”, includes mytheme.css. Can you configure the file.

2

You should be able to read in the JSON file and configure the theme at runtime. I actually just did this but with the color variables coming from our backend API.

The colors from our API look like this:

{
    "colors": [
        {
            "name": "--ion-background-color",
            "value": "#f7fdff"
        },
        {
            "name": "--ion-background-color-rgb",
            "value": "247, 253, 255"
        },
        {
            "name": "--ion-color-primary",
            "value": "#2679ac"
        },
        {
            "name": "--ion-color-primary-rgb",
            "value": "38, 121, 172"
        },
        {
            "name": "--ion-color-primary-shade",
            "value": "#0e4567"
        }
    ]
}

Then in our app during runtime:

const rootElm = document.querySelector(':root') as HTMLElement

colors.forEach(color => rootElm.style.setProperty(color.name, color.value))