mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-06 18:36:55 +08:00
feat: 更新App.vue组件,优化主题和布局, 修复Ellipsis弹出框背景颜色的问题
- 调整主题色彩设置
This commit is contained in:
47
src/App.vue
47
src/App.vue
@@ -60,20 +60,54 @@
|
||||
}
|
||||
});
|
||||
|
||||
const themeOverrides = {
|
||||
const themeOverrides = computed(() => {
|
||||
return {
|
||||
common: {
|
||||
// primaryColor: '#9ddddc',
|
||||
// 主色调 (中蓝色基调,调整对比度)
|
||||
primaryColor: '#5A7A9E',
|
||||
primaryColorHover: '#7390B1', // 略微提亮悬浮色
|
||||
primaryColorPressed: '#4F7094', // 调整按下色,避免在暗色模式下过暗
|
||||
primaryColorSuppl: '#8CA6C1', // 调整补充色,使其与背景有区分
|
||||
|
||||
// 信息色 (浅蓝色基调,调整对比度)
|
||||
infoColor: '#8CB1C7', // 稍微加深基础信息色
|
||||
infoColorHover: '#A6C3D6', // 提亮悬浮色
|
||||
infoColorPressed: '#7DA0B5', // 调整按下色
|
||||
infoColorSuppl: '#D0DDE8', // 调整补充色
|
||||
|
||||
// 成功色 (柔和青绿)
|
||||
successColor: '#4DB6AC',
|
||||
successColorHover: '#6BC4B9', // 调整悬浮色
|
||||
successColorPressed: '#3E9A90', // 调整按下色
|
||||
successColorSuppl: '#C1E7E2', // 调整补充色
|
||||
|
||||
// 警告色 (柔和橙色)
|
||||
warningColor: '#FFB74D',
|
||||
warningColorHover: '#FFC870', // 调整悬浮色
|
||||
warningColorPressed: '#F8A830', // 调整按下色
|
||||
warningColorSuppl: '#FFE9C7', // 调整补充色
|
||||
|
||||
// 错误色 (柔和红色)
|
||||
errorColor: '#E57373',
|
||||
errorColorHover: '#EC8F8F', // 调整悬浮色
|
||||
errorColorPressed: '#D96060', // 调整按下色
|
||||
errorColorSuppl: '#F5C7C7', // 调整补充色
|
||||
|
||||
|
||||
// 保持字体设置
|
||||
fontFamily:
|
||||
'Inter ,"Noto Sans SC",-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"!important',
|
||||
},
|
||||
// ...
|
||||
Tooltip: {
|
||||
color: isDarkMode.value ? '#101014' : '#FFFFFF',
|
||||
}
|
||||
};
|
||||
})
|
||||
const body = document.body;
|
||||
|
||||
onMounted(() => {
|
||||
if (isDarkMode.value) {
|
||||
document.documentElement.classList.add('dark');
|
||||
console.log('Added dark class to HTML'); // For debugging
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -95,7 +129,10 @@
|
||||
<Suspense>
|
||||
<TempComponent>
|
||||
<NLayoutContent>
|
||||
<NElement style="height: 100vh;">
|
||||
<NElement
|
||||
style="height: 100vh;"
|
||||
:theme-overrides="themeOverrides"
|
||||
>
|
||||
<ViewerLayout v-if="layout == 'viewer'" />
|
||||
<ManageLayout v-else-if="layout == 'manage'" />
|
||||
<OpenLiveLayout v-else-if="layout == 'open-live'" />
|
||||
|
||||
Reference in New Issue
Block a user