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>
:fist_right:t3::fist_left:t3: