vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

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

pull/5507/head
Cagatay Civici 2024-03-28 18:27:36 +03:00
parent f91a83cf19
commit be0092f0b4
18 changed files with 112 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app.vue
View File

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

13
components/landing/HeroSection.vue
View File

@ -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: {

48
components/lib/themes/primeone/presets/aura/index.js
View File

@ -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)'
},

8
doc/chart/BasicDoc.vue
View File

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

8
doc/chart/ComboDoc.vue
View File

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

8
doc/chart/DoughnutDoc.vue
View File

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

8
doc/chart/HorizontalBarDoc.vue
View File

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

8
doc/chart/LineDoc.vue
View File

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

8
doc/chart/LineStylesDoc.vue
View File

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

8
doc/chart/MultiAxisDoc.vue
View File

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

8
doc/chart/PieChartDoc.vue
View File

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

8
doc/chart/PolarAreaDoc.vue
View File

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

8
doc/chart/RadarDoc.vue
View File

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

8
doc/chart/StackedBarDoc.vue
View File

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

8
doc/chart/VerticalBarDoc.vue
View File

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

2
error.vue
View File

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

4
layouts/AppConfigurator.vue
View File

@ -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' } },

2
layouts/AppTopBar.vue
View File

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