From be0092f0b4155e5d04aeeb30f9e99a77c6dc1c3d Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Thu, 28 Mar 2024 18:27:36 +0300 Subject: [PATCH] Refactored dark mode toggle event bus and fixed charts on dark toggle, set default as noir --- app.vue | 14 +++--- components/landing/HeroSection.vue | 13 +++-- .../lib/themes/primeone/presets/aura/index.js | 48 +++++++++---------- doc/chart/BasicDoc.vue | 8 ++-- doc/chart/ComboDoc.vue | 8 +++- doc/chart/DoughnutDoc.vue | 8 +++- doc/chart/HorizontalBarDoc.vue | 8 +++- doc/chart/LineDoc.vue | 8 +++- doc/chart/LineStylesDoc.vue | 8 +++- doc/chart/MultiAxisDoc.vue | 8 +++- doc/chart/PieChartDoc.vue | 8 +++- doc/chart/PolarAreaDoc.vue | 8 +++- doc/chart/RadarDoc.vue | 8 +++- doc/chart/StackedBarDoc.vue | 8 +++- doc/chart/VerticalBarDoc.vue | 8 +++- error.vue | 2 +- layouts/AppConfigurator.vue | 4 +- layouts/AppTopBar.vue | 2 +- 18 files changed, 112 insertions(+), 67 deletions(-) diff --git a/app.vue b/app.vue index b2ea22cbe..563f22742 100644 --- a/app.vue +++ b/app.vue @@ -9,28 +9,30 @@ import EventBus from '@/layouts/AppEventBus'; export default { mounted() { - EventBus.on('theme-change', this.themeChangeListener); + EventBus.on('dark-mode-toggle', this.darkModeToggleListener); }, beforeUnmount() { - EventBus.off('theme-change', this.themeChangeListener); + EventBus.off('dark-mode-toggle', this.darkModeToggleListener); }, methods: { - themeChangeListener(event) { + darkModeToggleListener(event) { if (!document.startViewTransition) { - this.applyTheme(event); + this.toggleDarkMode(event); return; } - document.startViewTransition(() => this.applyTheme(event)); + document.startViewTransition(() => this.toggleDarkMode(event)); }, - applyTheme(event) { + toggleDarkMode(event) { const isDark = event.dark; if (isDark) document.documentElement.classList.add('p-dark'); else document.documentElement.classList.remove('p-dark'); this.$appState.darkTheme = isDark; + + EventBus.emit('dark-mode-toggle-complete'); } } }; diff --git a/components/landing/HeroSection.vue b/components/landing/HeroSection.vue index 0e675231f..7de204162 100644 --- a/components/landing/HeroSection.vue +++ b/components/landing/HeroSection.vue @@ -165,7 +165,7 @@ import EventBus from '@/layouts/AppEventBus'; import { NodeService } from '@/service/NodeService'; export default { - themeChangeListener: null, + darkModeToggleListener: null, data() { return { value1: 24, @@ -212,17 +212,17 @@ export default { }; }, beforeUnmount() { - EventBus.off('theme-change-complete', this.themeChangeListener); + EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); - this.themeChangeListener = () => { + this.darkModeToggleListener = () => { this.chartOptions = this.setChartOptions(); }; - EventBus.on('theme-change-complete', this.themeChangeListener); + EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); NodeService.getTreeNodes().then((data) => (this.nodes = data)); }, @@ -247,9 +247,8 @@ export default { }, setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); - const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { plugins: { diff --git a/components/lib/themes/primeone/presets/aura/index.js b/components/lib/themes/primeone/presets/aura/index.js index 26c54c86a..3cc8664bc 100644 --- a/components/lib/themes/primeone/presets/aura/index.js +++ b/components/lib/themes/primeone/presets/aura/index.js @@ -125,17 +125,17 @@ export default { }, anchorGutter: '2px', primary: { - 50: '{emerald.50}', - 100: '{emerald.100}', - 200: '{emerald.200}', - 300: '{emerald.300}', - 400: '{emerald.400}', - 500: '{emerald.500}', - 600: '{emerald.600}', - 700: '{emerald.700}', - 800: '{emerald.800}', - 900: '{emerald.900}', - 950: '{emerald.950}' + 50: '{zinc.50}', + 100: '{zinc.100}', + 200: '{zinc.200}', + 300: '{zinc.300}', + 400: '{zinc.400}', + 500: '{zinc.500}', + 600: '{zinc.600}', + 700: '{zinc.700}', + 800: '{zinc.800}', + 900: '{zinc.900}', + 950: '{zinc.950}' }, colorScheme: { light: { @@ -154,16 +154,16 @@ export default { 950: '{slate.950}' }, primary: { - color: '{primary.500}', + color: '#09090b', inverseColor: '#ffffff', - hoverColor: '{primary.600}', - activeColor: '{primary.700}' + hoverColor: '#18181b', + activeColor: '#27272a' }, highlight: { - background: '{primary.50}', - focusBackground: '{primary.100}', - color: '{primary.700}', - focusColor: '{primary.800}' + background: '#09090b', + focusBackground: '#3f3f46', + color: '#ffffff', + focusColor: '#ffffff' }, maskBackground: 'rgba(0,0,0,0.4)', formField: { @@ -200,14 +200,14 @@ export default { 950: '{zinc.950}' }, primary: { - color: '{primary.400}', - inverseColor: '{surface.900}', - hoverColor: '{primary.300}', - activeColor: '{primary.200}' + color: '#fafafa', + inverseColor: '#09090b', + hoverColor: '#f4f4f5', + activeColor: '#e4e4e7' }, highlight: { - background: 'color-mix(in srgb, {primary.400}, transparent 84%)', - focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)', + background: 'rgba(250, 250, 250, .16)', + focusBackground: 'rgba(250, 250, 250, .24)', color: 'rgba(255,255,255,.87)', focusColor: 'rgba(255,255,255,.87)' }, diff --git a/doc/chart/BasicDoc.vue b/doc/chart/BasicDoc.vue index df0e706c8..526a90a54 100644 --- a/doc/chart/BasicDoc.vue +++ b/doc/chart/BasicDoc.vue @@ -15,7 +15,7 @@ import EventBus from '@/layouts/AppEventBus'; export default { - themeChangeListener: null, + darkModeToggleListener: null, data() { return { chartData: null, @@ -170,17 +170,17 @@ const setChartOptions = () => { }; }, beforeUnmount() { - EventBus.off('theme-change-complete', this.themeChangeListener); + EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); - this.themeChangeListener = () => { + this.darkModeToggleListener = () => { this.chartOptions = this.setChartOptions(); }; - EventBus.on('theme-change-complete', this.themeChangeListener); + EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); }, methods: { setChartData() { diff --git a/doc/chart/ComboDoc.vue b/doc/chart/ComboDoc.vue index ba9200a40..1cd4b080b 100644 --- a/doc/chart/ComboDoc.vue +++ b/doc/chart/ComboDoc.vue @@ -12,6 +12,7 @@ import EventBus from '@/layouts/AppEventBus'; export default { + darkModeToggleListener: null, data() { return { chartData: null, @@ -203,15 +204,18 @@ const setChartOptions = () => { } }; }, + beforeUnmount() { + EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); + }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); - this.themeChangeListener = () => { + this.darkModeToggleListener = () => { this.chartOptions = this.setChartOptions(); }; - EventBus.on('theme-change-complete', this.themeChangeListener); + EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); }, methods: { setChartData() { diff --git a/doc/chart/DoughnutDoc.vue b/doc/chart/DoughnutDoc.vue index df5719d8a..eb15a891a 100644 --- a/doc/chart/DoughnutDoc.vue +++ b/doc/chart/DoughnutDoc.vue @@ -12,6 +12,7 @@ import EventBus from '@/layouts/AppEventBus'; export default { + darkModeToggleListener: null, data() { return { chartData: null, @@ -128,15 +129,18 @@ const setChartOptions = () => { } }; }, + beforeUnmount() { + EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); + }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); - this.themeChangeListener = () => { + this.darkModeToggleListener = () => { this.chartOptions = this.setChartOptions(); }; - EventBus.on('theme-change-complete', this.themeChangeListener); + EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); }, methods: { setChartData() { diff --git a/doc/chart/HorizontalBarDoc.vue b/doc/chart/HorizontalBarDoc.vue index ac29468c6..7e8aab7fe 100644 --- a/doc/chart/HorizontalBarDoc.vue +++ b/doc/chart/HorizontalBarDoc.vue @@ -12,6 +12,7 @@ import EventBus from '@/layouts/AppEventBus'; export default { + darkModeToggleListener: null, data() { return { chartData: null, @@ -193,15 +194,18 @@ const setChartOptions = () => { } }; }, + beforeUnmount() { + EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); + }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); - this.themeChangeListener = () => { + this.darkModeToggleListener = () => { this.chartOptions = this.setChartOptions(); }; - EventBus.on('theme-change-complete', this.themeChangeListener); + EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); }, methods: { setChartData() { diff --git a/doc/chart/LineDoc.vue b/doc/chart/LineDoc.vue index 80f9e5fa7..5ccd392a2 100644 --- a/doc/chart/LineDoc.vue +++ b/doc/chart/LineDoc.vue @@ -12,6 +12,7 @@ import EventBus from '@/layouts/AppEventBus'; export default { + darkModeToggleListener: null, data() { return { chartData: null, @@ -185,15 +186,18 @@ const setChartOptions = () => { } }; }, + beforeUnmount() { + EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); + }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); - this.themeChangeListener = () => { + this.darkModeToggleListener = () => { this.chartOptions = this.setChartOptions(); }; - EventBus.on('theme-change-complete', this.themeChangeListener); + EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); }, methods: { setChartData() { diff --git a/doc/chart/LineStylesDoc.vue b/doc/chart/LineStylesDoc.vue index f6a1ef199..0704d8585 100644 --- a/doc/chart/LineStylesDoc.vue +++ b/doc/chart/LineStylesDoc.vue @@ -12,6 +12,7 @@ import EventBus from '@/layouts/AppEventBus'; export default { + darkModeToggleListener: null, data() { return { chartData: null, @@ -203,15 +204,18 @@ const setChartOptions = () => { } }; }, + beforeUnmount() { + EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); + }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); - this.themeChangeListener = () => { + this.darkModeToggleListener = () => { this.chartOptions = this.setChartOptions(); }; - EventBus.on('theme-change-complete', this.themeChangeListener); + EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); }, methods: { setChartData() { diff --git a/doc/chart/MultiAxisDoc.vue b/doc/chart/MultiAxisDoc.vue index b8b4e4a85..f7ad85e00 100644 --- a/doc/chart/MultiAxisDoc.vue +++ b/doc/chart/MultiAxisDoc.vue @@ -12,6 +12,7 @@ import EventBus from '@/layouts/AppEventBus'; export default { + darkModeToggleListener: null, data() { return { chartData: null, @@ -221,15 +222,18 @@ const setChartOptions = () => { } }; }, + beforeUnmount() { + EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); + }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); - this.themeChangeListener = () => { + this.darkModeToggleListener = () => { this.chartOptions = this.setChartOptions(); }; - EventBus.on('theme-change-complete', this.themeChangeListener); + EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); }, methods: { setChartData() { diff --git a/doc/chart/PieChartDoc.vue b/doc/chart/PieChartDoc.vue index 34423cb16..171b3234b 100644 --- a/doc/chart/PieChartDoc.vue +++ b/doc/chart/PieChartDoc.vue @@ -12,6 +12,7 @@ import EventBus from '@/layouts/AppEventBus'; export default { + darkModeToggleListener: null, data() { return { chartData: null, @@ -126,15 +127,18 @@ const setChartOptions = () => { } }; }, + beforeUnmount() { + EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); + }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); - this.themeChangeListener = () => { + this.darkModeToggleListener = () => { this.chartOptions = this.setChartOptions(); }; - EventBus.on('theme-change-complete', this.themeChangeListener); + EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); }, methods: { setChartData() { diff --git a/doc/chart/PolarAreaDoc.vue b/doc/chart/PolarAreaDoc.vue index 965702863..d8c13c19b 100644 --- a/doc/chart/PolarAreaDoc.vue +++ b/doc/chart/PolarAreaDoc.vue @@ -12,6 +12,7 @@ import EventBus from '@/layouts/AppEventBus'; export default { + darkModeToggleListener: null, data() { return { chartData: null, @@ -151,15 +152,18 @@ const setChartOptions = () => { } }; }, + beforeUnmount() { + EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); + }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); - this.themeChangeListener = () => { + this.darkModeToggleListener = () => { this.chartOptions = this.setChartOptions(); }; - EventBus.on('theme-change-complete', this.themeChangeListener); + EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); }, methods: { setChartData() { diff --git a/doc/chart/RadarDoc.vue b/doc/chart/RadarDoc.vue index 19321e723..3cccec8c6 100644 --- a/doc/chart/RadarDoc.vue +++ b/doc/chart/RadarDoc.vue @@ -12,6 +12,7 @@ import EventBus from '@/layouts/AppEventBus'; export default { + darkModeToggleListener: null, data() { return { chartData: null, @@ -167,15 +168,18 @@ const setChartOptions = () => { } }; }, + beforeUnmount() { + EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); + }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); - this.themeChangeListener = () => { + this.darkModeToggleListener = () => { this.chartOptions = this.setChartOptions(); }; - EventBus.on('theme-change-complete', this.themeChangeListener); + EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); }, methods: { setChartData() { diff --git a/doc/chart/StackedBarDoc.vue b/doc/chart/StackedBarDoc.vue index 2b24fc163..a061abcba 100644 --- a/doc/chart/StackedBarDoc.vue +++ b/doc/chart/StackedBarDoc.vue @@ -12,6 +12,7 @@ import EventBus from '@/layouts/AppEventBus'; export default { + darkModeToggleListener: null, data() { return { chartData: null, @@ -205,15 +206,18 @@ const setChartOptions = () => { } }; }, + beforeUnmount() { + EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); + }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); - this.themeChangeListener = () => { + this.darkModeToggleListener = () => { this.chartOptions = this.setChartOptions(); }; - EventBus.on('theme-change-complete', this.themeChangeListener); + EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); }, methods: { setChartData() { diff --git a/doc/chart/VerticalBarDoc.vue b/doc/chart/VerticalBarDoc.vue index 937341476..0b03fc266 100644 --- a/doc/chart/VerticalBarDoc.vue +++ b/doc/chart/VerticalBarDoc.vue @@ -12,6 +12,7 @@ import EventBus from '@/layouts/AppEventBus'; export default { + darkModeToggleListener: null, data() { return { chartData: null, @@ -191,15 +192,18 @@ const setChartOptions = () => { } }; }, + beforeUnmount() { + EventBus.off('dark-mode-toggle-complete', this.darkModeToggleListener); + }, mounted() { this.chartData = this.setChartData(); this.chartOptions = this.setChartOptions(); - this.themeChangeListener = () => { + this.darkModeToggleListener = () => { this.chartOptions = this.setChartOptions(); }; - EventBus.on('theme-change-complete', this.themeChangeListener); + EventBus.on('dark-mode-toggle-complete', this.darkModeToggleListener); }, methods: { setChartData() { diff --git a/error.vue b/error.vue index 84271f477..18722130e 100644 --- a/error.vue +++ b/error.vue @@ -59,7 +59,7 @@ export default { this.$appState.theme = event.theme; this.$appState.darkTheme = event.dark; - EventBus.emit('theme-change-complete', { theme: event.theme, dark: event.dark }); + EventBus.emit('dark-mode-toggle', { theme: event.theme, dark: event.dark }); }); } } diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue index 1bd34a1d4..8e5456270 100755 --- a/layouts/AppConfigurator.vue +++ b/layouts/AppConfigurator.vue @@ -23,7 +23,7 @@ type="button" @click="updateColors('surface', surface)" :class="{ 'active-color': selectedSurfaceColor === surface.name }" - :style="{ backgroundColor: `${surface.palette['600']}` }" + :style="{ backgroundColor: `${surface.palette['500']}` }" > @@ -43,7 +43,7 @@ import { updatePreset, updateSurface } from 'primevue/themes'; export default { data() { return { - selectedPrimaryColor: 'emerald', + selectedPrimaryColor: 'noir', selectedSurfaceColor: null, primaryColors: [ { name: 'noir', palette: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' } }, diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue index aba242bbb..f3bd80125 100755 --- a/layouts/AppTopBar.vue +++ b/layouts/AppTopBar.vue @@ -195,7 +195,7 @@ export default { this.$emit('menubutton-click', event); }, toggleDarkMode() { - EventBus.emit('theme-change', { dark: !this.$appState.darkTheme }); + EventBus.emit('dark-mode-toggle', { dark: !this.$appState.darkTheme }); }, bindScrollListener() { if (!this.scrollListener) {