Theme - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki

Overview

The THEME involves three methods to give customization and control of the application theme. A configuration setting, an event to change theme and a widget to specify a scope to selectively theme child widgets.

Table of Contents

Usage

  • To set the application's default theme colorscheme open config.xml located the root directory set the <BRIGHTNESS> to light/dark and <COLOR_SCHEME> to a color then the entire theme generate a colorscheme (default is light/blue).
  • To change the theme you can call the event theme
  • To apply a specific color to a theme attribute for a subset of widgets within a template you can use inline themeing

Default Scheme (light/blue)

Theme Event

Example usages:

theme('dark', 'deeppurple') or

<VAR id='brightness' value="light" /> 
<BUTTON onclick="theme({brightness})', '#000FFF')" />

Inline Theming

This applies the scoped theme on a widget and its children for overriding system theming. To utilize it wrap a THEME widget around anything within a regular template.

Its important to note if wrapping multiple children to include a layout widget such as <BOX>

Example:

<THEME primary="#2D476F" onprimary="#FFC800" inverseprimary="#FFC800">
  <BOX>
    <SWITCH value="true" />
    <BUTTON type="elevated" label="Click Me" onclick="" />
  </BOX>
</THEME>

Theme Attributes:

<ELEMENT /> value=
brightness "light" / "dark"
primaryColor Color
primaryColorLight Color
primaryColorDark Color
accentColor Color
canvasColor Color
scaffoldBackgroundColor Color
bottomAppBarColor Color
cardColor Color
dividerColor Color
highlightColor Color
splashColor Color
selectedRowColor Color
unselectedWidgetColor Color
disabledColor Color
buttonColor Color
toggleableActiveColor Color
secondaryHeaderColor Color
cursorColor Color
textSelectionColor Color
textSelectionHandleColor Color
backgroundColor Color
dialogBackgroundColor Color
indicatorColor Color
hintColor Color
errorColor Color

Theme Playground Template

