Windows Forms is a UI framework that allows you to create desktop applications. You can implement themes in a Windows form app by creating selectable buttons for each theme.
When the user selects a theme, you can change the background color or text color properties of each element to match the selected theme.
How to Set Up the Windows Form Project
First, create a new Windows form app. Populate the new project with some basic controls, such as buttons and labels.
Create a new Windows Forms application in Visual Studio. In the new project, use the toolbox to search for a button control. Select the button control and drag it onto the canvas. Add a total of three button controls. Using the toolbox, click and drag a label control onto the canvas. Place the label underneath the buttons. Style the buttons and labels using the properties window. Change the properties to the following:Control Property Name New Value button1 Size 580, 200 FlatStyle Flat Text Users button2 Size 580, 100 FlatStyle Flat Text Accounts button3 Size 580, 100 FlatStyle Flat Text Permissions label1 Text Copyright 2022
How to Create the Settings Button and List of Themes
For a simple themes menu to work, create multiple buttons to represent each theme. The application will include three themes, a “Light” theme, a “Nature” theme, and a “Dark” theme.
Add another button control to the canvas to represent the settings (or “Themes”) button. Change the properties of this button to the following:Property Name New Value Name btnThemeSettings FlatStyle Flat Size 200, 120 Text Themes Drag three more buttons onto the canvas. These buttons will represent the three different themes. Change the properties for each of the buttons to the following:Control Property Name New Value 1st Button Name btnLightTheme BackColor WhiteSmoke Size 200, 80 FlatStyle Flat Text Light Visible False 2nd Button Name btnNatureTheme BackColor DarkSeaGreen Size 200, 80 FlatStyle Flat Text Nature Visible False 3rd Button Name btnDarkTheme BackColor DimGray ForeColor White Size 200, 80 FlatStyle Flat Text Dark Visible False Double-click on the Themes button. This will create a method to handle the “on click” event. The method will run when the user clicks on this button. By default, the “Light”, “Nature”, and “Dark” themes will not be visible. Inside the function, add the functionality to toggle the visibility of the buttons to either show or hide. private void btnThemeSettings_Click(object sender, EventArgs e){ btnNatureTheme. Visible = !btnNatureTheme. Visible; btnLightTheme. Visible = !btnLightTheme. Visible; btnDarkTheme. Visible = !btnDarkTheme. Visible;} Run the application by clicking on the green play button at the top of the Visual Studio window. At runtime, the application will hide the buttons for each of the three themes by default. Click on the Themes button to toggle the themes to show. You can continue to press the Themes button to toggle their visibility.
How to Manage Your Themes
Create Dictionaries for each theme to store the different colors that it will be using. This is so that you store all your theme colors in one place, in case you need to use them multiple times. It also makes it easier if you want to update a theme with new colors in the future.
At the top of the default Form1. cs C# file and inside the Form class, create a global enum. This enum will store the different types of colors you will use in a theme. enum ThemeColor{ Primary, Secondary, Tertiary, Text} Underneath, declare three global Dictionaries, one for each of the three themes. You can read more about Dictionaries if you are unfamiliar with how to use a dictionary in C#. Dictionary<ThemeColor, Color> Light = new Dictionary<ThemeColor, Color>();Dictionary<ThemeColor, Color> Nature = new Dictionary<ThemeColor, Color>();Dictionary<ThemeColor, Color> Dark = new Dictionary<ThemeColor, Color>(); Inside the constructor, initialize the dictionaries. Add values for the different colors each theme will use. public Form1(){ InitializeComponent(); // Add dictionaries here Light = new Dictionary<ThemeColor, Color>() { { ThemeColor. Primary, Color. WhiteSmoke }, { ThemeColor. Secondary, Color. Silver }, { ThemeColor. Tertiary, Color. White }, { ThemeColor. Text, Color. Black } }; Nature = new Dictionary<ThemeColor, Color>() { { ThemeColor. Primary, Color. DarkSeaGreen }, { ThemeColor. Secondary, Color. AliceBlue }, { ThemeColor. Tertiary, Color. Honeydew }, { ThemeColor. Text, Color. Black } }; Dark = new Dictionary<ThemeColor, Color>() { { ThemeColor. Primary, Color. DimGray }, { ThemeColor. Secondary, Color. DimGray }, { ThemeColor. Tertiary, Color. Black }, { ThemeColor. Text, Color. White } };}
How to Change the Theme
Create functions to manage the application’s theme. These functions will change the background color or text color of the UI elements on the canvas.
Create a new function called ChangeTheme(). The function will take the colors for a theme as arguments. Inside the function, change the background color properties of the UI elements. The new background colors will use colors for the theme selected. private void ChangeTheme(Color primaryColor, Color secondaryColor, Color tertiaryColor){ // Change background color of buttons btnThemeSettings. BackColor = primaryColor; button1. BackColor = primaryColor; button2. BackColor = secondaryColor; button3. BackColor = secondaryColor; this. BackColor = tertiaryColor;} Create a new function called ChangeTextColor(). You can use this to change the color of the text between dark and light. This is to ensure that text on a dark background will still be readable. private void ChangeTextColor(Color textColor){ // Change color of text button1. ForeColor = textColor; button2. ForeColor = textColor; button3. ForeColor = textColor; label1. ForeColor = textColor; btnThemeSettings. ForeColor = textColor;} From the designer, double-click on the “Light” button control. This will open the code-behind file and generate an event handler for when the user clicks on the button. Inside the event handler, use the ChangeTheme() and ChangeTextColor() functions. Input the colors that the theme is using. You can retrieve these colors from the “Light” theme dictionary. private void btnLightTheme_Click(object sender, EventArgs e){ ChangeTheme(Light[ThemeColor. Primary], Light[ThemeColor. Secondary], Light[ThemeColor. Tertiary]); ChangeTextColor(Light[ThemeColor. Text]);} Go back to the designer and click on the “Nature” and “Dark” buttons. Use the ChangeTheme() and ChangeTextColor() functions in their event handlers as well. private void btnNatureTheme_Click(object sender, EventArgs e){ ChangeTheme(Nature[ThemeColor. Primary], Nature[ThemeColor. Secondary], Nature[ThemeColor. Tertiary]); ChangeTextColor(Nature[ThemeColor. Text]);}private void btnDarkTheme_Click(object sender, EventArgs e){ ChangeTheme(Dark[ThemeColor. Primary], Dark[ThemeColor. Secondary], Dark[ThemeColor. Tertiary]); ChangeTextColor(Dark[ThemeColor. Text]);} By default, the theme should be set to the “Light” theme when the user first opens the app. In the constructor, underneath the dictionaries, use the ChangeTheme() and ChangeTextColor() functions. ChangeTheme(Light[ThemeColor. Primary], Light[ThemeColor. Secondary], Light[ThemeColor. Tertiary]);ChangeTextColor(Light[ThemeColor. Text]); Run the application by clicking on the green play button at the top of the Visual Studio window. By default, the application uses the “Light” theme and applies the gray color scheme to the UI controls. Toggle the themes button to view the list of themes. Click on the Nature theme. Click on the Dark theme.
Creating Applications Using Windows Forms
Many applications allow the user to switch between multiple themes. You can add themes to a Windows Forms application by creating options for the user to select.
When the user clicks on a theme, you can change the background color, text, or any other properties to match the colors used in the selected theme.
The colors for each of the themes use Visual Studio’s built-in colors. You will need to use a proper color scheme to give the users a better experience. You can learn more about the different ways you can choose a color scheme for your app.
