zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions 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">
import type { ThemeSwitcherTheme } from '@layouts/types';
import { Icon } from '@iconify/vue';
import { onMounted, watch, ref } from 'vue';
import { onMounted, ref } from 'vue';
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 {
state: currentThemeName,
next: getNextThemeName,
index: currentThemeIndex,
} = useCycleList(
props.themes.map((t) => t.name),
{ initialValue: theme.value }
);
const changeTheme = () => {
theme.value = getNextThemeName();
};
const changeMode = (val: 'dark' | 'light' | 'system') => {
let value = val;
const changeMode = () => {
let value = 'dark';
if (theme.value === 'dark') {
value = 'light';
}
if (
theme.value === 'system' &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
value = 'dark';
}
if (value === 'dark') {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} else {
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);
};
// Update icon if theme is changed from other sources
watch(theme, (val: 'dark' | 'light' | 'system') => {
currentThemeName.value = val;
changeMode(val);
});
onMounted(() => {
if (currentThemeName.value) {
changeMode(currentThemeName.value);
}
});
</script>
<template>
<div class="tooltip tooltip-bottom delay-1000" :data-tip="currentThemeName">
<button class="btn btn-ghost btn-circle btn-sm mx-1" @click="changeTheme">
<Icon :icon="props.themes[currentThemeIndex].icon" class="text-2xl" />
<div class="tooltip tooltip-bottom delay-1000">
<button class=" btn btn-ghost btn-circle btn-sm mx-1" @click="changeMode">
<Icon :icon="props.themes[theme].icon" class="text-2xl" />
</button>
</div>
</template>

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

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