cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: theme default dark

Browse Source
This commit is contained in:
Alisa | side.one 2023-05-28 02:33:24 +08:00
parent a323bce8c9
commit 3404262af7
2 changed files with 60 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/ThemeSwitcher.vue
View File

@ -1,61 +1,50 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ThemeSwitcherTheme } from '@layouts/types';
import { Icon } from '@iconify/vue'; import { Icon } from '@iconify/vue';
import { onMounted, watch, ref } from 'vue'; import { onMounted, ref } from 'vue';
const props = defineProps<{ const props = defineProps<{
themes: ThemeSwitcherTheme[]; themes: {
name: string;
icon: string;
}[];
}>(); }>();
const themeMap = { system: 'mdi-laptop', light: 'mdi-weather-sunny', dark: 'mdi-weather-night' }
const theme = ref(window.localStorage.getItem('theme') || 'dark'); const theme = ref(window.localStorage.getItem('theme') || 'dark');
const {
state: currentThemeName,
next: getNextThemeName,
index: currentThemeIndex,
} = useCycleList(
props.themes.map((t) => t.name),
{ initialValue: theme.value }
);
const changeTheme = () => { const changeMode = () => {
theme.value = getNextThemeName(); let value = 'dark';
}; if (theme.value === 'dark') {
value = 'light';
const changeMode = (val: 'dark' | 'light' | 'system') => { }
let value = val;
if ( if (
theme.value === 'system' && theme.value === 'system' &&
window.matchMedia('(prefers-color-scheme: dark)').matches window.matchMedia('(prefers-color-scheme: dark)').matches
) { ) {
value = 'dark'; value = 'dark';
} }
if (value === 'dark') { if (value === 'light') {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} else {
document.documentElement.classList.add('light'); document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} }
document.documentElement.setAttribute('data-theme', value); document.documentElement.setAttribute('data-theme', value);
window.localStorage.setItem('theme', value); window.localStorage.setItem('theme', value);
}; };
// Update icon if theme is changed from other sources
watch(theme, (val: 'dark' | 'light' | 'system') => {
currentThemeName.value = val;
changeMode(val);
});
onMounted(() => { onMounted(() => {
if (currentThemeName.value) {
changeMode(currentThemeName.value);
}
}); });
</script> </script>
<template> <template>
<div class="tooltip tooltip-bottom delay-1000" :data-tip="currentThemeName"> <div class="tooltip tooltip-bottom delay-1000">
<button class="btn btn-ghost btn-circle btn-sm mx-1" @click="changeTheme"> <button class=" btn btn-ghost btn-circle btn-sm mx-1" @click="changeMode">
<Icon :icon="props.themes[currentThemeIndex].icon" class="text-2xl" /> <Icon :icon="props.themes[theme].icon" class="text-2xl" />
</button> </button>
</div> </div>
</template> </template>

56
src/layouts/components/NavbarThemeSwitcher.vue
View File

@ -1,23 +1,45 @@
<script setup lang="ts"> <script setup lang="ts">
import NewThemeSwitcher from '@/components/ThemeSwitcher.vue'; import { Icon } from '@iconify/vue';
const themes: Array<{ name: string; icon: string }> = [ import { onMounted, ref } from 'vue';
{
name: 'system', const themeMap: Record<string, string> = { system: 'mdi-laptop', light: 'mdi-weather-sunny', dark: 'mdi-weather-night' }
icon: 'mdi-laptop',
}, const theme = ref(window.localStorage.getItem('theme') || 'dark');
{
name: 'light', const changeMode = (val?: string) => {
icon: 'mdi-weather-sunny', let value = 'dark';
}, const currentValue = val || theme.value;
{ if (currentValue === 'dark') {
name: 'dark', value = 'light';
icon: 'mdi-weather-night', }
}, if (
]; currentValue === 'system' &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
value = 'dark';
}
if (value === 'light') {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
}
document.documentElement.setAttribute('data-theme', value);
window.localStorage.setItem('theme', value);
theme.value = value;
};
onMounted(() => {
changeMode(theme.value === 'dark' ? 'light' : 'dark');
});
</script> </script>
<template> <template>
<div> <div class="tooltip tooltip-bottom delay-1000">
<NewThemeSwitcher :themes="themes" /> <button class=" btn btn-ghost btn-circle btn-sm mx-1" @click="changeMode()">
<Icon :icon="themeMap?.[theme]" class="text-2xl" />
</button>
</div> </div>
</template> </template>