How to use the new Simple Theme Tutor Plugin

It is currently documented in the code only. I’ve started another discussion to generally improve the docs to move these from the code to readmes.

It will work in a similar way to simple theme in the past. i.e. it will take the existing repo and add the design tokens configured here to it and then build the theme.

Grove will put these variables in a SCSS file where they can be loaded by the theme and install the theme on edx-platform. Whatever bits of the UI that are served by edx-platform (e.g. instructor dashboard and XBlocks as I mentioned before) will be themed using this. For instances that don’t require theming for those, we can skip this.

Whatever customisations a client requires, such as branding colors, need to be applyed in two ways, first is the design tokens via simple theme and the other is via scss variables via this grove config. If no customisations are needed then this

In most cases you don’t need to do anything. You only need to touch MFE_CONFIG[“PARAGON_THEME_URLS”] if you have more advanced multi-theme requirements. I’ll remove this bit from the original post since it’s still untested and we can keep this focussed on standard single-theme deployments.

PARAGON_THEME_URLS is ONLY used for design-token-based themes. It tells the MFEs where to load the themes from. So in more complex setups you can build themes independent of the simple theme plugin, upload them to a CDN and configure this to tell it where to load the theme from. This is detailed in the guide I linked. The way it relates to simple theme is that that simple theme is the base theme you can configure using design tokens, and build and upload to a CDN, this was the way to do things before the simple theme plugin.

GROVE_THEMES is how you provide design tokens to tutor which will build these into toml files, install them over edx-simple-theme, and then build them and install them into MFEs. This is similar to how THEMES in grove.yml would provide variables to grove so it could build those variables into SCSS files add them to edx-simple-theme and install them into edx-platform.

If you’re using simple theme you don’t need to worry about any of that, it’s all done for you. When you add GROVE_THEMES it will use the to generate design tokens, place them in edx-simple-theme build it and install it into MFEs.

1 Like