Refactored dark mode toggle event bus and fixed charts on dark toggle, set default as noir

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');
         }
     }
 };

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-secondary-color');
-            const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+            const surfaceBorder = documentStyle.getPropertyValue('--border-color');
-            const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
 
             return {
                 plugins: {

components/lib/themes/primeone/presets/aura/index.js

@@ -125,17 +125,17 @@ export default {
         },
         anchorGutter: '2px',
         primary: {
-            50: '{emerald.50}',
+            50: '{zinc.50}',
-            100: '{emerald.100}',
+            100: '{zinc.100}',
-            200: '{emerald.200}',
+            200: '{zinc.200}',
-            300: '{emerald.300}',
+            300: '{zinc.300}',
-            400: '{emerald.400}',
+            400: '{zinc.400}',
-            500: '{emerald.500}',
+            500: '{zinc.500}',
-            600: '{emerald.600}',
+            600: '{zinc.600}',
-            700: '{emerald.700}',
+            700: '{zinc.700}',
-            800: '{emerald.800}',
+            800: '{zinc.800}',
-            900: '{emerald.900}',
+            900: '{zinc.900}',
-            950: '{emerald.950}'
+            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}',
+                    hoverColor: '#18181b',
-                    activeColor: '{primary.700}'
+                    activeColor: '#27272a'
                 },
                 highlight: {
-                    background: '{primary.50}',
+                    background: '#09090b',
-                    focusBackground: '{primary.100}',
+                    focusBackground: '#3f3f46',
-                    color: '{primary.700}',
+                    color: '#ffffff',
-                    focusColor: '{primary.800}'
+                    focusColor: '#ffffff'
                 },
                 maskBackground: 'rgba(0,0,0,0.4)',
                 formField: {
@@ -200,14 +200,14 @@ export default {
                     950: '{zinc.950}'
                 },
                 primary: {
-                    color: '{primary.400}',
+                    color: '#fafafa',
-                    inverseColor: '{surface.900}',
+                    inverseColor: '#09090b',
-                    hoverColor: '{primary.300}',
+                    hoverColor: '#f4f4f5',
-                    activeColor: '{primary.200}'
+                    activeColor: '#e4e4e7'
                 },
                 highlight: {
-                    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+                    background: 'rgba(250, 250, 250, .16)',
-                    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
+                    focusBackground: 'rgba(250, 250, 250, .24)',
                     color: 'rgba(255,255,255,.87)',
                     focusColor: 'rgba(255,255,255,.87)'
                 },

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() {

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() {

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() {

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() {

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() {

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() {

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() {

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() {

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() {

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() {

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() {

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() {

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 });
             });
         }
     }

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']}` }"
                     ></button>
                 </div>
             </div>
@@ -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' } },

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) {