Introducing the Telerik WinUI Theme Editor—your new truest helper for easy customization of the default WinUI brushes, including a preview of the changes and export. Grab it now and make your WinUI apps even more gorgeous.
Aloha! If you have read some of my other blog posts, you already know that I tend to share the awesomeness in life with my audience, and today I want to introduce you the Telerik WinUI Theme Editor. What kind of animal species is that? Well, as the name implies, this is a helper application for easy customization of the default WinUI brushes, aiming for flawless custom theme creation. It is based on the UWP XAML Theme Editor app by Microsoft.
The Telerik WinUI Theme Editor was one of the highlight features of the Telerik UI for WinUI R2 2021 Release, which is live now and fully packed with fresh new components and features for your WinUI apps. Check all the new goodies in the release blog post.
Since we learned in that post that the Theme Editor enables you to tweak theme colors, I think it is important to mention that the results are available for an immediate preview. Some colored rectangles and color pickers pop up in your minds, huh? Yes, we have those, but we also have a real instance of the Telerik controls, as well as the native MS ones, so that you can see the bigger picture.
Step by Step
All good, but what does it take to use this powerful tool? Let me show you the steps:
- Choose a color preset from the Color Presets drop-down menu on the right (or do not do anything and start with the default one).
- Adjust the color settings of brushes from the Region, Base and Primary sections under the above-mentioned menu (more tips and tricks on that below).
- Preview the effect on the left immediately by going through all available controls from the tab view to see how each control looks.
- When satisfied with the results, click the Export button to generate ready-to-copy code of the generated palette settings to the clipboard.
- Click the magic Copy to Clipboard button and then you are ready to paste the palette settings code in your WinUI application. The recommended place for this code is in the App.xaml file.
Intriguing, huh? If you are as eager as me, you are more than welcome to head to the download page of this awesome tool. In the meantime, I will start with my tour.
If you have made it to the fifth step of how to use the Telerik WinUI Theme Editor, but for some reason you have not yet built and run a sample application that uses Telerik UI for WinUI components (or any WinUI components at all), you need to make sure that your system is configured for WinUI. The basic requirements can be found at the Prerequisites section of the Getting Started documentation article of Telerik UI for WinUI (there is a lot more valuable information there as well).
First Date With the Theme Editor
What have we learned so far for our Theme Editor? It is a design development tool that can be used to create custom theme palettes for WinUI. This tool also helps with the development flow by generating and exporting your chosen preset to a XAML markup resource dictionary.
What we have not learned yet—how does it look? It is time to set this right.
Isn’t it lovely? And did you notice—the immediate preview is for both the light and dark themes.
P.S. I did not select the Telerik Scheduler tab by accident. I did that completely on purpose, as this is one of the latest and biggest treasures of our latest release.
Let Your True Colors Shine
Colors are everywhere. And matter. And you know it.
The Theme Editor’s colors are on the right and are grouped into three major categories for both the Light and Dark themes (again).
The Region section is responsible for the background that all the controls lay on. It will be part of the exported resources but will not affect anything in your app unless you set it to your root element, for example.
The Base region represents all the backplates of the controls and their temporary state visuals (e.g., hover, press, etc.). Quick tip—the colors from this region should be in contrast to the main background and with the text color (black for the Light theme and white for the Dark theme).
The Primary part covers the Accent color and its variations. It should contrast with mainly the white text color. It is also used for the toggled / checked / selected states of some elements like buttons or list items. It is the one that really makes an element stand out.
Each of the above categories is expandable and reveals all the colors that belong to the respective group:
Refine These Colors
As mentioned in the previous section, all major colors for a region hide expandable minor colors, belonging to the respective region. I can summarize the ability it provides in exactly three words—attention to detail.
How to refine each color, be it major or minor—simply click on each colored element (either the major color rectangle, or the minor colors’ rounded rectangles with their hex values). What will happen? A popup containing a color editor will be shown:
Apart from the color editor, there is a crucial panel on the left, responsible for making sure that in either respective theme you are contrast compliant. This is extremely important when creating a theme. You can easily identify the contrast with the most prevalent text color in the theme that you are editing. When you pick a color that falls below the standard contrast ratio of 4.5:1, you will be alerted with red text next to your contrast value.
(Pre/Re) Set Your Preset
Booting up the Telerik WinUI Theme Editor, the preset will always be set to Default, i.e., the native Light and Dark theme styling for all present controls.
For the shy part of our clients, we have designed some predefined presets which are available in the Color Presets drop-down menu. Do not hesitate to get a little piece of our Flat, Neutral, Gray, Ocean, Cerise, Cheerful, Pumpkin, Lavender, Forest and Nighttime presets.
For all of you who are ready to start making your own themes, well—go for it. Start editing those colors right away! Once you start tweaking them, the preset you are designing will be temporarily named Custom. This will not affect the above listed presets.
The hardest part of it all is the satisfactory point. Once you reach that, you just need to click the Save button and browse to your desired save point. You can also open your saved JSON theme later by clicking the Load button.
The Real Theme Deal
Once you feel like a master and reach the theming satisfactory point, I am guessing you will want to see it for real in your WinUI app. For this purpose, you need to click the magic Export button at the bottom right corner of the tool. Let us see what will happen:
A dialog is shown which contains all the art you created, ready to be copied to the clipboard. And that is exactly what I am doing at the end of the above GIF. P.S. If something is bothering you, feel free to make more changes and re-export as many times as you like. Each change will refresh the export window content.
Whenever you are sure that this is your final masterpiece, the next step is to open an existing WinUI app and add the resources for it. Let’s do it together.
Also, don’t forget to set the background color of your page (like me ) to the RegionColor that you picked for your theme. This is the only brush that won’t be automatically applied. Once that’s in, you’re done! Your theme colors will now be pervasive across your app or page depending.
Get Telerik WinUI ThemeEditor Now
Feedback Matters
Some of you might often skip this part of any blog (if such is present), but the truth is that feedback really matters. In all kinds of aspects. I personally will not get tired of urging you to share it.
Your input is valuable. So do not be shy to:
- Get in touch by email—Drop us a line, for anything related to product or just to say hi at TelerikWinUI@progress.com
- Visit the Feedback Portal—Share any feature request (or bug report) that you might have
- Head to Telerik Forums—Receive any technical help with the product
Feel the Latest Bits
At the very beginning of my blog, I mentioned our awesome R2 2021 Release of Telerik UI for WinUI. This is a sweet invitation to not wait another minute and try out the latest: