Changing the accent color

How-to Discussions
1

How can I change the accent color of a theme or an individual control.

For example:
When switches are enabled instead of yellow I’d like to change it to #00B7FF
TextInput lines, when selected, should be #00B7FF
Buttons should be white

etc.

Also:
How can I make a button rotate an image and complete the animation and keep the new position regardles if the button is held or tapped?

This is what I currently have:

2

Hi!

If you are using a pre-defined theme, like BasicTheme, it is not that straight forward to change specifics like this, because a switch consists of many parts, like the knob, the track, the highlight circle etc. Each part has many different colors for different gradient stops, drop shadow colors etc. that are animated to other colors in different states.

The BasicTheme allows changint the color theme, you can do that like this:

<App>
    <Fuse.BasicTheme.BasicTheme ColorScheme="Blue" />
    ...

The more advanced option would be to completely override the appearance for a control. This means you have to build the style for the control from scratch. We are working on examples on how to do this, in the mean time I will share the complete code for how BasicTheme defines the appearance of Switch:

<Switch
    Focus.IsFocusable="true"
    Margin="4,4,4,4"
    Width="70"
    Height="48">

    <Panel ux:Binding="Appearance">

        <Circle
            ux:Name="_switchThumb"
            Alignment="CenterLeft"
            Width="20"
            Height="20"
            Margin="14,0,14,0">
            <SolidColor ux:Name="_thumbFill" Color="#fafafaff" />
            <DropShadow Angle="90" Distance="1" Size="5" />
        </Circle>

        <Circle
            ux:Name="_switchThumb2"
            Alignment="TopLeft"
            Width="48"
            Height="48"
            Opacity="0.0">
            <SolidColor ux:Name="_thumbFill2" Color="#fafafaff" />
            <DropShadow Angle="90" Distance="1" Size="5" />
        </Circle>

        <Rectangle

            CornerRadius="7"
            Width="32"
            Height="14"
            Alignment="Center">
            <SolidColor ux:Name="_trackFill" Color="#00000042" />
        </Rectangle>

        <Rectangle ux:Binding="Appearance" ux:Name="_bounds">
            <SolidColor Color="#ffffff00" />
        </Rectangle>

    </Panel>

    <WhileDisabled>
        <Change Target="_thumbFill.Color" Value="#bdbdbdff" Easing="QuadraticInOut" Duration="0.25" />
        <Change Target="_trackFill.Color" Value="#0000001e" Easing="QuadraticInOut" Duration="0.25" />
    </WhileDisabled>

    <Fuse.Controls.DefaultSwitchBehavior >
        <Rectangle ux:Ref="_bounds" ux:Binding="Bounds" />
        <Change ux:Name="_thumbFill1Anim" Target="_thumbFill.Color" Value="#fff" Easing="QuadraticInOut" Duration="0.25" />
        <Change ux:Name="_thumbFill2Anim" Target="_thumbFill2.Color" Value="#fff" Easing="QuadraticInOut" Duration="0.25" />
        <Change ux:Name="_trackFillAnim" Target="_trackFill.Color" Value="#fff" Easing="QuadraticInOut" Duration="0.25" />
        <Move Target="_switchThumb" X="22" Duration="0.25" Easing="QuadraticInOut" />
        <Move Target="_switchThumb2" X="22" Duration="0.25" Easing="QuadraticInOut" />
    </Fuse.Controls.DefaultSwitchBehavior>

    <WhilePressed>
        <Change Target="_switchThumb2.Opacity" Value="0.30" Easing="QuinticOut" EasingBack="QuinticIn" Duration="0.25" />
    </WhilePressed>

    <WhileFocused>
        <Change Target="_switchThumb2.Opacity" Value="0.30" Easing="QuinticOut" EasingBack="QuinticIn" Duration="0.25" />
    </WhileFocused>

    <ResourceBinding Target="_trackFillAnim.Value" Key="C200" />
    <ResourceBinding Target="_thumbFill1Anim.Value" Key="C500" />
    <ResourceBinding Target="_thumbFill2Anim.Value" Key="C500" />

</Switch>
3

Ah, I see. Thanks for the code, I’ll give a crack at it and see what I can achieve! :slight_smile:

Edit:
Fantastic! I managed to accomplish exactly what I wanted in less than a minute! :slight_smile: Any chance we can get the code for TextInput?

4

Here you go:

<TextInput
    Focus.IsFocusable="true"
    ux:Name="_textInput"
    TextColor="#000"
    Padding="0,8,0,8"
    Margin="8,8,8,8"
    FontSize="16"
    MinHeight="48"
    Font="RobotoRegular">

    <Panel ux:Binding="Appearance">
        <Rectangle Alignment="Bottom" Height="1" Margin="0,8,0,8" ux:Name="_dividerRect">
            <SolidColor ux:Name="_textInputDivider" Color="#dddddd" />
        </Rectangle>
    </Panel>

    <ResourceBinding Target="_changeTextInputDividerFill1.Value" Key="C700" />
    <ResourceBinding Target="_changeTextInputDividerFill2.Value" Key="C700" />

    <WhileDisabled>
        <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInput.TextColor" Value="#dddddd" />
        <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInputDivider.Color" Value="#dddddd" />
    </WhileDisabled>

    <WhileFocused>
        <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInputDivider.Color" Value="#fff" ux:Name="_changeTextInputDividerFill1" />
        <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_dividerRect.Height" Value="2" />
    </WhileFocused>

    <WhilePressed>
        <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_textInputDivider.Color" Value="#fff" ux:Name="_changeTextInputDividerFill2" />
        <Change Duration="0.25" Easing="ExponentialOut" EasingBack="ExponentialIn" Target="_dividerRect.Height" Value="2" />
    </WhilePressed>

</TextInput>