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, deep: true,
immediate: true, immediate: true,
handler(newValue) { 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(primitive, { name: 'primitive-variables', useStyleOptions: this.$styleOptions });
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions: this.$styleOptions }); BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions: this.$styleOptions });
@ -52,7 +52,7 @@ export default {
immediate: true, immediate: true,
handler(newValue) { handler(newValue) {
if (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 }); this.$style?.loadTheme(`${variables_css}`, { name: `${this.$style.name}-variables`, useStyleOptions: this.$styleOptions });
} }
@ -94,14 +94,17 @@ export default {
// apply colorScheme settings // apply colorScheme settings
const { colorScheme } = this.$globalThemeOptions || {}; const { colorScheme } = this.$globalThemeOptions || {};
if (colorScheme) { if (colorScheme && !Theme.isColorSchemeInit()) {
const colorSchemeOption = BaseStyle.getColorSchemeOption(colorScheme); const colorSchemeOption = BaseStyle.getColorSchemeOption(colorScheme);
const isClient = DomHandler.isClient(); const isClient = DomHandler.isClient();
console.log(window.matchMedia('(prefers-color-scheme: dark)'));
const isAuto = !colorSchemeOption.light?.default && !colorSchemeOption.dark?.default; 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; const defaultDocument = isClient ? window.document : undefined;
Theme.setColorScheme(isDark ? 'dark' : 'light'); Theme.setColorScheme(isDark ? 'dark' : 'light');
Theme.setColorSchemeInit(true);
if (isDark && defaultDocument) { if (isDark && defaultDocument) {
DomHandler.addClass(defaultDocument.documentElement, colorSchemeOption.dark?.class); 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 { export default {
_pConfig: undefined, _pConfig: undefined,
_colorScheme: 'dark', _colorScheme: 'dark',
_initializeColorScheme: false,
getPConfig() { getPConfig() {
return this._pConfig; return this._pConfig;
}, },
@ -21,6 +22,12 @@ export default {
setColorScheme(newValue) { setColorScheme(newValue) {
this._colorScheme = newValue; this._colorScheme = newValue;
}, },
isColorSchemeInit() {
return this._initializeColorScheme;
},
setColorSchemeInit(newValue) {
this._initializeColorScheme = newValue;
},
toggleColorScheme() { toggleColorScheme() {
this._colorScheme = this._colorScheme === 'dark' ? 'light' : 'dark'; this._colorScheme = this._colorScheme === 'dark' ? 'light' : 'dark';
const defaultDocument = SharedUtils.dom.isClient() ? window.document : undefined; const defaultDocument = SharedUtils.dom.isClient() ? window.document : undefined;