frontend-platform
frontend-platform copied to clipboard
feat: adds support for loading external theme CSS for MFEs
Description:
Implementation POC/prototype for ADR on loading a common, external stylesheet for MFEs.
- Introduces
useParagonTheme
inAppProvider
to load/inject<link>
elements for the core theme CSS and any theme variant CSS into the HTML document. - Exposes the app theme state and a way for applications to expose functionality to toggle between theme variants to consumers via
AppContext
. - Supports a dark theme variant (even though Paragon itself does not yet have a dark theme variant).
- Supports a few mechanisms for determining which theme variant to make "active" and visible to the user:
- When an application sets a theme variant programmatically (e.g., by exposing a button to the user to switch between light and dark modes), the selected theme variant is stored in
localStorage
so it persists/loads across sessions and page refreshes. - When no theme variant is selected in
localStorage
, checks if the user's System Preferences has a preference for dark mode via a@media
query forprefers-color-scheme: dark
. If dark color scheme is preferred, the default configured dark theme variant is made visible, if one exists.- When the
prefers-color-scheme: dark
query changes (i.e., user updates their System Preferences), loads the appropriate default theme variant corresponding to the system preference in real time.
- When the
- When either the dark mode theme variant doesn't exist or the default light theme is actively visible, finds the default configured light theme variant.
- When an application sets a theme variant programmatically (e.g., by exposing a button to the user to switch between light and dark modes), the selected theme variant is stored in
See theming.md for documentation and more details.
Merge checklist:
- [ ] Consider running your code modifications in the included example app within
frontend-platform
. This can be done by runningnpm start
and opening http://localhost:8080. - [ ] Consider testing your code modifications in another local micro-frontend using local aliases configured via the
module.config.js
file infrontend-build
. - [ ] Verify your commit title/body conforms to the conventional commits format (e.g.,
fix
,feat
) and is appropriate for your code change. Consider whether your code is a breaking change, and modify your commit accordingly.
Post merge:
- [ ] After the build finishes for the merged commit, verify the new release has been pushed to NPM.