我正在创建一个简单的画廊项目。我希望它有一个按钮，改变主题从轻（默认）到黑暗。我使用顺风css，pinia和vuejs3。我将尝试发送我的代码的相关部分，看看是否有人可以帮助我。
我的网页目前看起来像附加的图像。
我的整个代码都在一个div中，像这样：

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

字符串
要更改主题，我在导航栏中有一个按钮：

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

型
(this按钮在我之前写的div里面）
在我的脚本中，我导入了一个css文件，存储文件（来自pinia）和另一个不相关的组件：

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

型
我的计算，在导出中，看起来像这样：

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

型
这是我的方法的一部分：

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

型
这是我的图库页面的所有内容，现在我有一个名为themes.css和store.js的文件，我将发送它们，因为我真的不知道它们有什么相关性。
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";
    },
  },
});

型
在我的main.js文件中也提到了pinia：

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

型
我认为这是所有的相关信息，如果有人需要更多，让我知道，我会发送完整的代码。
我将按钮更改为复选框输入，现在我在控制台上收到此错误：

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)

型
另外，我对复选框做了以下操作：

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

型