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" />
|
<UDashboardSearchButton class="shrink-0" />
|
||||||
|
|
||||||
<UColorModeButton
|
<UButton
|
||||||
color="neutral"
|
color="neutral"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
aria-label="Toggle color mode"
|
:icon="colorModeButtonIcon"
|
||||||
|
:aria-label="colorModeButtonAriaLabel"
|
||||||
|
:title="colorModeButtonTitle"
|
||||||
|
@click="cycleColorMode"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<UButton
|
<UButton
|
||||||
|
|
@ -506,9 +509,12 @@ type SidebarSection = {
|
||||||
items: Array<Array<NavigationMenuItem>>;
|
items: Array<Array<NavigationMenuItem>>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type ColorModePreference = 'system' | 'light' | 'dark';
|
||||||
|
|
||||||
const socket = useSocketStore();
|
const socket = useSocketStore();
|
||||||
const config = useConfigStore();
|
const config = useConfigStore();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
const colorMode = useColorMode();
|
||||||
const loadedImage = ref();
|
const loadedImage = ref();
|
||||||
const loadingImage = ref(false);
|
const loadingImage = ref(false);
|
||||||
const bg_enable = useStorage('random_bg', true);
|
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 showRouteSearch = ref(false);
|
||||||
const { alertDialog, confirmDialog } = useDialog();
|
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 = {
|
const dashboardSidebarUi = {
|
||||||
root: 'border-r border-default bg-default/95 backdrop-blur-sm',
|
root: 'border-r border-default bg-default/95 backdrop-blur-sm',
|
||||||
header: 'border-b border-default px-2.5 py-3',
|
header: 'border-b border-default px-2.5 py-3',
|
||||||
|
|
|
||||||
|
|
@ -15,8 +15,10 @@ try {
|
||||||
}
|
}
|
||||||
} catch {}
|
} catch {}
|
||||||
|
|
||||||
|
const isProd = 'production' === process.env.NODE_ENV;
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
ssr: false,
|
ssr: false,
|
||||||
|
sourcemap: false === isProd,
|
||||||
devtools: { enabled: true },
|
devtools: { enabled: true },
|
||||||
devServer: {
|
devServer: {
|
||||||
port: 8082,
|
port: 8082,
|
||||||
|
|
@ -63,14 +65,15 @@ export default defineNuxtConfig({
|
||||||
fallbackToApi: false,
|
fallbackToApi: false,
|
||||||
clientBundle: {
|
clientBundle: {
|
||||||
scan: {
|
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: {
|
nitro: {
|
||||||
|
sourceMap: false === isProd,
|
||||||
output: {
|
output: {
|
||||||
publicDir:
|
publicDir: isProd ? __dirname + '/exported' : __dirname + '/dist',
|
||||||
'production' === process.env.NODE_ENV ? __dirname + '/exported' : __dirname + '/dist',
|
|
||||||
},
|
},
|
||||||
...extraNitro,
|
...extraNitro,
|
||||||
},
|
},
|
||||||
|
|
@ -93,6 +96,15 @@ export default defineNuxtConfig({
|
||||||
},
|
},
|
||||||
build: {
|
build: {
|
||||||
chunkSizeWarningLimit: 2000,
|
chunkSizeWarningLimit: 2000,
|
||||||
|
rollupOptions: {
|
||||||
|
onwarn(warning, warn) {
|
||||||
|
if ('SOURCEMAP_BROKEN' === warning.code) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
warn(warning);
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
telemetry: false,
|
telemetry: false,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue