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

Refactor on dynamic changes

pull/5507/head
mertsincan 2024-03-12 09:46:43 +00:00
parent 31e56ea73a
commit 75b5f494d3
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/lib/basecomponent/BaseComponent.vue
View File

@ -40,7 +40,7 @@ export default {
deep: true,
immediate: true,
handler(newValue) {
const { primitive, semantic, global } = this.$style?.getCommonThemeCSS(newValue, this.$globalBaseTheme, this.$themeParams, this.$globalTheme);
const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(newValue, this.$globalBaseTheme, this.$themeParams, this.$globalTheme) || {};
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', useStyleOptions: this.$styleOptions });
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions: this.$styleOptions });
@ -52,7 +52,7 @@ export default {
immediate: true,
handler(newValue) {
if (newValue) {
const variables_css = this.$style?.getPresetThemeCSS(newValue, this.$globalTheme);
const variables_css = this.$style?.getPresetThemeCSS?.(newValue, this.$globalTheme);
this.$style?.loadTheme(`${variables_css}`, { name: `${this.$style.name}-variables`, useStyleOptions: this.$styleOptions });
}
@ -94,14 +94,17 @@ export default {
// apply colorScheme settings
const { colorScheme } = this.$globalThemeOptions || {};
if (colorScheme) {
if (colorScheme && !Theme.isColorSchemeInit()) {
const colorSchemeOption = BaseStyle.getColorSchemeOption(colorScheme);
const isClient = DomHandler.isClient();
console.log(window.matchMedia('(prefers-color-scheme: dark)'));
const isAuto = !colorSchemeOption.light?.default && !colorSchemeOption.dark?.default;
const isDark = isAuto && isClient ? window.matchMedia('(prefers-color-scheme: dark)') : colorSchemeOption.dark?.default;
const isDark = isAuto && isClient ? window.matchMedia('(prefers-color-scheme: dark)').matches : colorSchemeOption.dark?.default;
const defaultDocument = isClient ? window.document : undefined;
Theme.setColorScheme(isDark ? 'dark' : 'light');
Theme.setColorSchemeInit(true);
if (isDark && defaultDocument) {
DomHandler.addClass(defaultDocument.documentElement, colorSchemeOption.dark?.class);

7
components/lib/themes/config/index.js
View File

@ -5,6 +5,7 @@ const ServiceSymbol = Symbol();
export default {
_pConfig: undefined,
_colorScheme: 'dark',
_initializeColorScheme: false,
getPConfig() {
return this._pConfig;
},
@ -21,6 +22,12 @@ export default {
setColorScheme(newValue) {
this._colorScheme = newValue;
},
isColorSchemeInit() {
return this._initializeColorScheme;
},
setColorSchemeInit(newValue) {
this._initializeColorScheme = newValue;
},
toggleColorScheme() {
this._colorScheme = this._colorScheme === 'dark' ? 'light' : 'dark';
const defaultDocument = SharedUtils.dom.isClient() ? window.document : undefined;