Click to expand 
<FML>
    <VAR id="brightness" value="{THEME.brightness}" onchange="theme({brightness}, {selectedcolor})"/>
    <VAR id="selectedcolor" value="{THEME.colorscheme}" onchange="theme({brightness}, {selectedcolor})" />
    <BOX height="100%" width="100%">
        <PADDING top="10" />
        <BOX color="{THEME.background}" border="all" borderwidth="4" layout="row" halign="around" valign="center" expand="false" width="100%">
            <ROW valign="center" width="200" halign="around">
                <TEXT value="Brightness ({brightness})" />
                <PADDING all="4">
                    <ICON id="brightness-icon" icon="brightness_6" size="28" color="={brightness} == 'light' ? 'amber' : 'bluegrey'"/>
                </PADDING>
                <LINK onclick="{brightness} == 'light' ? brightness.set('dark');animate('switch'); : brightness.set('light');animate('switch');">
                    <BOX width="50" height="24" layout="stack" center="true">
                        <POSITIONED left="0">
                            <BOX width="50" height="20" radius="99" color="={brightness} == 'light' ? 'yellow' : '{THEME.surfacevariant}'"/>
                        </POSITIONED>
                        <POSITIONED id="pos" left="={brightness} == 'light' ? 26 : 0" right="={brightness} == 'light' ? 0 : 26">
                                <BOX width="24" height="24" radius="99" color="={brightness} == 'light' ? 'amber' : 'bluegrey'" />
                        </POSITIONED>
                    </BOX>
                </LINK>
            </ROW>
            <TEXT value="Theme Changer" style="h6"/>
            <BOX expand="false" width="200">
                <!-- <SWITCH color="green"/> -->
            </BOX>
        </BOX>

        <BOX height="10">
        </BOX>

        <BOX height="={SYSTEM.screenheight} - 160" width="100%" layout="row" halign="around" padding="8,0,0,0">
            <BOX width="25%">
                <LIST data="COLORS">
                    <ITEM>
                        <PADDING all="1">
                            <BUTTON type="={selectedcolor} == {data.color} ? 'elevated' : 'outlined'" onclick="selectedcolor.set({data.color})" height="26">
                                <BOX width="110" height="26" layout="row" valign="center" halign="between">
                                    <BOX color="{data.color}" height="20" width="32" radius="24" />
                                    <TEXT value="{data.color}" color="={selectedcolor} == {data.color} ? {brightness} == 'light' ? 'white' : 'black' : ''" />
                                </BOX>
                            </BUTTON>
                        </PADDING>
                    </ITEM>
                </LIST>
            </BOX>
            <BOX width="25%">
                <PADDING top="20" bottom="10" left="0">
                    <TEXT>
                        Test Custom Theme Colors:
                    </TEXT>
                </PADDING>
                <SELECT id="ibrightness" value="light">
                    <OPTION label="light" value="light" />
                    <OPTION label="dark" value="dark" />
                </SELECT>
                <INPUT id="icolor" hint="color" value="#000FFF" />
                <THEME primary="{icolor}">
                    <BUTTON type="elevated" onclick="{ibrightness} == 'light' || {ibrightness} == 'dark' ? selectedcolor.set({icolor});brightness.set({ibrightness}); : toast('brightness must be light or dark');" label="call theme('{ibrightness}','{icolor}')"/>
                </THEME>

            </BOX>
            <BOX width="50%" height="100%">
                <PADDING all="20">
                    <TEXT>
                        Theme Color Scheme Bindables:
                    </TEXT>
                    <PADDING top="10" />
                    <ROW wrap="true">
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.background}" radius="10" center="true">
                                <TEXT color="grey" value="background" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.onbackground}" radius="10" center="true">
                                <TEXT color="grey" value="onbackground" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.shadow}" radius="10" center="true">
                                <TEXT color="grey" value="shadow" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.outline}" radius="10" center="true">
                                <TEXT color="grey" value="outline" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.surface}" radius="10" center="true">
                                <TEXT color="grey" value="surface" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.onsurface}" radius="10" center="true">
                                <TEXT color="grey" value="onsurface" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.surfacevariant}" radius="10" center="true">
                                <TEXT color="grey" value="surfacevariant" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.onsurfacevariant}" radius="10" center="true">
                                <TEXT color="grey" value="onsurfacevariant" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.inversesurface}" radius="10" center="true">
                                <TEXT color="grey" value="inversesurface" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.oninversesurface}" radius="10" center="true">
                                <TEXT color="grey" value="oninversesurface" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.primary}" radius="10" center="true">
                                <TEXT color="grey" value="primary" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.onprimary}" radius="10" center="true">
                                <TEXT color="grey" value="onprimary" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.primarycontainer}" radius="10" center="true">
                                <TEXT color="grey" value="primarycontainer" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.onprimarycontainer}" radius="10" center="true">
                                <TEXT color="grey" value="onprimarycontainer" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.inverseprimary}" radius="10" center="true">
                                <TEXT color="grey" value="inverseprimary" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.secondary}" radius="10" center="true">
                                <TEXT color="grey" value="secondary" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.onsecondary}" radius="10" center="true">
                                <TEXT color="grey" value="onsecondary" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.secondarycontainer}" radius="10" center="true">
                                <TEXT color="grey" value="secondarycontainer" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.onsecondarycontainer}" radius="10" center="true">
                                <TEXT color="grey" value="onsecondarycontainer" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.tertiarycontainer}" radius="10" center="true">
                                <TEXT color="grey" value="tertiarycontainer" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.ontertiarycontainer}" radius="10" center="true">
                                <TEXT color="grey" value="ontertiarycontainer" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.error}" radius="10" center="true">
                                <TEXT color="grey" value="error" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.onerror}" radius="10" center="true">
                                <TEXT color="grey" value="onerror" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.errorcontainer}" radius="10" center="true">
                                <TEXT color="grey" value="errorcontainer" />
                            </BOX>
                        </PADDING>
                        <PADDING all="2">
                            <BOX width="140" height="40" color="{THEME.onerrorcontainer}" radius="10" center="true">
                                <TEXT color="grey" value="onerrorcontainer" />
                            </BOX>
                        </PADDING>
                    </ROW>
                </PADDING>
            </BOX>
        </BOX>
    </BOX>
    

    <DATA id="COLORS" autoexecute="true">
        <VALUE>
            <![CDATA[<ROWS>
                <ROW>
                    <color>red</color>
                </ROW>
                <ROW>
                    <color>pink</color>
                </ROW>
                <ROW>
                    <color>purple</color>
                </ROW>
                <ROW>
                    <color>deeppurple</color>
                </ROW>
                <ROW>
                    <color>indigo</color>
                </ROW>
                <ROW>
                    <color>blue</color>
                </ROW>
                <ROW>
                    <color>lightblue</color>
                </ROW>
                <ROW>
                    <color>cyan</color>
                </ROW>
                <ROW>
                    <color>teal</color>
                </ROW>
                <ROW>
                    <color>green</color>
                </ROW>
                <ROW>
                    <color>lightgreen</color>
                </ROW>
                <ROW>
                    <color>lime</color>
                </ROW>
                <ROW>
                    <color>yellow</color>
                </ROW>
                <ROW>
                    <color>amber</color>
                </ROW>
                <ROW>
                    <color>orange</color>
                </ROW>
                <ROW>
                    <color>deeporange</color>
                </ROW>
                <ROW>
                    <color>brown</color>
                </ROW>
                <ROW>
                    <color>bluegrey</color>
                </ROW>
            </ROWS>]]>
        </VALUE>
    </DATA>
    <DATA id="THEMESCHEME" root="ROW" autoexecute="true">
        <VALUE>
            <![CDATA[<ROWS>
                <ROW>
                    <themecolor>background</themecolor>
                </ROW>
                <ROW>
                    <themecolor>onbackground</themecolor>
                </ROW>
                <ROW>
                    <themecolor>shadow</themecolor>
                </ROW>
                <ROW>
                    <themecolor>outline</themecolor>
                </ROW>
                <ROW>
                    <themecolor>surface</themecolor>
                </ROW>
                <ROW>
                    <themecolor>onsurface</themecolor>
                </ROW>
                <ROW>
                    <themecolor>surfacevariant</themecolor>
                </ROW>
                <ROW>
                    <themecolor>onsurfacevariant</themecolor>
                </ROW>
                <ROW>
                    <themecolor>inversesurface</themecolor>
                </ROW>
                <ROW>
                    <themecolor>oninversesurface</themecolor>
                </ROW>
                <ROW>
                    <themecolor>primary</themecolor>
                </ROW>
                <ROW>
                    <themecolor>onprimary</themecolor>
                </ROW>
                <ROW>
                    <themecolor>primarycontainer</themecolor>
                </ROW>
                <ROW>
                    <themecolor>onprimarycontainer</themecolor>
                </ROW>
                <ROW>
                    <themecolor>inverseprimary</themecolor>
                </ROW>
                <ROW>
                    <themecolor>secondary</themecolor>
                </ROW>
                <ROW>
                    <themecolor>onsecondary</themecolor>
                </ROW>
                <ROW>
                    <themecolor>secondarycontainer</themecolor>
                </ROW>
                <ROW>
                    <themecolor>onsecondarycontainer</themecolor>
                </ROW>
                <ROW>
                    <themecolor>tertiarycontainer</themecolor>
                </ROW>
                <ROW>
                    <themecolor>ontertiarycontainer</themecolor>
                </ROW>
                <ROW>
                    <themecolor>error</themecolor>
                </ROW>
                <ROW>
                    <themecolor>onerror</themecolor>
                </ROW>
                <ROW>
                    <themecolor>errorcontainer</themecolor>
                </ROW>
                <ROW>
                    <themecolor>onerrorcontainer</themecolor>
                </ROW>
            </ROWS>]]>
        </VALUE>
    </DATA>
</FML>

Documentation you may find useful

Framework Markup Language is an open source programming language created by AppDaddy Software Solutions Inc. FML and is licensed under a fair source license agreement and is maintained by a community of developers.

⚠️ **GitHub.com Fallback** ⚠️