Custom themes

[diydan]

Is your feature request related to a problem? Please describe.

When integrating with other platforms it would be great to apply a custom CSS theme to streamline the user experience.

Describe the solution you'd like

An option to use external CSS or JS external file or select from some predefined themes when creating the build.

Describe alternatives you've considered

Injecting CSS/JS after the build to override the CSS styles.

Additional context

Add any other context or screenshots about the feature request here.

[kantord]

Thanks for the feature request, @diydan

@allcontributors please add @diydan for ideas.

My rough idea about how to implement this:

Stage 1

Make all branding references (including the logo) configurable. The idea is:

• create a branding.json file with a content similar to this:

{
  "productName": "LibreLingo",
  "mascot": {
    "default": "...etc...",
    "happy": "...etc...",
    "..etc": "etc..."
  }
}

Note that there are different versions of the logo/mascot, since it's used as an illustration on different screens. Someone with different branding need might want to replace these as well.

• make all references to the brand name or the logo in the code use the values from the JSON

One example of the code that would need to be changed: https://github.com/kantord/LibreLingo/blob/7789271abf2c5b647794dc82ae91b173132322d8/workspaces/web/src/components/Mascot.svelte#L1-L16

Stage 2

Make all colors, font sizes basic layout/typographical settings customizable. I don't see passing custom CSS files as a viable/future-proof solution. Maintaining custom themes and making sure they don't break with each new version of the app would be a mess.

There is some work in progress to replace bulma with a CSS-in-JS solution. Basically the end goal is to have a UI kit completely implemented with components like this one: https://github.com/kantord/LibreLingo/blob/master/workspaces/lluis/Columns.svelte.

That will solve our problem, because then we can use CSS variables to define all of those values. Meaning the custom CSS would only need to contain the CSS variables, which will be much easier to maintain over time, and can come with sensible fallback values.

[allcontributors[bot]]

@kantord

I've put up a pull request to add @diydan! :tada:

[diydan]

Great, both sound like good solutions, let me know if we can help with implementing or testing.

[kantord]

@diydan if you could help with implementing stage 1, that would be amazing!

Stage 2 is a bit more fuzzy, I'll try to also get closer to being able to implement that one

[diydan]

Cool, I'll take look at getting stage 1 done next week.

[kantord]

Hi @diydan, any news?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kantord]

Not closing this. Progress is slowly being made to create custom themes. This MR will bring us closer to it for example: https://github.com/kantord/LibreLingo/pull/1533/files#diff-cb75e1531bcf624b854c9ebe76a262316c870efa05ccec160f4041d335bf8e93R68

[frostedkitsune]

Yes UI kit is the thing we need and components, let me know when stage 2 starts

[frostedkitsune]

and having some well defined themes is what we need initially, we should think about more/custom defiend themes later

[kantord]

and having some well defined themes is what we need initially, we should think about more/custom defiend themes later

yup, agreed