Custom Light Theme

Hi all :wave:

Today I’m sharing a theme featuring bright colors, rounded corners, card style backgrounds, and big bold fonts.

Check it out here

To install this theme on your app, copy the following code from the link below and paste in the Custom Header section of your app settings.



@tim.young How do I change the colour of the menu? The menu is changed by this CSS code, but the color of the menu stays with the installed app theme.

Hi @Peter,

Can you post a screenshot of what you’re referring to?

This is the theme I am using in my app.
Colour of the menubar is #33a6e7

In your theme here the colour of the menubar is #0061FF.

If I copy the code above, I see a lot of changes in the menubar: size of the letters in the menu, rounded corners and so on. Just the colour remains the colour of the installed theme.


So what should I do to override the colour of the installed theme to the colour of the code above?
Or should I first install Default theme for my app to overcome this issue?

@tim.young indeed that is the problem: these custom themes you mention here work, but first you must make sure there is no other theme, than the default theme, chosen in the app settings.

If you have a Cerulean theme chosen, it can not be completely overridden with putting this custom light theme in the app Custom Header

Sorry @Peter, completely forgot to respond!

You can get this by adding !important next to any color changes in the CSS. For example…

  .navbar-default {
        background-color: #0061FF !important;
        border-radius: 2rem;
        padding: 10px;
        border: none;

Hi @tim.young,

Attached is a screenshot of a page in my app. As you can see, the pop-up calendar in a date field appears squished. Do you know of any way to fix this issue? Thanks.

Hey @mbautista7!

I’m not seeing an issue when testing on my end. Is it possible that you have any other custom CSS in your app?

Hi @tim.young. Thanks for the help, that was the issue! Much appreciated.

1 Like

@tim.young I have a problem with this theme. The navigation looks good, but it also has an influence on the tabs of the table and of the tabs of a card.

So I like the menu, but it should not influence the tabs on the same page.
How can I overwrite the tabs, so it goes back to 1em (in stead of 2em letter size in the menu)?


Hey @Peter,


.nav>li {
    font-size: 2rem;
    text-align: center;
    margin: 5px;


.navbar-default .nav>li {
    font-size: 2rem;
    text-align: center;
    margin: 5px;

I’ve updated the code in the original post to reflect this.

Hi Tim, thanks for the great work. I need a suggestion to reduce this spacing between the lines because the calendar box is too big. Can you help?

Hey @umaajuda I’ve update the code in the original post to fix this. :+1:

1 Like

Thank you Tim! Works perfect!

1 Like

Very nice work Tim !

1 Like