switch icon can not update when theme is Dark

[smilingovo]

Describe the bug

When I use the vueuse tool library to perform a theme's localstorage response, the icon does not update properly when the theme is dark by default

Steps to reproduce

<n-switch v-model:value="isDark" @update:value="toggleTheme" size="medium"> <template #icon> <n-icon> <i class="bi" :class="isDark ? 'bi-sun-fill' : 'bi-moon-fill'"></i> </n-icon> </template> </n-switch>

Link to minimal reproduction

none

System Info

"system":"windows10"
"naive-ui": "^2.38.1"
"@vueuse/core": "^10.9.0"

Used Package Manager

pnpm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[thibodeauxjl]

Have you tried:

<n-icon> <i class="bi" :class="{ 'bi-sun-fill': isDark, 'bi-moon-fill': !isDark }"></i> </n-icon>

That is assuming isDark is a Boolean. If isDark is a string, then you will need more logic. For instance if isDark = 'Yes', then you will need to implement that isDark === 'Yes' or isDark !== 'Yes'

Also, the Switch API offers a default-value prop. Which by default is set to false. I'd take a look at that as well.

As well as the example integration for customizing icons:

<n-switch v-model:value="active" size="large">
    <template #checked-icon>
      <n-icon :component="ArrowForwardOutline" />
    </template>
    <template #unchecked-icon>
      <n-icon :component="ArrowBackOutline" />
    </template>
</n-switch>