AppearanceToggle icon is wrong #1897

New Issue

claunia · 2026-01-29T17:59:55Z

claunia commented

2026-01-29 17:59:55 +00:00

Originally created by @sofiageo on GitHub (Oct 31, 2025).

It looks to me that the appearance toggle button is the opposite of what it should be.

Every website example has the sun for the light theme, except radzen. Maybe it's a Radzen preference though, so at least we should have the ability to change it with an attribute.

examples:

https://web.dev/patterns/theming/theme-switch/
https://toggles.dev/
https://www.joshwcomeau.com/

Originally created by @sofiageo on GitHub (Oct 31, 2025). It looks to me that the appearance toggle button is the opposite of what it should be. Every website example has the sun for the light theme, except radzen. Maybe it's a Radzen preference though, so at least we should have the ability to change it with an attribute. examples: https://web.dev/patterns/theming/theme-switch/ https://toggles.dev/ https://www.joshwcomeau.com/

claunia closed this issue

2026-01-29 17:59:55 +00:00

claunia commented

2026-01-29 17:59:55 +00:00

@Anspitzen commented on GitHub (Oct 31, 2025):

The button shows the desired state and not the current state like we would expect. So yes, it is conter to usual behaviour.

One work-around would be setting the theme names yourself, and be flipping them. Then it would behave as expected. But you need to find out the names for your theme in default and dark.
Example for Standard Theme:
<RadzenAppearanceToggle DarkTheme="standard" LightTheme="standard-dark" />

@Anspitzen commented on GitHub (Oct 31, 2025): The button shows the desired state and not the current state like we would expect. So yes, it is conter to usual behaviour. One work-around would be setting the theme names yourself, and be flipping them. Then it would behave as expected. But you need to find out the names for your theme in default and dark. Example for Standard Theme: `<RadzenAppearanceToggle DarkTheme="standard" LightTheme="standard-dark" />`

claunia commented

2026-01-29 17:59:56 +00:00

@yordanov commented on GitHub (Oct 31, 2025):

If the AppearanceToggle is designed as a toggle switch, it must display its current state. Here is an example:

However, the current implementation uses a regular button with a single icon and in that case the button should clearly communicate the action — what clicking will do. Think of it as a “play/pause” button that shows the next action (e.g., showing a “pause” icon when playing).

There is a strong convention and many discussions that showing the “action icon” (i.e., the mode you will switch to) tends to align with user expectations of clicking for change. The same approach is also used in the Material Design guidelines - see the screenshot at: https://m2.material.io/design/color/dark-theme.html#behavior

In case you insist on displaying the current state, use the approach suggested by Anspitzen 👆🏻

@yordanov commented on GitHub (Oct 31, 2025): If the AppearanceToggle is designed as a toggle switch, it must display its current state. Here is an example: <img width="203" height="213" alt="Image" src="https://github.com/user-attachments/assets/52306126-8284-4f10-9594-557ae093b92b" /> However, the current implementation uses a regular button with a single icon and in that case the button should clearly communicate the action — **what clicking will do**. Think of it as a “play/pause” button that shows the next action (e.g., showing a “pause” icon when playing). There is a strong convention and many discussions that showing the “action icon” (i.e., the mode you will switch to) tends to align with user expectations of clicking for change. The same approach is also used in the Material Design guidelines - see the screenshot at: https://m2.material.io/design/color/dark-theme.html#behavior In case you insist on displaying the current state, use the approach [suggested by Anspitzen](https://github.com/radzenhq/radzen-blazor/issues/2335#issuecomment-3472556604) 👆🏻

claunia commented

2026-01-29 17:59:56 +00:00

@sofiageo commented on GitHub (Oct 31, 2025):

Thanks for the reference, however, it looks like it's the only design system that does it like this. So I think the sensible thing is to use the workaround.

edit: I've done more research and it seems there are many other design systems / ui toolkits that use the sun for the dark theme.

examples:
https://flowbite.com/
https://www.newskit.co.uk/
https://www.heroui.com/

So I admit I was too quick to judge but it looks like it's a matter of preference.

@sofiageo commented on GitHub (Oct 31, 2025): Thanks for the reference, however, it looks like it's the only design system that does it like this. So I think the sensible thing is to use the workaround. edit: I've done more research and it seems there are many other design systems / ui toolkits that use the sun for the dark theme. examples: https://flowbite.com/ https://www.newskit.co.uk/ https://www.heroui.com/ So I admit I was too quick to judge but it looks like it's a matter of preference.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1897