Load styles in Ionic dynamically from a file downloaded via http

I just did this in our Ionic Vue app. I think your problem is that you are doing setStyle instead of setProperty.

Here is what we are doing:

private configureColors(group: GroupModel): void {
    const rootElm = document.querySelector(':root') as HTMLElement

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

private removeColors(group: GroupModel): void {
    const rootElm = document.querySelector(':root') as HTMLElement

    group.colors.forEach(color => rootElm.style.removeProperty(color.name))
}

With our colors in this format:

{
    "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"
        }
    ]
}

We save out the custom colors in local storage and then set them every time the app launches.

In regards to the logo, we download it as a blob and save that out in local storage as a Blob itself. We then display it using URL.createObjectURL. We went with this over saving the logo/image to the file system as it’s simpler and doesn’t require a native plugin to interact with the file system.

Here is the full code. I know it is Vue, but you should give you some idea on how to implement.

<template>
    <div v-if="hasLogo && blobUrl != ''" class="mb-4 flex justify-center">
        <img
            class="max-h-16"
            :src="blobUrl"
            :alt="`${primaryGroup?.name} logo`"
            @load="handleLoaded"
        />
    </div>
</template>

<script setup lang="ts">
import { useGroupManager } from '@/groups/group-manager'
import { useGroupStore } from '@/stores/group-store'
import { computed, ref, watch } from 'vue'

const groupStore = useGroupStore()

const blobUrl = ref('')

const primaryGroup = computed(() => groupStore.groups.primary())
const hasLogo = computed(() => primaryGroup.value?.logo.url != null)

watch(
    () => primaryGroup.value?._is_downloading_logo,
    async isDownloading => {
        if (!isDownloading) {
            getLogo()
        }
    },
    { immediate: true },
)

async function getLogo(): Promise<void> {
    const data = await useGroupManager().getLogo() // A helper method to get blob from local storage

    if (data == null) {
        return
    }

    blobUrl.value = URL.createObjectURL(data)
}

function handleLoaded(): void {
    if (blobUrl.value === '') {
        return
    }
    
    // Clearing this doesn't cause the image to disappear. It stays rendered.
    URL.revokeObjectURL(blobUrl.value)
}
</script>