# Changing the accent color

**URL:** <https://forums.fusetools.com/t/changing-the-accent-color/4466>\
**Category:** How-to Discussions\
**Created:** [June 23, 2015, 6:37pm UTC](https://forums.fusetools.com/t/changing-the-accent-color/4466 "2015-06-23T18:37:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anders\_Jakob\_Sivesin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_jakob_sivesin/32/548_2.png) [@Anders\_Jakob\_Sivesin](https://forums.fusetools.com/u/Anders_Jakob_Sivesin)\
**Post date:** [June 23, 2015, 6:37pm UTC](https://forums.fusetools.com/t/changing-the-accent-color/4466/1 "2015-06-23T18:37:22Z")

</div>

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:

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [June 23, 2015, 7:14pm UTC](https://forums.fusetools.com/t/changing-the-accent-color/4466/2 "2015-06-23T19:14:19Z")

</div>

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:

```auto
<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`:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Anders\_Jakob\_Sivesin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_jakob_sivesin/32/548_2.png) [@Anders\_Jakob\_Sivesin](https://forums.fusetools.com/u/Anders_Jakob_Sivesin)\
**Post date:** [June 24, 2015, 4:27am UTC](https://forums.fusetools.com/t/changing-the-accent-color/4466/3 "2015-06-24T04:27:08Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![kusma](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kusma/32/595_2.png) [@kusma](https://forums.fusetools.com/u/kusma)\
**Post date:** [June 24, 2015, 6:41pm UTC](https://forums.fusetools.com/t/changing-the-accent-color/4466/4 "2015-06-24T18:41:37Z")

</div>

Here you go:

```auto
<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>

```