Theme picker #232
Theme picker #232
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR implements a dynamic theme picker that enables switching between two company themes (Contoso and Zava) based on the COMPANY_NAME environment variable. The feature provides a complete theming solution affecting both visual appearance and content across store-front and store-admin applications.
Key changes include:
- Implementation of a dynamic theming system using Vue composables and CSS custom properties
- Addition of the Zava theme alongside the default Contoso theme
- Runtime configuration endpoints to fetch theme settings
- Product data theming in the product service to reflect company branding
Reviewed Changes
Copilot reviewed 35 out of 44 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/store-front/vite.config.ts | Added runtime config endpoint and updated API proxying |
| src/store-front/src/config/themes.ts | Defined theme configurations for Contoso and Zava |
| src/store-front/src/composables/useTheme.ts | Created theme management composable with DOM application logic |
| src/store-front/src/components/TopNav.vue | Updated to use dynamic logo from theme configuration |
| src/store-front/src/assets/styles.scss | Enhanced CSS with theme variables and responsive design |
| src/store-admin/* | Mirrored theming implementation for admin portal |
| src/product-service/src/data.rs | Updated product data to use company name from configuration |
| kustomize/overlays/azd/* | Added environment variable configuration for Kubernetes |
| azure.yaml | Added COMPANY_NAME environment variable deployment configuration |
Files not reviewed (1)
- src/store-admin/package-lock.json: Language not supported
usepowershell
force-pushed
the
theme_picker
branch
from
61ad1f7 to
6984496
Compare
…iable - Added support for dynamic theming in the store front application. - Introduced COMPANY_NAME and PRODUCT_SERVICE_URL environment variables. - Updated Dockerfile to substitute environment variables in nginx config and HTML. - Created a new useTheme composable to manage theme application and initialization. - Defined themes for Contoso and Zava in a new themes configuration file. - Updated TopNav component to use dynamic logo based on the selected theme. - Modified styles to utilize CSS custom properties for theming. - Enhanced ShoppingCartView with theme-aware styles. - Added runtime configuration endpoint in Vite for fetching company name. - Updated README with usage instructions for dynamic theming.
usepowershell
force-pushed
the
theme_picker
branch
from
39b957a to
c389e03
Compare
|
/test-e2e |
|
🚀 @smurawski Starting E2E tests... Workflow Run: 16680684398 |
|
❌ @smurawski E2E tests failed! Workflow Run: 16680684398 Please check the workflow logs for details and try again. |
|
/test-e2e |
|
🚀 @smurawski Starting E2E tests... Workflow Run: 16684366780 |
|
❌ @smurawski E2E tests failed! Workflow Run: 16684366780 Please check the workflow logs for details and try again. |
1 participant
Purpose
Does this introduce a breaking change?
Everything should default to the base Contoso theme and naming.
Pull Request Type
What kind of change does this Pull Request introduce?
How to Test
Test the code
Open the store-front and store-admin url to see the new theming applied
What to Check
Verify that the following are valid
Other Information