diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue
index dfba24b532f877e39028914025d7f0c9257b4ec6..6330ceadef453c05b36c5b423cbfb27de72ecb65 100644
--- a/components/Nav/Navbar.vue
+++ b/components/Nav/Navbar.vue
@@ -1,11 +1,8 @@
<template>
<v-app-bar>
- <v-app-bar-nav-icon
- variant="text"
- @click.stop="drawer = !drawer"
- ></v-app-bar-nav-icon>
+ <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>DefenseFinder Wiki</v-toolbar-title>
- <v-btn @click="toggleTheme">toggle theme</v-btn>
+ <v-btn @click="toggle()">toggle theme</v-btn>
</v-app-bar>
<v-navigation-drawer v-model="drawer" :border="0">
<v-card flat>
@@ -16,13 +13,12 @@
</v-navigation-drawer>
</template>
<script setup lang="ts">
-import { useTheme } from "vuetify";
+import { useCustomTheme } from '~/composables/useCustomTheme'
+
+const { toggle } = useCustomTheme()
+
const { navigation, page, surround, globals } = useContent();
-console.log(page.value);
-const theme = useTheme();
-function toggleTheme() {
- theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
-}
+
const drawer = ref(true);
</script>
diff --git a/composables/useCustomTheme.ts b/composables/useCustomTheme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9d7fc03b1715d3a26701ea982266ee64918d6e1b
--- /dev/null
+++ b/composables/useCustomTheme.ts
@@ -0,0 +1,17 @@
+// composables/useCustomTheme.ts
+export function useCustomTheme() {
+ const { $vuetify } = useNuxtApp()
+
+ const isDark = useDark({
+ valueDark: 'dark',
+ valueLight: 'light',
+ initialValue: 'light',
+ onChanged: (dark: boolean) => {
+ $vuetify.theme.global.name.value = dark ? 'dark' : 'light'
+ },
+ })
+
+ const toggle = useToggle(isDark)
+
+ return { isDark, toggle }
+ }
\ No newline at end of file
diff --git a/layouts/article.vue b/layouts/article.vue
index 62cd1ded1f86b7f97b96e52bc3ca0a5cf4133506..4f93ec839a31fa9f63c30baa0829a6423e1ae413 100644
--- a/layouts/article.vue
+++ b/layouts/article.vue
@@ -1,10 +1,12 @@
<script setup lang="ts">
const { page, surround } = useContent();
+import { useCustomTheme } from '~/composables/useCustomTheme'
+const { isDark } = useCustomTheme()
</script>
<template>
<v-card>
- <v-app>
+ <VApp :theme="isDark ? 'dark' : 'light'">
<v-main style="min-height: 300px">
<!-- <v-container class="fill-height w-auto" > -->
<!-- <v-card flat max-width="1000" min-height="300" color="transparent">
@@ -27,7 +29,7 @@ const { page, surround } = useContent();
</v-main>
<NavNavbar />
<NavTableOfContent :links="page.body.toc.links" />
- </v-app>
+ </VApp>
</v-card>
</template>
diff --git a/layouts/custom.vue b/layouts/custom.vue
index 8e67eac306f116c582dd8cae95e614b073d23b5b..d608a56fc267b2a7fa56b132363da7da8422df61 100644
--- a/layouts/custom.vue
+++ b/layouts/custom.vue
@@ -1,18 +1,20 @@
<template>
<v-card>
- <v-app>
+ <VApp :theme="isDark ? 'dark' : 'light'">
<NavNavbar />
<v-main style="min-height: 300px">
<v-container>
<slot />
<v-footer app>footer</v-footer>
- </v-container></v-main
- >
- </v-app>
+ </v-container></v-main>
+ </VApp>
</v-card>
</template>
<script setup lang="ts">
+import { useCustomTheme } from '~/composables/useCustomTheme'
+
+const { isDark } = useCustomTheme()
const { navigation } = useContent();
const drawer = ref(true);
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e9d8d8168006f34ed40dc4c4ac5fd9063ae8a967..04c36373a8d957ae6b54ade61a5151997c1cd29f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,6 @@
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
- modules: ['@nuxt/content', 'vuetify-nuxt-module'],
+ modules: ['@nuxt/content', 'vuetify-nuxt-module', '@vueuse/nuxt'],
content: {
documentDriven: {
injectPage: false,
diff --git a/package-lock.json b/package-lock.json
index 469d9622d444e48647f296a232a5a200985824bf..93b3338c0780394d031a50bc1228ffc8ded93688 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,12 +4,11 @@
"requires": true,
"packages": {
"": {
- "dependencies": {
- "@vueuse/core": "^10.1.0"
- },
"devDependencies": {
"@nuxt/content": "^2.7.2",
"@types/node": "^18.15.12",
+ "@vueuse/core": "^10.4.1",
+ "@vueuse/nuxt": "^10.4.1",
"nuxt": "^3.7.0",
"vuetify-nuxt-module": "^0.5.7"
}
@@ -472,6 +471,7 @@
},
"node_modules/@babel/parser": {
"version": "7.22.15",
+ "dev": true,
"license": "MIT",
"bin": {
"parser": "bin/babel-parser.js"
@@ -647,6 +647,7 @@
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.15",
+ "dev": true,
"license": "MIT"
},
"node_modules/@jridgewell/trace-mapping": {
@@ -1394,6 +1395,7 @@
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.17",
+ "dev": true,
"license": "MIT"
},
"node_modules/@ungap/structured-clone": {
@@ -1619,6 +1621,7 @@
},
"node_modules/@vue/compiler-core": {
"version": "3.3.4",
+ "dev": true,
"license": "MIT",
"dependencies": {
"@babel/parser": "^7.21.3",
@@ -1629,6 +1632,7 @@
},
"node_modules/@vue/compiler-dom": {
"version": "3.3.4",
+ "dev": true,
"license": "MIT",
"dependencies": {
"@vue/compiler-core": "3.3.4",
@@ -1637,6 +1641,7 @@
},
"node_modules/@vue/compiler-sfc": {
"version": "3.3.4",
+ "dev": true,
"license": "MIT",
"dependencies": {
"@babel/parser": "^7.20.15",
@@ -1653,6 +1658,7 @@
},
"node_modules/@vue/compiler-ssr": {
"version": "3.3.4",
+ "dev": true,
"license": "MIT",
"dependencies": {
"@vue/compiler-dom": "3.3.4",
@@ -1666,6 +1672,7 @@
},
"node_modules/@vue/reactivity": {
"version": "3.3.4",
+ "dev": true,
"license": "MIT",
"dependencies": {
"@vue/shared": "3.3.4"
@@ -1673,6 +1680,7 @@
},
"node_modules/@vue/reactivity-transform": {
"version": "3.3.4",
+ "dev": true,
"license": "MIT",
"dependencies": {
"@babel/parser": "^7.20.15",
@@ -1684,6 +1692,7 @@
},
"node_modules/@vue/runtime-core": {
"version": "3.3.4",
+ "dev": true,
"license": "MIT",
"dependencies": {
"@vue/reactivity": "3.3.4",
@@ -1692,6 +1701,7 @@
},
"node_modules/@vue/runtime-dom": {
"version": "3.3.4",
+ "dev": true,
"license": "MIT",
"dependencies": {
"@vue/runtime-core": "3.3.4",
@@ -1701,6 +1711,7 @@
},
"node_modules/@vue/server-renderer": {
"version": "3.3.4",
+ "dev": true,
"license": "MIT",
"dependencies": {
"@vue/compiler-ssr": "3.3.4",
@@ -1712,6 +1723,7 @@
},
"node_modules/@vue/shared": {
"version": "3.3.4",
+ "dev": true,
"license": "MIT"
},
"node_modules/@vuetify/loader-shared": {
@@ -1729,7 +1741,9 @@
},
"node_modules/@vueuse/core": {
"version": "10.4.1",
- "license": "MIT",
+ "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.4.1.tgz",
+ "integrity": "sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==",
+ "dev": true,
"dependencies": {
"@types/web-bluetooth": "^0.0.17",
"@vueuse/metadata": "10.4.1",
@@ -1742,6 +1756,7 @@
},
"node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.14.6",
+ "dev": true,
"hasInstallScript": true,
"license": "MIT",
"bin": {
@@ -1780,13 +1795,61 @@
},
"node_modules/@vueuse/metadata": {
"version": "10.4.1",
+ "dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
+ "node_modules/@vueuse/nuxt": {
+ "version": "10.4.1",
+ "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-10.4.1.tgz",
+ "integrity": "sha512-tJ25KCkozZaQEy0qli4Ta8WXlbMIjSD7gPnVfLScZ2DpSSgImMB5R66PQEkrbSg4GfFj0OuoYc4+vCHQ/FqTsw==",
+ "dev": true,
+ "dependencies": {
+ "@nuxt/kit": "^3.6.5",
+ "@vueuse/core": "10.4.1",
+ "@vueuse/metadata": "10.4.1",
+ "local-pkg": "^0.4.3",
+ "nuxt": "^3.6.5",
+ "vue-demi": ">=0.14.5"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/antfu"
+ },
+ "peerDependencies": {
+ "nuxt": "^3.0.0"
+ }
+ },
+ "node_modules/@vueuse/nuxt/node_modules/vue-demi": {
+ "version": "0.14.6",
+ "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+ "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+ "dev": true,
+ "hasInstallScript": true,
+ "bin": {
+ "vue-demi-fix": "bin/vue-demi-fix.js",
+ "vue-demi-switch": "bin/vue-demi-switch.js"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/antfu"
+ },
+ "peerDependencies": {
+ "@vue/composition-api": "^1.0.0-rc.1",
+ "vue": "^3.0.0-0 || ^2.6.0"
+ },
+ "peerDependenciesMeta": {
+ "@vue/composition-api": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@vueuse/shared": {
"version": "10.4.1",
+ "dev": true,
"license": "MIT",
"dependencies": {
"vue-demi": ">=0.14.5"
@@ -1797,6 +1860,7 @@
},
"node_modules/@vueuse/shared/node_modules/vue-demi": {
"version": "0.14.6",
+ "dev": true,
"hasInstallScript": true,
"license": "MIT",
"bin": {
@@ -2721,6 +2785,7 @@
},
"node_modules/csstype": {
"version": "3.1.2",
+ "dev": true,
"license": "MIT"
},
"node_modules/cuint": {
@@ -3138,6 +3203,7 @@
},
"node_modules/estree-walker": {
"version": "2.0.2",
+ "dev": true,
"license": "MIT"
},
"node_modules/etag": {
@@ -4457,6 +4523,7 @@
},
"node_modules/magic-string": {
"version": "0.30.3",
+ "dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
@@ -7677,6 +7744,7 @@
},
"node_modules/picocolors": {
"version": "1.0.0",
+ "dev": true,
"license": "ISC"
},
"node_modules/picomatch": {
@@ -7721,6 +7789,7 @@
},
"node_modules/postcss": {
"version": "8.4.29",
+ "dev": true,
"funding": [
{
"type": "opencollective",
@@ -8236,6 +8305,7 @@
},
"node_modules/postcss/node_modules/nanoid": {
"version": "3.3.6",
+ "dev": true,
"funding": [
{
"type": "github",
@@ -9538,6 +9608,7 @@
},
"node_modules/source-map-js": {
"version": "1.0.2",
+ "dev": true,
"license": "BSD-3-Clause",
"engines": {
"node": ">=0.10.0"
@@ -10728,6 +10799,7 @@
},
"node_modules/vue": {
"version": "3.3.4",
+ "dev": true,
"license": "MIT",
"dependencies": {
"@vue/compiler-dom": "3.3.4",
diff --git a/package.json b/package.json
index 08224774a82f5af6cf9a637bb4e67851f17a2a5d..f5c158570865359cfd669eb2d189de01d1ea6adc 100644
--- a/package.json
+++ b/package.json
@@ -9,10 +9,9 @@
"devDependencies": {
"@nuxt/content": "^2.7.2",
"@types/node": "^18.15.12",
+ "@vueuse/core": "^10.4.1",
+ "@vueuse/nuxt": "^10.4.1",
"nuxt": "^3.7.0",
"vuetify-nuxt-module": "^0.5.7"
- },
- "dependencies": {
- "@vueuse/core": "^10.1.0"
}
}