Differences

This shows you the differences between two versions of the page.

--- flutterui:theme_no_customizing [2026/04/15 08:38]
admin created
+++ flutterui:theme_no_customizing [2026/04/15 10:14] (current)
admin
@@ Line 1: / Line 1: @@
 ~~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.