mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-25 01:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(style): dark mode

Browse source
This commit is contained in:
Corentin Thomasset 2022-04-04 01:52:59 +02:00
parent e8594de7b4
commit 3e92b7f1e0
No known key found for this signature in database
GPG key ID: DBD997E935996158
3 changed files with 25 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/layouts/base.layout.vue
View file

@ -2,13 +2,15 @@
import { NIcon } from 'naive-ui';
import { h, ref, type Component } from 'vue';
import { RouterLink, useRoute } from 'vue-router';
import { User } from '@vicons/tabler'
import { LightModeFilled, DarkModeFilled } from '@vicons/material'
import { tools } from '@/tools';
import SearchBar from '../components/SearchBar.vue';
import { useStyleStore } from '@/stores/style.store';
const collapsed = ref(false)
const activeKey = ref(null)
const route = useRoute()
const styleStore = useStyleStore()
const makeLabel = (text: string, to: string) => () => h(RouterLink, { to }, { default: () => text })
const makeIcon = (icon: Component) => () => h(NIcon, null, { default: () => h(icon) })
@ -53,9 +55,16 @@ const menuOptions = tools.map(({ name, path, icon }) => ({
<div class="bar-wrapper">
<search-bar />
<n-button secondary circle>
<n-icon size="large">
<user />
<n-button
circle
quaternary
@click="styleStore.isDarkTheme = !styleStore.isDarkTheme"
>
<n-icon size="large" v-if="styleStore.isDarkTheme">
<LightModeFilled />
</n-icon>
<n-icon size="large" v-else>
<DarkModeFilled />
</n-icon>
</n-button>
</div>
@ -76,7 +85,7 @@ const menuOptions = tools.map(({ name, path, icon }) => ({
}
.content {
background-color: #f1f5f9;
// background-color: #f1f5f9;
::v-deep(.n-layout-scroll-container) {
padding: 26px;
}