Category / Section
How to customize the colors in the .NET MAUI Switch (SfSwitch)?
33 mins read
This article guides you on how to customize the colors in the .NET MAUI Switch control in a .NET MAUI application.
Step 1: Inherit the SwitchSettings for each Visual State
To simplify customization, create classes for each VisualState with default settings that can be easily overridden.
C#
public class SwitchSettingsOn: SwitchSettings
{
public SwitchSettingsOn()
{
TrackStroke = Color.FromRgba("6750A4");
TrackBackground = (Brush)new SolidColorBrush(Color.FromRgba("6750A4"));
ThumbStroke = Color.FromRgba("FFFFFF");
ThumbBackground = (Brush)new SolidColorBrush(Color.FromRgba("FFFFFF"));
ThumbWidthRequest = 22.0;
ThumbHeightRequest = 22.0;
IconColor = Color.FromArgb("6750A4");
CustomPath = "M14.2051 0.744141L15.207 1.74609L5.69727 11.2559L0.792969 6.35156L1.79492 5.34961L5.69727 9.25195L14.2051 0.744141Z";
}
}
public class SwitchSettingsOff: SwitchSettings
{
public SwitchSettingsOff()
{
TrackStroke = Color.FromArgb("79747E");
TrackBackground = new SolidColorBrush(Color.FromRgba("E6E0E9"));
ThumbStroke = Color.FromRgba("79747E");
ThumbBackground = new SolidColorBrush(Color.FromRgba("79747E"));
ThumbWidthRequest = 14;
ThumbHeightRequest = 14;
}
}
public class SwitchSettingsIndeterminate : SwitchSettings
{
public SwitchSettingsIndeterminate()
{
TrackStroke = Color.FromRgba("6750A4");
TrackBackground = new SolidColorBrush(Color.FromRgba("6750A4"));
ThumbStroke = Color.FromRgba("FFFFFF");
ThumbBackground = new SolidColorBrush(Color.FromRgba("FFFFFF"));
ThumbWidthRequest = 22;
ThumbHeightRequest = 22;
IconColor = Color.FromArgb("6750A4");
CustomPath = "M0.617188 0.910156H15.3828V3.08984H0.617188V0.910156Z";
}
}
public class SwitchSettingsOnHovered : SwitchSettings
{
public SwitchSettingsOnHovered()
{
TrackStroke = Color.FromRgba("6750A4");
TrackBackground = new SolidColorBrush(Color.FromRgba("6750A4"));
ThumbStroke = Color.FromRgba("EADDFF");
ThumbBackground = new SolidColorBrush(Color.FromRgba("EADDFF"));
ThumbWidthRequest = 22;
ThumbHeightRequest = 22;
IconColor = Color.FromArgb("6750A4");
CustomPath = "M14.2051 0.744141L15.207 1.74609L5.69727 11.2559L0.792969 6.35156L1.79492 5.34961L5.69727 9.25195L14.2051 0.744141Z";
}
}
public class SwitchSettingsOffHovered : SwitchSettings
{
public SwitchSettingsOffHovered()
{
TrackStroke = Color.FromArgb("79747E");
TrackBackground = new SolidColorBrush(Color.FromRgba("E6E0E9"));
ThumbStroke = Color.FromRgba("49454E");
ThumbBackground = new SolidColorBrush(Color.FromRgba("49454E"));
ThumbWidthRequest = 14;
ThumbHeightRequest = 14;
}
}
public class SwitchSettingsIndeterminateHovered : SwitchSettings
{
public SwitchSettingsIndeterminateHovered()
{
TrackStroke = Color.FromRgba("6750A4");
TrackBackground = new SolidColorBrush(Color.FromRgba("6750A4"));
ThumbStroke = Color.FromRgba("EADDFF");
ThumbBackground = new SolidColorBrush(Color.FromRgba("EADDFF"));
ThumbWidthRequest = 22;
ThumbHeightRequest = 22;
IconColor = Color.FromArgb("6750A4");
CustomPath = "M0.617188 0.910156H15.3828V3.08984H0.617188V0.910156Z";
}
}
public class SwitchSettingsOnPressed : SwitchSettings
{
public SwitchSettingsOnPressed()
{
TrackStroke = Color.FromRgba("6750A4");
TrackBackground = new SolidColorBrush(Color.FromRgba("6750A4"));
ThumbStroke = Color.FromRgba("EADDFF");
ThumbBackground = new SolidColorBrush(Color.FromRgba("EADDFF"));
ThumbWidthRequest = 26;
ThumbHeightRequest = 26;
IconColor = Color.FromArgb("6750A4");
CustomPath = "M14.2051 0.744141L15.207 1.74609L5.69727 11.2559L0.792969 6.35156L1.79492 5.34961L5.69727 9.25195L14.2051 0.744141Z";
}
}
public class SwitchSettingsOffPressed : SwitchSettings
{
public SwitchSettingsOffPressed()
{
TrackStroke = Color.FromArgb("79747E");
TrackBackground = new SolidColorBrush(Color.FromRgba("E6E0E9"));
ThumbStroke = Color.FromRgba("49454E");
ThumbBackground = new SolidColorBrush(Color.FromRgba("49454E"));
ThumbWidthRequest = 26;
ThumbHeightRequest = 26;
}
}
public class SwitchSettingsIndeterminatePressed : SwitchSettings
{
public SwitchSettingsIndeterminatePressed()
{
TrackStroke = Color.FromRgba("6750A4");
TrackBackground = new SolidColorBrush(Color.FromRgba("6750A4"));
ThumbStroke = Color.FromRgba("EADDFF");
ThumbBackground = new SolidColorBrush(Color.FromRgba("EADDFF"));
ThumbWidthRequest = 26;
ThumbHeightRequest = 26;
IconColor = Color.FromArgb("6750A4");
CustomPath = "M0.617188 0.910156H15.3828V3.08984H0.617188V0.910156Z";
}
}
public class SwitchSettingsOnDisabled : SwitchSettings
{
public SwitchSettingsOnDisabled()
{
TrackStroke = Color.FromArgb("CAC4D0");
TrackBackground = new SolidColorBrush(Color.FromArgb("CAC4D0"));
ThumbStroke = Color.FromArgb("FFFBFE");
ThumbBackground = new SolidColorBrush(Color.FromArgb("FFFBFE"));
ThumbWidthRequest = 22;
ThumbHeightRequest = 22;
IconColor = Color.FromArgb("CAC4D0");
CustomPath = "M14.2051 0.744141L15.207 1.74609L5.69727 11.2559L0.792969 6.35156L1.79492 5.34961L5.69727 9.25195L14.2051 0.744141Z";
}
}
public class SwitchSettingsOffDisabled : SwitchSettings
{
public SwitchSettingsOffDisabled()
{
TrackStroke = Color.FromArgb("1C1B1F").WithAlpha(0.12f);
TrackBackground = new SolidColorBrush(Color.FromArgb("FEF7FF"));
ThumbStroke = Color.FromArgb("C6C4C6").WithAlpha(0.18f);
ThumbBackground = new SolidColorBrush(Color.FromArgb("1C1B1F").WithAlpha(0.3f));
ThumbWidthRequest = 14;
ThumbHeightRequest = 14;
}
}
public class SwitchSettingsIndeterminateDisabled : SwitchSettings
{
public SwitchSettingsIndeterminateDisabled()
{
TrackStroke = Color.FromArgb("CAC4D0");
TrackBackground = new SolidColorBrush(Color.FromArgb("CAC4D0"));
ThumbStroke = Color.FromArgb("FFFBFE");
ThumbBackground = new SolidColorBrush(Color.FromArgb("FFFBFE"));
ThumbWidthRequest = 22;
ThumbHeightRequest = 22;
IconColor = Color.FromArgb("CAC4D0");
CustomPath = "M0.617188 0.910156H15.3828V3.08984H0.617188V0.910156Z";
}
}
By creating inherited classes for VisualStates, we can more easily customize the appearance of Syncfusion® controls while maintaining the default behavior and structure. This method enhances the flexibility and efficiency of the customization process.
Step 2: Customize colors for each Visual State
XAML
<ContentPage ...
xmlns:buttons="clr-namespace:SwitchSample"
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons">
<ContentPage.Resources>
<ResourceDictionary>
<Style TargetType="syncfusion:SfSwitch">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="On">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<buttons:SwitchSettingsOn ThumbBackground="#F57B31"
ThumbStroke="#F78F50"
TrackBackground="#F7D40D"
TrackStroke="#DABA04"/>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Off">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<buttons:SwitchSettingsOff ThumbBackground="#F0F5F8"
ThumbStroke="#C7C9C9"
TrackBackground="#4FCFF7"
TrackStroke="#359EBF"/>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Indeterminate">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<buttons:SwitchSettingsIndeterminate ThumbBackground="White"
ThumbStroke="White"
TrackBackground="#419fc0"
TrackStroke="#419fc0"/>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OnHovered">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<buttons:SwitchSettingsOnHovered ThumbBackground="#F57B31"
ThumbStroke="#E7600F"
TrackBackground="#F7D40D"
TrackStroke="#DABA04"/>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OffHovered">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<buttons:SwitchSettingsOffHovered ThumbBackground="#FFFFFF"
ThumbStroke="#959595"
TrackBackground="#72D4F3"
TrackStroke="#359EBF"/>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="IndeterminateHovered">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<buttons:SwitchSettingsIndeterminateHovered ThumbBackground="#FFFFFF"
ThumbStroke="#959595"
TrackBackground="#4AA2C0"
TrackStroke="#359EBF"/>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OnPressed">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<buttons:SwitchSettingsOnPressed ThumbBackground="#F57B31"
ThumbStroke="#E7600F"
TrackBackground="#F7D40D"
TrackStroke="#DABA04"/>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OffPressed">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<buttons:SwitchSettingsOffPressed ThumbBackground="#FFFFFF"
ThumbStroke="#959595"
TrackBackground="#72D4F3"
TrackStroke="#359EBF"/>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="IndeterminatePressed">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<buttons:SwitchSettingsIndeterminatePressed ThumbBackground="#FFFFFF"
ThumbStroke="#959595"
TrackBackground="#1D87AC"
TrackStroke="#359EBF"/>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OnDisabled">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<buttons:SwitchSettingsOnDisabled ThumbBackground="#B0AFB2"
ThumbStroke="#B0AFB2"
TrackBackground="#FEF7FF"
TrackStroke="#B0AFB2"/>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OffDisabled">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<buttons:SwitchSettingsOffDisabled ThumbBackground="#B0AFB2"
ThumbStroke="#B0AFB2"
TrackBackground="#FEF7FF"
TrackStroke="#B0AFB2"/>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="IndeterminateDisabled">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<buttons:SwitchSettingsIndeterminateDisabled ThumbBackground="#B0AFB2"
ThumbStroke="#B0AFB2"
TrackBackground="#FEF7FF"
TrackStroke="#B0AFB2"/>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<syncfusion:SfSwitch x:Name="sfSwitch" AllowIndeterminateState="True" />
</StackLayout>
</ContentPage>
Note
The code snippets are for illustrative purposes and may require adjustments to fit the specific requirements of your application.
Output
Conclusion
Hope you enjoyed learning how to customize the colors in the .NET MAUI Switch (SfSwitch).
Refer to our .NET MAUI Switch feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Switch documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Switch(SfSwitch) and other .NET MAUI components.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
