Appearance and Theming

Enhance the visual appeal of Siticone ToggleSwitch with customizable colors, gradients, borders, thumb shapes, and automatic system theme adaptation.

Overview

The SiticoneToggleSwitch provides extensive visual customization options, including gradient backgrounds, border styles, thumb shapes, and theming support. This guide details how to customize its appearance, colors, and behavior based on system themes.

---

1. Customization Features

1.1 Border Thickness

Controls the thickness of the toggle's border.

Property	Type	Default	Description
BorderThickness	int	2	Sets the border width in pixels.

Usage Example

myToggleSwitch.BorderThickness = 4;

---

1.2 Thumb Shape

Determines whether the toggle thumb is circular or square.

Property	Type	Default	Description
ThumbShape	ControlThumbShape enum	Circle	Changes thumb between Circle/Square.

Available Options

Value	Description
Circle	Rounded thumb.
Square	Square-shaped thumb.

Usage Example

myToggleSwitch.ThumbShape = SiticoneToggleSwitch.ControlThumbShape.Square;

---

1.3 Corner Radius

Defines the roundness of the switch's edges.

Property	Type	Default	Description
CornerRadius	float	20f	Adjusts the rounded corners.

Usage Example

myToggleSwitch.CornerRadius = 10f;

---

1.4 System Theme Support

The control can detect and adapt to Light/Dark mode based on system settings.

Property	Type	Default	Description
TrackDeviceTheme	bool	true	Syncs with system theme changes.
CurrentDeviceTheme	SystemTheme enum	Light	Reflects the current system theme.

Available Theme Modes

Value	Description
Light	Default Light mode.
Dark	Dark mode.
Custom	Manually controlled theme.

Usage Example

if (myToggleSwitch.CurrentDeviceTheme == SiticoneToggleSwitch.SystemTheme.Dark)
{
    Console.WriteLine("Dark mode detected!");
}

---

2. Color Customization

2.1 Background Colors

Each toggle state (ON/OFF) can have a gradient background.

Property	Type	Default	Description
OnBackColor1	Color	#4d4dff	Primary color when ON.
OnBackColor2	Color	#4d4dff	Secondary color when ON.
OffBackColor1	Color	Silver	Primary color when OFF.
OffBackColor2	Color	Silver	Secondary color when OFF.

Usage Example

myToggleSwitch.OnBackColor1 = Color.Blue;
myToggleSwitch.OffBackColor1 = Color.Gray;

---

2.2 Thumb Colors

Controls the thumb color for ON/OFF states.

Property	Type	Default	Description
OnThumbColor1	Color	White	Primary thumb color when ON.
OnThumbColor2	Color	White	Secondary thumb color when ON.
OffThumbColor1	Color	White	Primary thumb color when OFF.
OffThumbColor2	Color	White	Secondary thumb color when OFF.

Usage Example

myToggleSwitch.OnThumbColor1 = Color.Green;
myToggleSwitch.OffThumbColor1 = Color.Red;

---

2.3 Border Colors

Defines the border colors for ON/OFF states.

Property	Type	Default	Description
OnBorderColor1	Color	#4d4dff	Primary border color when ON.
OnBorderColor2	Color	#4d4dff	Secondary border color when ON.
OffBorderColor1	Color	Silver	Primary border color when OFF.
OffBorderColor2	Color	Silver	Secondary border color when OFF.

Usage Example

myToggleSwitch.OnBorderColor1 = Color.DarkBlue;

---

2.4 Label Customization

Controls the text labels shown for ON/OFF states.

Property	Type	Default	Description
ShowLabels	bool	false	Enables text labels.
OnLabel	string	"On"	Text when ON.
OffLabel	string	"Off"	Text when OFF.
LabelFont	Font	Segoe UI, 9f	Label font style.
LabelColor	Color	Black	Color of the label text.

Usage Example

myToggleSwitch.ShowLabels = true;
myToggleSwitch.OnLabel = "Enabled";
myToggleSwitch.OffLabel = "Disabled";
myToggleSwitch.LabelColor = Color.DarkGray;

---

3. Using These Features ✅

Feature	Use Case
BorderThickness	Adjusting border width for UI consistency.
ThumbShape	Making the toggle more visually distinct.
CornerRadius	Enhancing modern, rounded UI aesthetics.
TrackDeviceTheme	Auto-adapting to system theme changes.
OnBackColor1	Branding & color customization.
ShowLabels	Displaying "On"/"Off" indicators for clarity.

---

4. Common Pitfalls & Design Considerations 🛑

Pitfall	Cause	Solution
Low contrast text	Poor label color choice.	Use LabelColor for readability.
Colors don't update	Forgetting to Invalidate().	Always call Invalidate().
Theme doesn't update	TrackDeviceTheme = false.	Enable TrackDeviceTheme.
Thumb overlaps border	ExtraThumbSize too large.	Adjust ExtraThumbSize.

---

5. Points Learned 🎯

✅ Use TrackDeviceTheme to sync with system settings. ✅ Leverage gradient colors for a sleek UI. ✅ Adjust ThumbShape and CornerRadius for a modern design. ✅ Customize LabelFont and LabelColor for better readability.

---

6. Review Checklist ✔️

Item	Check
Does the toggle match the UI style?	✅
Are OnBackColor and OffBackColor well-contrasted?	✅
Does TrackDeviceTheme work as expected?	✅
Are labels readable?	✅
Are common pitfalls avoided?	✅

---

7. Summary 📌

7.1 Feature Summary

Feature	Type	Description
BorderThickness	int	Controls border width.
ThumbShape	enum	Changes thumb shape.
CornerRadius	float	Adjusts UI roundness.
TrackDeviceTheme	bool	Syncs with system theme.
ShowLabels	bool	Enables ON/OFF text.

---

7.2 Key Takeaways

✔ Customize background, border, and thumb colors for branding. ✔ Use TrackDeviceTheme for automatic Light/Dark mode support. ✔ Improve accessibility with readable labels & colors. ✔ Use CornerRadius and ThumbShape for a modern look.