Html – Can't find out how to create a switcher to dark/light mode

I’m creating a simple gallery project. I want it to have a button that changes the theme from light (default) to dark. I am using tailwind css, pinia and vuejs3.
I will try to send relevant parts of my code to see if anyone can help me.

My web page currently looks like the attached image.

My whole code is inside one div, like this:

<template>
  <div :class="{ 'bg-light': isLightTheme, 'bg-dark': !isLightTheme }">
   <!-- code -->
  </div>
</template>

to change the theme, I have a button in my navbar:

          <button @click="toggleThemeMode">theme</button>

(this button is inside the div I wrote previously)

In my script, I am importing a css file, the store file (from pinia) and another non related component:

import { useStore } from "../store";
import "../assets/css/themes.css";

My computed, in exports, looks like this:

 computed: {
    isLightTheme() {
      return this.$pinia.state.themeMode === "light";
    },
  },

This is a part of my methods:

   toggleThemeMode() {
      this.$pinia.actions.toggleThemeMode();
    },

This is all for my gallery page, now I have a file called themes.css and store.js, I will send them both because I don’t really know what can or not be relevant from them.

themes.css:

.bg-light {
    background-color: #ffffff;
    color: #000000; 
    background-size: 100% 100%;
  }
  
.bg-dark {
    background-color: #1a202c;
    color: #ffffff;
    background-size: 100% 100%;
  }

store.js:

import { defineStore } from "pinia";

export const useStore = defineStore("app", {
  state: () => ({
    themeMode: "light",
  }),
  actions: {
    toggleThemeMode() {
      this.themeMode = this.themeMode === "light" ? "dark" : "light";
    },
  },
});

There is also a mention to pinia in my main.js file:

import { createPinia } from "pinia";
app.use(createPinia());

I think this is all the relevant information, if someone needs more, let me know and I will be sending the full code.

I changed the button to a checkbox input and now I am getting this error on my console:

galleryStart.vue:64 Uncaught TypeError: Cannot read properties of undefined (reading 'toggleThemeMode')
    at Proxy.set (galleryStart.vue:64:29)
    at set value [as value] (reactivity.esm-bundler.js:1152:10)
    at Object.set [as isLightTheme] (runtime-core.esm-bundler.js:3408:23)
    at _createElementVNode.onUpdate:modelValue._cache.<computed>._cache.<computed> (galleryStart.vue:15:34)
    at HTMLInputElement.<anonymous> (runtime-dom.esm-bundler.js:1134:9)
set @ galleryStart.vue:64
set value @ reactivity.esm-bundler.js:1152
set @ runtime-core.esm-bundler.js:3408
_createElementVNode.onUpdate:modelValue._cache.<computed>._cache.<computed> @ galleryStart.vue:15
(anonymous) @ runtime-dom.esm-bundler.js:1134
Show 3 more frames
runtime-core.esm-bundler.js:41 [Vue warn]: Unhandled error during execution of native event handler 
  at <GalleryStart onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {toggleThemeMode: ƒ, goToLoginPage: ƒ, openFileManager: ƒ, handleFileChange: ƒ, …} > > 
  at <RouterView> 
  at <App>
warn2 @ runtime-core.esm-bundler.js:41
logError @ runtime-core.esm-bundler.js:216
handleError @ runtime-core.esm-bundler.js:208
callWithErrorHandling @ runtime-core.esm-bundler.js:160
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166
invoker @ runtime-dom.esm-bundler.js:278
Show 6 more frames
runtime-core.esm-bundler.js:221 Uncaught TypeError: Cannot read properties of undefined (reading 'toggleThemeMode')
    at Proxy.toggleThemeMode (galleryStart.vue:70:27)
    at _createElementVNode.onChange._cache.<computed>._cache.<computed> (galleryStart.vue:16:22)
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
    at HTMLInputElement.invoker (runtime-dom.esm-bundler.js:278:5)

also, here is what I did to the checkbox:

<input type="checkbox" v-model="isLightTheme @change="toggleThemeMode"/>