Custom theme without app customizing

picture_as_pdf

If you want a custom look for your app, your best bet is to use our app as a base and build your own app from it. You can easily adjust the theme and set your own icons without having to implement any logic. You just handle the styling, and everything else remains just as dynamic.

However, if you would rather avoid that extra effort, we also offer several customizations that do not require a separate native app. For instance, you can specifically round the corners or set your own colors. It is super simple and can be done right in the mobile_styles.xml:

mobile_styles.xml

<style>
  ...
 
  <theme>
    ...
 
    <!-- primary color -->
    <color>#ffa600</color>
 
    <data>
      <borderRadius>15</borderRadius>
      <drawer>
        <background>#d8dada</background>
        <backgroundTop>#5498b4</backgroundTop>
        <menuIconColor>#555555</menuIconColor>
      </drawer>
      <button>
        <borderRadius></borderRadius>
        <background>#3e8c3a</background>
        <foreground>#172117</foreground>
      </button>
      <buttongroup>
        <borderRadius></borderRadius>
      </buttongroup>      
      <slidebutton>
        <borderRadius></borderRadius>
        <handleRadius></handleRadius>
      </slidebutton>
      <popupmenu>
        <borderRadius></borderRadius>
      </popupmenu>
      <table>
        <floatingbutton>
          <background>#5a8157</background>
          <foreground>#eeeeee</foreground>
        </floatingbutton>
        <borderRadius></borderRadius>
      </table>      
      <list>
        <floatingbutton>
          <background>#5a8157</background>
          <foreground>#eeeeee</foreground>
        </floatingbutton>
        <borderRadius></borderRadius>
        <card>
          <borderRadius></borderRadius>
        </card>
      </list>	  
      <editor>
        <borderRadius></borderRadius>
      </editor>      
      <dialog>
        <borderRadius></borderRadius>
      </dialog>      
      <group>
        <header>
          <background>#3e8c3a</background>
        </header>
      </group>
 
      <gridMenu>
        <padding>10, 15, 0, 0</padding>
        <paddingTop>10</paddingTop>
        <tileBorderRadius>20</tileBorderRadius>
        <background>#FAFAFA</background>
 
        <groupTitleBackground>#FAFAFA</groupTitleBackground>
        <groupTitleForeground>#333333</groupTitleForeground>
 
        <tileBackground>#dddddd</tileBackground>
        <tileForeground>#555555</tileForeground>
        <tileTitleBackground>#666666</tileTitleBackground>
        <tileTitleForeground>#FAFAFA</tileTitleForeground>
      </gridMenu>
 
    </data>
  </theme>
 
  <dark.theme>
    <data>
	  <drawer>
	    <background></background>
	    <backgroundTop></backgroundTop>
	  </drawer>
    </data>	  
  </dark.theme>
 
  <menu>
    ...
 
    <titleColor>#FAFAFA</titleColor>
  </menu>  
 
  <dark.menu>
    <titleColor>#212121</titleColor>
  </dark.menu>
 
  <screen>
    <titleColor>#FAFAFA</titleColor>
  </screen>
 
  <dark.screen>
    <titleColor>#212121</titleColor>
  </dark.screen>    
</style>  

You can always override default (light) settings with dark settings. The first tag must start with dark., e.g.: <screen> → <dark.screen>. That's it.