From f03b37c9a5284b4acdb46813c069339f83da31b9 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Mon, 20 Nov 2023 11:33:43 +0300 Subject: [PATCH] Showcase theme rename --- app.vue | 2 +- components/doc/codeeditor/templates.js | 2 +- doc/installation/StyledModeDoc.vue | 2 +- doc/nuxt/StyleDoc.vue | 2 +- doc/theming/BuiltInThemesDoc.vue | 8 +++++ doc/theming/SwitchThemesDoc.vue | 4 +-- layouts/AppConfigurator.vue | 48 +++++++++++++------------- layouts/default.vue | 2 +- nuxt.config.js | 4 +-- pages/index.vue | 6 ++-- pages/landing/ThemeSection.vue | 2 +- plugins/app-state.js | 2 +- 12 files changed, 46 insertions(+), 38 deletions(-) diff --git a/app.vue b/app.vue index ad2d11159..16ff71561 100644 --- a/app.vue +++ b/app.vue @@ -15,7 +15,7 @@ export default { $route: { handler(to) { if (to.name === 'index') { - this.themeChangeListener({ theme: this.$appState.darkTheme ? 'lara-dark-teal' : 'lara-light-teal', dark: this.$appState.darkTheme }); + this.themeChangeListener({ theme: this.$appState.darkTheme ? 'lara-dark-green' : 'lara-light-green', dark: this.$appState.darkTheme }); } } } diff --git a/components/doc/codeeditor/templates.js b/components/doc/codeeditor/templates.js index 06367e259..b857d2685 100644 --- a/components/doc/codeeditor/templates.js +++ b/components/doc/codeeditor/templates.js @@ -79,7 +79,7 @@ import ThemeSwitcher from './components/ThemeSwitcher.vue';`; } else { // main.js pvTheme += `import "primeflex/primeflex.css"; -import "primevue/resources/themes/lara-light-teal/theme.css";`; +import "primevue/resources/themes/lara-light-green/theme.css";`; // package.json dependencies['primeflex'] = app_dependencies['primeflex'] || 'latest'; diff --git a/doc/installation/StyledModeDoc.vue b/doc/installation/StyledModeDoc.vue index 8928300c5..d87b40aae 100644 --- a/doc/installation/StyledModeDoc.vue +++ b/doc/installation/StyledModeDoc.vue @@ -13,7 +13,7 @@ export default { data() { return { code: { - basic: "\nimport 'primevue/resources/themes/lara-light-teal/theme.css'\n" + basic: "\nimport 'primevue/resources/themes/lara-light-green/theme.css'\n" } }; } diff --git a/doc/nuxt/StyleDoc.vue b/doc/nuxt/StyleDoc.vue index 47adc8c6a..c9360103b 100644 --- a/doc/nuxt/StyleDoc.vue +++ b/doc/nuxt/StyleDoc.vue @@ -19,7 +19,7 @@ export default { code1: { basic: ` export default defineNuxtConfig({ - css: ['primevue/resources/themes/lara-dark-teal/theme.css'] + css: ['primevue/resources/themes/lara-dark-green/theme.css'] }) ` } diff --git a/doc/theming/BuiltInThemesDoc.vue b/doc/theming/BuiltInThemesDoc.vue index 56b5db9f3..50105cf85 100644 --- a/doc/theming/BuiltInThemesDoc.vue +++ b/doc/theming/BuiltInThemesDoc.vue @@ -31,10 +31,18 @@ primevue/resources/themes/lara-light-blue/theme.css primevue/resources/themes/lara-light-indigo/theme.css primevue/resources/themes/lara-light-purple/theme.css primevue/resources/themes/lara-light-teal/theme.css +primevue/resources/themes/lara-light-green/theme.css +primevue/resources/themes/lara-light-amber/theme.css +primevue/resources/themes/lara-light-cyan/theme.css +primevue/resources/themes/lara-light-pink/theme.css primevue/resources/themes/lara-dark-blue/theme.css primevue/resources/themes/lara-dark-indigo/theme.css primevue/resources/themes/lara-dark-purple/theme.css primevue/resources/themes/lara-dark-teal/theme.css +primevue/resources/themes/lara-dark-green/theme.css +primevue/resources/themes/lara-dark-amber/theme.css +primevue/resources/themes/lara-dark-cyan/theme.css +primevue/resources/themes/lara-dark-pink/theme.css primevue/resources/themes/soho-light/theme.css primevue/resources/themes/soho-dark/theme.css primevue/resources/themes/viva-light/theme.css diff --git a/doc/theming/SwitchThemesDoc.vue b/doc/theming/SwitchThemesDoc.vue index 3a5de50ae..f955ad3ad 100644 --- a/doc/theming/SwitchThemesDoc.vue +++ b/doc/theming/SwitchThemesDoc.vue @@ -47,7 +47,7 @@ PrimeVue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {} }, code4: { basic: ` - + ` }, code5: { @@ -59,7 +59,7 @@ export default defineNuxtConfig({ { id: 'theme-link', rel: 'stylesheet', - href: baseUrl + 'themes/lara-light-teal/theme.css' + href: baseUrl + 'themes/lara-light-green/theme.css' } ] } diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue index 14cb3b29a..9ac6e3d1d 100755 --- a/layouts/AppConfigurator.vue +++ b/layouts/AppConfigurator.vue @@ -36,13 +36,23 @@ + + +
-
-
+ - -
diff --git a/layouts/default.vue b/layouts/default.vue index 2ac9ab98b..c92dc3448 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -94,7 +94,7 @@ export default { newTheme = currentTheme.replace('dark', 'light'); } else { if (currentTheme.includes('light') && currentTheme !== 'fluent-light') newTheme = currentTheme.replace('light', 'dark'); - else newTheme = 'lara-dark-teal'; //fallback + else newTheme = 'lara-dark-green'; //fallback } EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme }); diff --git a/nuxt.config.js b/nuxt.config.js index 01868b113..ee9386ec8 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -52,12 +52,12 @@ export default defineNuxtConfig({ { id: 'home-table-link', rel: 'stylesheet', - href: baseUrl + 'styles/landing/themes/lara-light-teal/theme.css' + href: baseUrl + 'styles/landing/themes/lara-light-green/theme.css' }, { id: 'theme-link', rel: 'stylesheet', - href: baseUrl + 'themes/lara-light-teal/theme.css' + href: baseUrl + 'themes/lara-light-green/theme.css' }, { rel: 'icon', href: baseUrl + 'favicon.ico' } ], diff --git a/pages/index.vue b/pages/index.vue index 218b89c8b..58ba1d022 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -38,7 +38,7 @@ export default { }, data() { return { - tableTheme: 'lara-light-teal' + tableTheme: 'lara-light-green' }; }, themeChangeListener: null, @@ -53,11 +53,11 @@ export default { document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org'; } - this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-teal' : 'lara-light-teal'); + this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-green' : 'lara-light-green'); }, methods: { onDarkModeToggle() { - const newTheme = this.$appState.darkTheme ? 'lara-light-teal' : 'lara-dark-teal'; + const newTheme = this.$appState.darkTheme ? 'lara-light-green' : 'lara-dark-green'; const newTableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark'); EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme }); diff --git a/pages/landing/ThemeSection.vue b/pages/landing/ThemeSection.vue index 76a5784bf..e149b0c9e 100644 --- a/pages/landing/ThemeSection.vue +++ b/pages/landing/ThemeSection.vue @@ -3,7 +3,7 @@
Themes

Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as Material, Bootstrap, Tailwind, PrimeOne or develop your own.

- + more... diff --git a/plugins/app-state.js b/plugins/app-state.js index 19922f580..90afbf7b8 100644 --- a/plugins/app-state.js +++ b/plugins/app-state.js @@ -1,6 +1,6 @@ const $appState = { install: (Vue, options) => { - Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-teal', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: false, announcement: null, storageKey: 'primevue' }); + Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-green', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: false, announcement: null, storageKey: 'primevue' }); } };