fix: restore tri-option for theme color
This commit is contained in:
parent
00404fc6d4
commit
9d1bde7355
2 changed files with 74 additions and 5 deletions
|
|
@ -176,11 +176,14 @@
|
|||
|
||||
<UDashboardSearchButton class="shrink-0" />
|
||||
|
||||
<UColorModeButton
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
aria-label="Toggle color mode"
|
||||
:icon="colorModeButtonIcon"
|
||||
:aria-label="colorModeButtonAriaLabel"
|
||||
:title="colorModeButtonTitle"
|
||||
@click="cycleColorMode"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
|
|
@ -506,9 +509,12 @@ type SidebarSection = {
|
|||
items: Array<Array<NavigationMenuItem>>;
|
||||
};
|
||||
|
||||
type ColorModePreference = 'system' | 'light' | 'dark';
|
||||
|
||||
const socket = useSocketStore();
|
||||
const config = useConfigStore();
|
||||
const route = useRoute();
|
||||
const colorMode = useColorMode();
|
||||
const loadedImage = ref();
|
||||
const loadingImage = ref(false);
|
||||
const bg_enable = useStorage('random_bg', true);
|
||||
|
|
@ -521,6 +527,57 @@ const updateCheckMessage = ref('Up to date - Click to check');
|
|||
const showRouteSearch = ref(false);
|
||||
const { alertDialog, confirmDialog } = useDialog();
|
||||
|
||||
const colorModePreferences: Array<ColorModePreference> = ['system', 'light', 'dark'];
|
||||
|
||||
const colorModePreference = computed<ColorModePreference>(() => {
|
||||
const preference = colorMode.preference;
|
||||
return colorModePreferences.includes(preference as ColorModePreference)
|
||||
? (preference as ColorModePreference)
|
||||
: 'system';
|
||||
});
|
||||
|
||||
const colorModeButtonIcon = computed(() => {
|
||||
switch (colorModePreference.value) {
|
||||
case 'light':
|
||||
return 'i-lucide-sun';
|
||||
case 'dark':
|
||||
return 'i-lucide-moon';
|
||||
default:
|
||||
return 'i-lucide-monitor';
|
||||
}
|
||||
});
|
||||
|
||||
const nextColorModePreference = computed<ColorModePreference>(() => {
|
||||
const currentIndex = colorModePreferences.indexOf(colorModePreference.value);
|
||||
return colorModePreferences[(currentIndex + 1) % colorModePreferences.length] ?? 'system';
|
||||
});
|
||||
|
||||
const colorModeButtonTitle = computed(() => {
|
||||
switch (colorModePreference.value) {
|
||||
case 'light':
|
||||
return 'Theme: Light';
|
||||
case 'dark':
|
||||
return 'Theme: Dark';
|
||||
default:
|
||||
return 'Theme: System';
|
||||
}
|
||||
});
|
||||
|
||||
const colorModeButtonAriaLabel = computed(() => {
|
||||
switch (nextColorModePreference.value) {
|
||||
case 'light':
|
||||
return 'Switch theme to light';
|
||||
case 'dark':
|
||||
return 'Switch theme to dark';
|
||||
default:
|
||||
return 'Switch theme to system';
|
||||
}
|
||||
});
|
||||
|
||||
const cycleColorMode = (): void => {
|
||||
colorMode.preference = nextColorModePreference.value;
|
||||
};
|
||||
|
||||
const dashboardSidebarUi = {
|
||||
root: 'border-r border-default bg-default/95 backdrop-blur-sm',
|
||||
header: 'border-b border-default px-2.5 py-3',
|
||||
|
|
|
|||
|
|
@ -15,8 +15,10 @@ try {
|
|||
}
|
||||
} catch {}
|
||||
|
||||
const isProd = 'production' === process.env.NODE_ENV;
|
||||
export default defineNuxtConfig({
|
||||
ssr: false,
|
||||
sourcemap: false === isProd,
|
||||
devtools: { enabled: true },
|
||||
devServer: {
|
||||
port: 8082,
|
||||
|
|
@ -63,14 +65,15 @@ export default defineNuxtConfig({
|
|||
fallbackToApi: false,
|
||||
clientBundle: {
|
||||
scan: {
|
||||
globInclude: ['app/**/*.{vue,ts,js}'],
|
||||
globInclude: ['app/**/*.{vue,ts,js}', 'node_modules/@nuxt/ui/dist/shared/ui*.mjs'],
|
||||
globExclude: ['dist', 'build', 'coverage', 'test', 'tests', '.*'],
|
||||
},
|
||||
},
|
||||
},
|
||||
nitro: {
|
||||
sourceMap: false === isProd,
|
||||
output: {
|
||||
publicDir:
|
||||
'production' === process.env.NODE_ENV ? __dirname + '/exported' : __dirname + '/dist',
|
||||
publicDir: isProd ? __dirname + '/exported' : __dirname + '/dist',
|
||||
},
|
||||
...extraNitro,
|
||||
},
|
||||
|
|
@ -93,6 +96,15 @@ export default defineNuxtConfig({
|
|||
},
|
||||
build: {
|
||||
chunkSizeWarningLimit: 2000,
|
||||
rollupOptions: {
|
||||
onwarn(warning, warn) {
|
||||
if ('SOURCEMAP_BROKEN' === warning.code) {
|
||||
return;
|
||||
}
|
||||
|
||||
warn(warning);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
telemetry: false,
|
||||
|
|
|
|||
Loading…
Reference in a new issue