@@ -27,9 +27,6 @@ const props = withDefaults(defineProps<ColorModeButtonProps>(), {
|
27 | 27 | color: 'neutral', |
28 | 28 | variant: 'ghost' |
29 | 29 | }) |
30 | | -defineSlots<{ |
31 | | - fallback(props?: {}): any |
32 | | -}>() |
33 | 30 | |
34 | 31 | const { t } = useLocale() |
35 | 32 | const colorMode = useColorMode() |
@@ -48,21 +45,17 @@ const isDark = computed({
|
48 | 45 | </script> |
49 | 46 | |
50 | 47 | <template> |
51 | | -<ClientOnly v-if="!colorMode?.forced"> |
52 | | -<UButton |
53 | | -v-bind="{ |
54 | | - ...buttonProps, |
55 | | - 'icon': props.icon || (isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light), |
56 | | - 'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'), |
57 | | - ...$attrs |
58 | | - }" |
59 | | - @click="isDark = !isDark" |
60 | | - /> |
61 | | - |
62 | | -<template #fallback> |
63 | | -<slot name="fallback"> |
64 | | -<div class="size-8" /> |
65 | | -</slot> |
| 48 | +<UButton |
| 49 | +v-bind="{ |
| 50 | + ...buttonProps, |
| 51 | + 'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'), |
| 52 | + ...$attrs |
| 53 | + }" |
| 54 | + @click="isDark = !isDark" |
| 55 | +> |
| 56 | +<template #leading="{ ui }"> |
| 57 | +<UIcon :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" class="hidden dark:inline" :name="appConfig.ui.icons.dark" /> |
| 58 | +<UIcon :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" class="inline dark:hidden" :name="appConfig.ui.icons.light" /> |
66 | 59 | </template> |
67 | | -</ClientOnly> |
| 60 | +</UButton> |
68 | 61 | </template> |