From 8ea9574954f2711ea425eafdb7f5301b3aa6dea9 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 7 Sep 2023 11:03:32 +0200
Subject: [PATCH] use icon
---
components/Nav/Navbar.vue | 3 ++-
composables/useCustomTheme.ts | 2 +-
layouts/article.vue | 47 +++++++++++++++++------------------
3 files changed, 26 insertions(+), 26 deletions(-)
diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue
index 6330cead..97d9560c 100644
--- a/components/Nav/Navbar.vue
+++ b/components/Nav/Navbar.vue
@@ -2,7 +2,8 @@
<v-app-bar>
<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="toggle()">toggle theme</v-btn>
+ <v-btn icon="mdi-theme-light-dark" @click="toggle()">
+ </v-btn>
</v-app-bar>
<v-navigation-drawer v-model="drawer" :border="0">
<v-card flat>
diff --git a/composables/useCustomTheme.ts b/composables/useCustomTheme.ts
index 9d7fc03b..7a44c724 100644
--- a/composables/useCustomTheme.ts
+++ b/composables/useCustomTheme.ts
@@ -5,7 +5,7 @@ export function useCustomTheme() {
const isDark = useDark({
valueDark: 'dark',
valueLight: 'light',
- initialValue: 'light',
+ initialValue: 'auto',
onChanged: (dark: boolean) => {
$vuetify.theme.global.name.value = dark ? 'dark' : 'light'
},
diff --git a/layouts/article.vue b/layouts/article.vue
index 4f93ec83..46805b47 100644
--- a/layouts/article.vue
+++ b/layouts/article.vue
@@ -3,34 +3,33 @@ const { page, surround } = useContent();
import { useCustomTheme } from '~/composables/useCustomTheme'
const { isDark } = useCustomTheme()
+
</script>
<template>
- <v-card>
- <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">
+ <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">
<v-card-text> -->
- <v-container>
- <slot />
- <!-- </v-card-text>
+ <v-container>
+ <slot />
+ <!-- </v-card-text>
</v-card> -->
- <EditGitlab />
- <v-row justify="space-between">
- <v-col v-for="(surroundPage, i) in surround" :key="surroundPage?._id" cols="auto">
- <v-btn v-if="surroundPage" :prepend-icon="i === 0 ? 'mdi-arrow-left' : undefined"
- :append-icon="i === 1 ? 'mdi-arrow-right' : undefined" variant="outlined" color="primary"
- :to="surroundPage?._path">{{ surroundPage?.title }}</v-btn>
- </v-col>
- </v-row>
- </v-container>
- <v-footer id="app-footer" app>footer</v-footer>
- <!-- </v-container> -->
- </v-main>
- <NavNavbar />
- <NavTableOfContent :links="page.body.toc.links" />
- </VApp>
- </v-card>
+ <EditGitlab />
+ <v-row justify="space-between">
+ <v-col v-for="(surroundPage, i) in surround" :key="surroundPage?._id" cols="auto">
+ <v-btn v-if="surroundPage" :prepend-icon="i === 0 ? 'mdi-arrow-left' : undefined"
+ :append-icon="i === 1 ? 'mdi-arrow-right' : undefined" variant="outlined" color="primary"
+ :to="surroundPage?._path">{{ surroundPage?.title }}</v-btn>
+ </v-col>
+ </v-row>
+ </v-container>
+ <v-footer id="app-footer" app>footer</v-footer>
+ <!-- </v-container> -->
+ </v-main>
+ <NavNavbar />
+ <NavTableOfContent :links="page.body.toc.links" />
+ </VApp>
</template>
<style scoped>
--
GitLab