Projects

The Theming System & Theme Builder

Tapas Adhikary

Tapas Adhikary

November 14, 2020

2 min read


stars0
forks0
watchers 0
MIT

Background

A while back, one of the customers asked about the ability to create, manage, apply, and switch custom themes for the product we just sold them. Fair enough, Customer == GOD, after all! We thought of fulfilling the desire.

The theming system helps you in building a theme of your choice and apply it to test it live. Why wait? Just give it a try.

So, what is a theming system?

Well, the term theming system may be a heavy one. It helps an end-user to create, manage, and apply themes to an application in simple English.

What is a Theme, btw?

In general, a theme could be a combination of colors, fonts, images, and many more. Again, you can have colors for texts, backgrounds, links, whatever you want. We have seen enough of light and dark themes so far!

Here is an example of a theming system,

Create a Theme and Apply It

create theme

Switch Themes

switch themes

So, in the above images, you can see we can create, apply, and switch between themes. So it is a bit more than just the Dark and Light themes.

How and where do we define these themes?

It depends(I know, you hate this answer!). But that's the best I can give here. You can define the themes in a JSON schema or keep it in the database, up to you. Here is an example of how you can create the JSON schema of a theme.