<script lang="ts" setup>
import { useQuasar } from 'quasar'
import { ref, watch } from 'vue'
import { mdiThemeLightDark, mdiWeatherSunny, mdiWeatherNight } from '@quasar/extras/mdi-v7'

const $q = useQuasar()
const status = ref($q.dark.mode)

function getThemeIcon(v: boolean | 'auto') {
    if (v === 'auto') return mdiThemeLightDark
    else return v ? mdiWeatherNight : mdiWeatherSunny
}

watch(status, $q.dark.set)

</script>
<template>
    <div style="width: 88px;"> 
        <q-toggle indeterminate-value="auto" v-model="status" toggle-indeterminate />
        <q-icon :name="getThemeIcon(status)" size="sm"></q-icon>
    </div>
</template>
<style></style>