Adding a custom theme

[ivan]

It would be great to have the ability to add a custom theme. This would allow the use of a custom color palette (same colors as a corporate logo).

Current workaround (not ideal, but works):

Right now, the way to change colors is to add a custom header with a lot of CSS color definitions.

For instance:

<style>
  
.btn-primary {
background-color: #2e70bb;
border: 1px solid #2e70bb;
}
.btn-primary:hover {
background-color: #1D4676;
border:  1px solid #1D4676
}
.btn-outline.btn-primary {
background-color: #FFFFFF;
}
.btn-outline.btn-primary:hover {
background-color: #2e70bb;
}

  
.btn-danger {
/* background-color: #f2366b; */
background-color: #F82F60;
border: 1px solid #F82F60;
}
.btn-danger:hover {
background-color: #AE0B39;
border: 1px solid #AE0B39;
}
.btn-outline.btn-danger {
background-color: #FFFFFF;
}
.btn-outline.btn-danger:hover {
background-color: #F82F60;
}

.btn-success {
background-color: #45befc;
border: 1px solid #45befc;
}
.btn-success:hover {
background-color: #0385C6;
border: 1px solid #0385C6;
}
.btn-outline.btn-success {
background-color: #FFFFFF;
}
.btn-outline.btn-success:hover {
background-color: #45befc;
}

.btn-info {
background-color: #4D4D4D;
border: 1px solid #4D4D4D;
}
.btn-info:hover {
background-color: #303030;
border: 1px solid #303030;
}
.btn-outline.btn-info {
background-color: #FFFFFF;
}
.btn-outline.btn-info:hover {
background-color: #4D4D4D;
}
  
.btn {
border-radius: 4px;
}
  
.btn-success {
 border-radius: 24px;
 text-align:center;
}

.badge-wh-2 {
  background-color: #24C65A;
}
.badge-wh-3 {
  background-color: #45befc;
}

</style>

[moe]

Ivan, is your intention to be able to select custom themes based on who’s logged in? I’m sure you can accomplish this with some custom JS.

We’re working actively working on better custom designs throughout your app. Part of this update will be to enable you to create custom themes and upload custom CSS.

We have 2 designers building many custom themes for each component and you’ll be able to select custom designs for each component, row, column etc. We hope to get very granular with what you can do but at the same time give you beautiful designs as templates.

here’s a rough sneak peak of what it will look like.

(This rough draft, please keep in mind by the time this rolls out to production it can likely look substantially different.

Some more screenshot samples of cool upcoming designs:

This is just a few examples of what’s coming… there are dozens more.

We’re working on our upcoming Tadabase Pipes which will be released prior to this design update.

As a sneak peak with Pipes you’ll be able to trigger an API request and save those values, merge values in components, validate when pages load and so much more.

Think of it as Built In Zapier, but not just for record values also for form validation, display rules and merging external data on the front end of your app and so much more…

[muhammad]

Wow cant wait to see more about pipes and latest design customization.