Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BD-46] feat: add ability to dynamically load theme overrides #435

Conversation

viktorrusakov
Copy link
Contributor

@viktorrusakov viktorrusakov commented Feb 2, 2023

Description:

Adds ability to dynamically override theme with external CSS stylesheet. This is a part of design tokens work done in Paragon, see related ADR

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.

@openedx-webhooks openedx-webhooks added the blended PR is managed through 2U's blended developmnt program label Feb 2, 2023
@openedx-webhooks
Copy link

openedx-webhooks commented Feb 2, 2023

Thanks for the pull request, @viktorrusakov!

This is currently a draft pull request. When it is ready for our review and all tests are green, click "Ready for Review", or remove "WIP" from the title, as appropriate.

@viktorrusakov viktorrusakov marked this pull request as draft February 2, 2023 07:51
@viktorrusakov viktorrusakov force-pushed the vrusakov/runtime-theming-with-design-tokens branch from 251f96d to 4542069 Compare February 2, 2023 07:53
@@ -61,8 +62,28 @@ export default function AppProvider({ store, children }) {
setLocale(getLocale());
});

useEffect(() => {
if (config.THEME_OVERRIDE_URL) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

todo: correctly handle dynamic THEME_OVERRIDE_URL change (e.g., don't create new link). Although I don't think it can change during runtime, should still consider such case.

const appContextValue = useMemo(() => ({ authenticatedUser, config, locale }), [authenticatedUser, config, locale]);

if (!themeLoaded) {
Copy link
Contributor Author

@viktorrusakov viktorrusakov Feb 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't show anything until theme override loaded to avoid showing content with default theme, before the overrides have been applied

@adamstankiewicz
Copy link
Member

Closed in favor of #440

@openedx-webhooks
Copy link

@viktorrusakov Even though your pull request wasn’t merged, please take a moment to answer a two question survey so we can improve your experience in the future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blended PR is managed through 2U's blended developmnt program
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants