How to Customize Indigo Theme and CSS Variables for Micro-Frontends in Open edX?

Site Operators Tutor Help
1

I’m working with Open edX, specifically using the Indigo theme and Micro-Frontends (MFEs). I want to customize the theme by setting CSS variables or tokens to maintain consistent branding across the platform. However, I’ve run into some challenges and am not sure how to proceed.

My Setup:

  1. Open edX platform is hosted with the Indigo theme.
  2. I’m working with Tutor for managing the Open edX instance.
  3. The Micro-Frontends (React-based) are running on apps.local.edly.io.

What I’ve Tried:

  • I’ve looked into modifying the Indigo theme’s Sass variables (e.g., $primary-color) but couldn’t figure out the process to make these changes take effect.
  • I don’t have React components inside the indigo-theme folder to directly manage styles or tokens for MFEs.
  • I’ve come across mentions of the @edx/brand package, but I’m unclear on how to use it to integrate the custom styles with MFEs.

Questions:

  1. How can I customize the Indigo theme to define CSS variables or tokens?
  2. Is it possible to ensure these customizations are applied across both the core platform and the MFEs? If yes, what’s the best way to do this?
  3. Do I need to modify or replace the @edx/brand package for this, and how do I integrate it properly with Tutor-managed MFEs?

I’d appreciate detailed instructions or pointers to documentation that can help me resolve this issue. Let me know if more details about my setup are needed. Thanks!

2

Hi @Amjad_Shadid, welcome to the community!
Please check our tutor-branding plugin. It will address most of your branding needs.

Andrés

1 Like
3

Hey @Andres.Aulasneo
thanks for your response.
Excuse me for misunderstanding. I didn’t mean that. I am trying now to use external css file available on AWS. and I am facing the same issue, about overriding the style in MFE. I can’t see any result in the mfe.

Please advice.

config.yml:

CMS_HOST: studio.local.edly.io
CMS_OAUTH2_SECRET: U2MaQmKsSu10n4gQ7jsa2qB6
CONTACT_EMAIL: contact@local.edly.io
ENABLE_HTTPS: false
FRONTEND_APP_LEARNER_DASHBOARD_URL: http://apps.local.edly.io:1997
ID: 7weql4JrE27eG8ibcDsG6etJ
INDIGO_EXTRA_FILES: /project-indigo-theme/css
INDIGO_PRIMARY_COLOR: salmon
LMS_HOST: local.edly.io
MFE_CONFIG_OVERRIDES:
  THEME_OVERRIDES_SCSS: https://my-branding-assets.s3.eu-north-1.amazonaws.com/paragon/_overrides.scss
MFE_NPM_REGISTRY: https://registry.npmjs.org/
MOUNTS:
- /Users/amjadshadid/Desktop/zeit-theme-project/project-indigo-theme
MYSQL_ROOT_PASSWORD: IPCz3wLx
NPM_REGISTRY: https://registry.yarnpkg.com
OPENEDX_MYSQL_PASSWORD: lJzIlOxn
OPENEDX_SECRET_KEY: EAV8E1hCamOQ7vqjEWMktpba
PLATFORM_NAME: My Open edX
PLUGINS:
- indigo
- mfe
- myplugin
PLUGIN_INDEXES:
- https://overhang.io/tutor/main
PRIMARY_COLOR: rgb(31, 120, 255)