Open edX theming improvements and simplification

Hi everyone,

I’m Giovanni from OpenCraft.

We faced many issues in the past when dealing with theming Open edX instances,
specially because there are so many theming systems and not all of them work in
the same way or are very consistent.

To deal with that, we built a simple theme that fixes most inconsistencies on
the platform and adds a few variables to allow easy customization and offer a
more streamlined experience for new users that is easy to customize and offers
a good amount of customizations.

We think that these improvements might help the community and offer an easy way
to customize the platform without requiring much HTML/CSS/SASS knowledge to
operate.

Now for the technical bits:

We built this theme around the Comprehensive theming system, that allows a more
direct customization to the platform’s files.

Using the same CSS selectors that exist on the platform, we have created a common,
base SASS file with all the styles with additional variables that allow us to
customize things as we need. These styles we have created are an exact copy-paste
in almost all the cases - we use the same selector and CSS property and just use
a variable there to easily override colors.

The idea is to be able to customize colors in various common parts of the interface
easily using specific SASS variables instead of having to write custom SASS
which works across two types of styling.

We did that for our simple theme, but we want to incorporate those changes into
the platform while the microfrontends and officially supported theming system lands.

We wish to have these variables merged upstream and use the configuration role
linked below to pass the variables to the platform.

edX:
Can you take a look at the PR’s and give feed back on the changes?
What to we need to change to land this?

Community:
What do you think of this idea?

Here are the links to the theme and role pull requests:

And here is an internal discovery that we did to implement this change:
https://docs.google.com/document/d/1os7_jP2tgxzr3hCmETq7PUykQM1ubLn_TXohneKTE6Q/edit?usp=sharing

1 Like

@giovannicimolin This is interesting, could you please post a few screenshots of the theme in action?

@regis Sure! I’ll spawn a sandbox with some theming options and ad a few screenshots to the post before the end of the week.

1 Like