✎ Custom theme without app customizing

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~NOTRANS~~
~~Title: Custom theme without app customizing~~
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''':

<file 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>  
</file>

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.