Telerik blogs

For our second .NET MAUI Challenge, let’s test our memories about setting dark vs. light mode.

Howdy! ๐Ÿ™‹‍โ™€๏ธ Welcome to #NetMauiChallenges! Thank you very much for accepting this challenge! ๐Ÿ˜Ž These posts will be launched periodically and will be exploring topics that will help you continue to grow in .NET MAUI!

You will see that the challenges focus on simple and very specific but important topics. The goal here is that you can take the time to delve into each one. We want learning to be fun for you, so regardless of the day and the time you are viewing this article, it will only take a few minutes!

How Our Challenges Work

Each challenge has a structure that is easy to understand and that complies with three important points to be of real help for your professional development:

  • ๐Ÿ—’ Statement of the challenge: You will always see an image which gives you a description of what the challenge expects from you. After this, you will see three possible answers from which you can only select one.

  • ๐Ÿ” Solution: In each challenge, you will receive the option that solves the question. It will be hidden so that you first analyze it and then click to see the correct answer with its respective explanation.

  • ๐Ÿ“” Study resources: Once you see the correct answer, each challenge’s solution will have study resources so you can delve deeper into it.

Prefer to Learn via Video?

You can watch a video version of this post here:

Light and Dark Mode in .NET MAUI

Have you noticed that some applications adapt their look and feel, taking into account the appearance mode (light or dark mode) configured on your device? Surely yes! Well, in this challenge you will learn a little more about it in .NET MAUI.

Our challenge takes as an example a Label with a BackgroundColor property, but you can make it with whatever control and property you want! I leave you the challenge below!

How can I set a light or dark mode for my app controls?

Option A:

<Label BackgroundColor="{ AppThemeBinding
                          Light =Pink 
                          Dark  =Blue } " />

Option B:

<Label BackgroundColor="{ AppThemeBinding
                          Ligth =Pink 
                          Dark  =Blue } " />

Option C:

<Label BackgroundColor="{ AddThemeBinding
                          Light =Pink 
                          Dark  =Blue } " />

Do you already have the answer? Perfect! Please click below to see the solution—here you can see the correct answer and its explanation with supporting materials.

The correct answer is option A! ๐Ÿ’ฅ

<Label BackgroundColor="{ AppThemeBinding
                          Light =Pink 
                          Dark  =Blue } " />

The correct answer is A due to the following points:

  • Option B: Refers to “Ligth” mode which does not exist because it is misspelled.

  • Option C: Uses the “AddThemeBinding” as Markup Extension to add the value in each mode, but it’s incorrect because it does not exist. The correct one is “AppThemeBinding.”

So the option that has the correct structure to assign properties by mode is A!



๐Ÿ“’ Study Resources

To study in more depth the handling of light or dark mode in your application as we saw in this challenge, I recommend the article “Handling Light and Dark Mode With .NET MAUI.”

Wrap-up

We invite you to share this challenge on your networks using the hashtag #NetMauiChallenges.

See you next time! ๐Ÿ™‹‍โ™€๏ธ I hope you liked it and it was useful!

Thanks for reading! ๐Ÿ’š๐Ÿ’•


LeomarisReyes
About the Author

Leomaris Reyes

Leomaris Reyes is a Software Engineer from the Dominican Republic, with more than 5 years of experience. A Xamarin Certified Mobile Developer, she is also the founder of  Stemelle, an entity that works with software developers, training and mentoring with a main goal of including women in Tech. Leomaris really loves learning new things! ๐Ÿ’š๐Ÿ’• You can follow her: Twitter, LinkedIn , AskXammy and Medium.

Related Posts

Comments

Comments are disabled in preview mode.