Allow basic theme changes to be done from Django Admin

[tuxology]

ZubHub currently uses 3 primary colors. There is also a pre-defined font family (Raleway). We want to allow the Zubhub users to change these values from the backend using the admin interface. There are few tasks we need to do to achieve this:

• Extract colors, fonts and Font sizes being used and convert them to CSS variables. These values are in CSS files as well as embedded in JS.
• Allow modification of these variables from the backend from ZubHub settings. Add a new item called "Theme" in the area below.

[untari]

Hi @tuxology I'm trying to set up the repo in my local machine and I would like to work on these issues. Do I have to be assigned first to be able to work on this issues?

[tuxology]

You can begin working on this @untari I'll assign it to you.

[untari]

Hi @tuxology thanks! Will start working on it

[untari]

Hi @tuxology I figured the current workflow for now:

1. User gets the value in the admin page
2. The backend receives the value and saves it to a variable, should this be saved to the db?
3. When the frontend requests the page, it gets the value from the already set variable and uses it in the style of the page.

Can you please confirm this is the correct workflow, or if you suggest something different?

I find I might need to create new API calls to pass the style values from the backend to the frontend, is this correct or is there a better way to pass those vales?

Thanks!

[tuxology]

@untari Yes this is almost correct workflow. By extracting colors and styles, what I meant was carefully refactor the code and make these values configuration driven rather than being hardcoded in the code. Here is what I had in mind:

1. By default, there are color values that are same as the standard ZubHub color palette you see now. We stick to only 3 primary colors and their variations + 2 or 3 fonts. A set of these is called as a theme. The values of the theme are either stored in a configuration file or in DB (or a combination). Absence of values in DB/config file defaults the values of variables to the default palette.

2. The fronted uses the colors from this theme
3. A user has a "Theme" section in the admin panel from where they can individually set values in color codes for these variables)
4. When user clicks save in this theme section, the variables values are updated in config/ DB as you suggested
5. The next time frontend is refreshed, new theme colors are served to the user. (Eventually, over time, we will serve a set of these "themes" in a dropdown instead of manual replacement)

⚠️ Note
This may be a long effort since we need a backend API to serve styles I think (if I am not mistaken, @NdibeRaymond can confirm). We can therefore begin by just using some sort of simple custom extension to current CSS if these are easy. Somethign like this is done in Ghost called as "Code Injection". See https://forum.ghost.org/t/add-custom-css-to-ghost-theme/11970 This allows the users to directly insert on each served page which overrides the current default style. I am not sure if this is gonna be fast or the UX will look good, but its worth a try.

[kamthamc]

If the user can set color individually we could save them in a database, may be a json blob should be good as we could add or remove properties easily?

Updated: Sorry was thinking its per user. We could create a theme file with css variables. And we can have empty overrides file. If the Admin overrides any of the theme property, it could go into overrides file. In UI we load both theme and then overrides file

in Admin interface we could actually show a preview of color or font changes. When user saves the theme we update the json blob

Ui make an api call to fetch the user overrides and override the css values. It would be better if we use css variables and replace

[untari]

@tuxology @kamthamc Thanks a lot for all the help! I'll give it a look and get some working prototype soon.