starred/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2026-10-15 08:00:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: chore home default css (#14101)

Browse Source
This commit is contained in:
Yuki Guo
2026-10-15 15:45:25 +08:00
committed by GitHub
parent 8e865c2c46
commit 110c292856
1 changed files with 17 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/v-charts/components/Pie.vue
+17 -21
View File
@@ -4,11 +4,8 @@
<script lang="ts" setup>
import { onMounted, nextTick, watch, onBeforeUnmount, ref } from 'vue';
import echarts from '@/utils/echarts';
import { useGlobalStore } from '@/composables/useGlobalStore';
const { themeConfig } = useGlobalStore();
const isDarkTheme = ref(false);
const PieChartRef = ref<HTMLElement>();
let mediaQuery: MediaQueryList;
let themeObserver: MutationObserver | undefined;
let resizeObserver: ResizeObserver | undefined;
let resizeFrame: number | undefined;
@@ -47,16 +44,17 @@ function resizeChart() {
echarts.getInstanceByDom(PieChartRef.value)?.resize();
}
function getThemeColors() {
// Match the applied page theme, including while settings are still loading.
const isDarkTheme = document.documentElement.classList.contains('dark');
const style = getComputedStyle(document.documentElement);
return {
primaryLight2: getComputedStyle(document.documentElement)
.getPropertyValue('--panel-color-primary-light-3')
.trim(),
primaryLight1: getComputedStyle(document.documentElement).getPropertyValue('--panel-color-primary').trim(),
pieBgColor: isDarkTheme.value ? '#434552' : '#ffffff',
textColor: isDarkTheme.value ? '#ffffff' : '#0f0f0f',
subtextColor: isDarkTheme.value ? '#BBBFC4' : '#646A73',
shadowColor: isDarkTheme.value ? '#16191D' : 'rgba(0, 94, 235, 0.1)',
backgroundStyleColor: isDarkTheme.value ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 94, 235, 0.05)',
primaryLight2: style.getPropertyValue('--panel-color-primary-light-3').trim() || '#4c8ef1',
primaryLight1: style.getPropertyValue('--panel-color-primary').trim() || '#005eeb',
pieBgColor: isDarkTheme ? '#434552' : '#ffffff',
textColor: isDarkTheme ? '#ffffff' : '#0f0f0f',
subtextColor: isDarkTheme ? '#BBBFC4' : '#646A73',
shadowColor: isDarkTheme ? '#16191D' : 'rgba(0, 94, 235, 0.1)',
backgroundStyleColor: isDarkTheme ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 94, 235, 0.05)',
};
}
@@ -64,11 +62,6 @@ function initChart() {
if (!PieChartRef.value) {
return;
}
if (themeConfig.value.theme === 'auto') {
isDarkTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
} else {
isDarkTheme.value = themeConfig.value.theme === 'dark';
}
let myChart = echarts?.getInstanceByDom(PieChartRef.value);
if (myChart === null || myChart === undefined) {
myChart = echarts.init(PieChartRef.value);
@@ -194,8 +187,11 @@ function handleThemeChange() {
onMounted(() => {
nextTick(() => {
mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', handleThemeChange);
themeObserver = new MutationObserver(handleThemeChange);
themeObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class', 'style'],
});
initChart();
window.addEventListener('resize', changeChartSize);
if (PieChartRef.value) {
@@ -214,7 +210,7 @@ onBeforeUnmount(() => {
echarts.getInstanceByDom(PieChartRef.value)?.dispose();
}
window.removeEventListener('resize', changeChartSize);
mediaQuery?.removeEventListener('change', handleThemeChange);
themeObserver?.disconnect();
resizeObserver?.disconnect();
});
</script>