From acb60729c6453d4c5d31de46d5f3f7cabc597602 Mon Sep 17 00:00:00 2001 From: Elena Peskova Date: Tue, 18 Nov 2025 17:21:28 +0400 Subject: [PATCH 1/2] add size mode switcher section --- Readme.md | 56 +++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 46 insertions(+), 10 deletions(-) diff --git a/Readme.md b/Readme.md index ad10c7e..b337691 100644 --- a/Readme.md +++ b/Readme.md @@ -1,13 +1,9 @@ - -![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/227836631/25.1.5%2B) -[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T845557) -[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) -[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) - # Implement a Theme Switcher in Blazor Applications This example demonstrates how to add a Theme Switcher to your application. Users can switch between DevExpress Fluent and Classic themes and external Bootstrap themes. This example uses the [DxResourceManager.RegisterTheme(ITheme)](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxResourceManager.RegisterTheme(DevExpress.Blazor.ITheme)) method to apply a theme at application startup and the [IThemeChangeService.SetTheme()](https://docs.devexpress.com/Blazor/DevExpress.Blazor.IThemeChangeService.SetTheme(DevExpress.Blazor.ITheme)) method to change the theme at runtime. +This example also implements a size mode switcher. Users can switch between small, medium, and large [size modes](https://docs.devexpress.com/Blazor/401784/styling-and-themes/size-modes). + ![Blazor - Theme Switcher](images/blazor-theme-switcher.png) @@ -177,6 +173,46 @@ If you want to use dark Bootstrap themes, implement custom logic that applies a Refer to the following article for more information: [Color Modes](https://getbootstrap.com/docs/5.3/customize/color-modes/). +## Implement a Size Mode Switcher + +Follow the steps below to change size modes at runtime: + +1. Add the [SizeManager.cs](/CS/switcher/switcher/Services/SizeManager.cs) service to your application (copy the corresponding file). This service uses the `GetFontSizeString()` method to apply the selected size mode: + + ```cs + public string GetFontSizeString() { + return ActiveSizeMode switch { + SizeMode.Small => "14px", + SizeMode.Medium => "16px", + SizeMode.Large => "18px", + _ => "16px" + }; + } + ``` + +2. Register the `SizeManager` service in the [Program.cs](/CS/switcher/switcher/Program.cs) file: + + ```cs + builder.Services.AddScoped(); + ``` + +3. Copy the [SizeChanger.razor](/CS/switcher/switcher/Components/Layout/SizeChanger.razor) file to the application's [Layout](/CS/switcher/switcher/Components/Layout/) folder. This file creates a size mode menu and assigns the selected mode to the `--global-size` CSS variable: + + ```css + :root { + --global-size: @SizeManager.GetFontSizeString(); + } + ``` + +4. Use the `--global-size` CSS variable to define the application font size: + + ```css + html, body { + /* ... */ + font-size: var(--global-size); + } + ``` + ## Files to Review * [ThemeSwitcher](./CS/switcher/switcher/Components/ThemeSwitcher) (folder) @@ -190,9 +226,9 @@ Refer to the following article for more information: [Color Modes](https://getbo * [Themes](https://docs.devexpress.com/Blazor/401523/common-concepts/themes) -## Does this example address your development requirements/objectives? - -[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-theme-switcher&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-theme-switcher&~~~was_helpful=no) - +## Does this example address your development requirements/objectives? + +[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-theme-switcher&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-theme-switcher&~~~was_helpful=no) + (you will be redirected to DevExpress.com to submit your response) From d2779d513b24a4bb4c167e09491c71ba343114c0 Mon Sep 17 00:00:00 2001 From: Elena Peskova <116714417+elenapeskova@users.noreply.github.com> Date: Wed, 19 Nov 2025 15:53:03 +0400 Subject: [PATCH 2/2] Apply suggestions from code review --- Readme.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/Readme.md b/Readme.md index b337691..ca2a731 100644 --- a/Readme.md +++ b/Readme.md @@ -175,7 +175,7 @@ Refer to the following article for more information: [Color Modes](https://getbo ## Implement a Size Mode Switcher -Follow the steps below to change size modes at runtime: +To change size modes at runtime, you must: 1. Add the [SizeManager.cs](/CS/switcher/switcher/Services/SizeManager.cs) service to your application (copy the corresponding file). This service uses the `GetFontSizeString()` method to apply the selected size mode: @@ -196,7 +196,8 @@ Follow the steps below to change size modes at runtime: builder.Services.AddScoped(); ``` -3. Copy the [SizeChanger.razor](/CS/switcher/switcher/Components/Layout/SizeChanger.razor) file to the application's [Layout](/CS/switcher/switcher/Components/Layout/) folder. This file creates a size mode menu and assigns the selected mode to the `--global-size` CSS variable: +3. Copy the [SizeChanger.razor](/CS/switcher/switcher/Components/Layout/SizeChanger.razor) file to the [Components/Layout](/CS/switcher/switcher/Components/Layout/) folder. This file creates a size mode menu and assigns the selected mode to the `--global-size` CSS variable: + ```css :root { @@ -204,7 +205,7 @@ Follow the steps below to change size modes at runtime: } ``` -4. Use the `--global-size` CSS variable to define the application font size: +4. Use the `--global-size` CSS variable to define the font size application-wide: ```css html, body {