Admin One dark mode is not working

Even if I got the right value but the toggling into white or dark mode is not working..

this is the console results

isEnabled.value: true
darkMode.js?t=1709541114046:15 body classes: 
DOMTokenList(9) ['m-0', 'font-sans', 'text-base', 'antialiased', 'font-normal', 'dark:bg-slate-900', 'leading-default', 'bg-gray-50', 'text-slate-500', value: 'm-0 font-sans text-base antialiased font-normal da…ate-900 leading-default bg-gray-50 text-slate-500']
0
: 
"m-0"
1
: 
"font-sans"
2
: 
"text-base"
3
: 
"antialiased"
4
: 
"font-normal"
5
: 
"dark:bg-slate-900"
6
: 
"leading-default"
7
: 
"bg-gray-50"
8
: 
"text-slate-500"
9
: 
"dark-scrollbars"
length
: 
10
value
: 
"m-0 font-sans text-base antialiased font-normal dark:bg-slate-900 leading-default bg-gray-50 text-slate-500 dark-scrollbars"
[[Prototype]]
: 
DOMTokenList
darkMode.js?t=1709541114046:16 documentElement classes: 
DOMTokenList [value: '']
0
: 
"dark"
1
: 
"dark-scrollbars-compat"
length
: 
2
value
: 
"dark dark-scrollbars-compat"
[[Prototype]]
: 
DOMTokenList
darkMode.js?t=1709541114046:29 Darkmode Status 
Storage {darkMode: '1', length: 1}
darkMode
: 
"1"
length
: 
1
[[Prototype]]
: 
Storage

this is the darkMode.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useDarkModeStore = defineStore('darkMode', () => {
  const isEnabled = ref(false)

  function set(payload = null) {
    isEnabled.value = payload !== null ? payload : !isEnabled.value

    if (typeof document !== 'undefined') {
      document.body.classList[isEnabled.value ? 'add' : 'remove']('dark-scrollbars')

      document.documentElement.classList[isEnabled.value ? 'add' : 'remove'](
        'dark',
        'dark-scrollbars-compat'
      )
    }

    // You can persist dark mode setting
    if (typeof localStorage !== 'undefined') {
      localStorage.setItem('darkMode', isEnabled.value ? '1' : '0')
    }
  }

  return {
    isEnabled,
    set
  }
})

This is the AuhtenticatedLayout.vue

<script setup>
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
import { ref } from 'vue'
// import { useRouter } from 'vue-router'
import { router } from '@inertiajs/vue3';
import menuAside from '@/menuAside.js'
import menuNavBar from '@/menuNavBar.js'
import { useDarkModeStore } from '@/Stores/darkMode.js'
import BaseIcon from '../Components/AdminOneComponents/BaseIcon.vue'
import FormControl from '../Components/AdminOneComponents/FormControl.vue'
import NavBar from '../Components/AdminOneComponents/NavBar.vue'
import NavBarItemPlain from '../Components/AdminOneComponents/NavBarItemPlain.vue'
import AsideMenu from '../Components/AdminOneComponents/AsideMenu.vue'
import FooterBar from '../Components/AdminOneComponents/FooterBar.vue'

const layoutAsidePadding = 'xl:pl-60'

const darkModeStore = useDarkModeStore()

// const router = useRouter()

const isAsideMobileExpanded = ref(false)
const isAsideLgActive = ref(false)

router.on('navigate', () => {
    isAsideMobileExpanded.value = false
    isAsideLgActive.value = false
})

const menuClick = (event, item) => {
    if (item.isToggleLightDark) {
        darkModeStore.set()
    }

    if (item.isLogout) {
        router.post(route('logout'))  
    }
}
</script>

<template>
    <div :class="{
        'overflow-hidden lg:overflow-visible': isAsideMobileExpanded
    }">
        <div :class="[layoutAsidePadding, { 'ml-60 lg:ml-0': isAsideMobileExpanded }]"
            class="pt-14 min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100">
            <NavBar :menu="menuNavBar" :class="[layoutAsidePadding, { 'ml-60 lg:ml-0': isAsideMobileExpanded }]"
                @menu-click="menuClick">
                <NavBarItemPlain display="flex lg:hidden"
                    @click.prevent="isAsideMobileExpanded = !isAsideMobileExpanded">
                    <BaseIcon :path="isAsideMobileExpanded ? mdiBackburger : mdiForwardburger" size="24" />
                </NavBarItemPlain>
                <NavBarItemPlain display="hidden lg:flex xl:hidden" @click.prevent="isAsideLgActive = true">
                    <BaseIcon :path="mdiMenu" size="24" />
                </NavBarItemPlain>
                <NavBarItemPlain use-margin>
                    <FormControl placeholder="Search (ctrl+k)" ctrl-k-focus transparent borderless />
                </NavBarItemPlain>
            </NavBar>
            <AsideMenu :is-aside-mobile-expanded="isAsideMobileExpanded" :is-aside-lg-active="isAsideLgActive"
                :menu="menuAside" @menu-click="menuClick" @aside-lg-close-click="isAsideLgActive = false" />
            <slot />
            <FooterBar>
                Get more with
                <a href="https://tailwind-vue.justboil.me/" target="_blank" class="text-blue-600">Premium version</a>
            </FooterBar>
        </div>
    </div>
</template>@/Stores/darkMode.js