frontend-platform icon indicating copy to clipboard operation
frontend-platform copied to clipboard

feat: adds support for loading external theme CSS for MFEs

Open adamstankiewicz opened this issue 1 year ago • 23 comments

Description:

Implementation POC/prototype for ADR on loading a common, external stylesheet for MFEs.

  • Introduces useParagonTheme in AppProvider 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 for prefers-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 either the dark mode theme variant doesn't exist or the default light theme is actively visible, finds the default configured light theme variant.

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 running npm 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 in frontend-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.

adamstankiewicz avatar Feb 15 '23 22:02 adamstankiewicz