Skip to content

Commit 70744a2

Browse files
Updated supported themes
1 parent d776093 commit 70744a2

1 file changed

Lines changed: 16 additions & 6 deletions

File tree

winui/skills/ui-builder-skill.md

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,11 @@ Before installing WinUI UI Builder, ensure the following:
5353
- High DPI awareness and resolution support
5454

5555
### **Design-System Integration**
56-
- Supports Syncfusion® WinUI themes (Fluent Light, Fluent Dark, Material Light, Material Dark, etc.)
57-
- ResourceDictionary-based theming for consistent styling across applications
56+
- Supports Syncfusion® WinUI **Light** and **Dark** themes for consistent styling
57+
- Applies themes at application level via `RequestedTheme` property (set in App.xaml) or at individual control level
58+
- ResourceDictionary-based theming with customizable theme resource keys for advanced styling
59+
- Respects system theme settings when `RequestedTheme` is not explicitly configured
60+
- Ensures theme inheritance across nested UI elements for visual consistency
5861
- Ensures consistent Syncfusion® styling and theme usage
5962

6063
## Installation
@@ -112,17 +115,24 @@ Refer to the [documentation](https://microsoft.github.io/apm/reference/cli/targe
112115
3. **Control Mapping** — Map intent to Syncfusion® WinUI controls and required feature modules.
113116
4. **Theming & Design System**
114117
Load required theming guidelines and confirm key design choices:
115-
- Syncfusion® theme (Fluent Light, Fluent Dark, Material Light, Material Dark, etc.)
118+
- Syncfusion® WinUI Themes: Supports **Light** and **Dark** themes for visual consistency across Windows applications
119+
- Application-level theming via `RequestedTheme` property (set in App.xaml or individual framework elements)
120+
- Theme resource customization using ResourceDictionary keys for advanced styling
121+
- Ensures theme inheritance across nested UI elements when `RequestedTheme` is applied to parent elements
116122
- Core design basics (colors, fonts, control appearance, DPI awareness)
117-
- Light and Dark mode support
123+
- Light and Dark mode support with automatic theme resource file reference
118124
5. **Code Generation** — Produce C# and XAML WinUI controls, data bindings, event handlers, and styling.
119125
6. **Dependency Management** — Recommend or install required Syncfusion® NuGet packages and .NET dependencies.
120126
7. **Validation** — Run code compatibility and basic security checks, request confirmation for changes.
121127
8. **Code Insertion** — Create Page/Window classes, User Controls, or patch existing files following WinUI conventions.
122128

123129
Key enforcement points:
124130

125-
- Adds correct theme ResourceDictionaries and styling configuration for chosen Syncfusion® themes
131+
- Adds correct theme ResourceDictionaries and styling configuration for chosen Syncfusion® themes (Light or Dark)
132+
- Applies themes at application level using `RequestedTheme` property in App.xaml, or at individual control level
133+
- Leverages Syncfusion® theme resource files from [GitHub repository](https://github.com/syncfusion/winui-controls-theme-resource-files) for customization
134+
- Supports custom theme resource keys (e.g., `SyncfusionRibbonTabMenuButtonBackground`) for advanced styling at application root level
135+
- Ensures theme consistency respects system settings when `RequestedTheme` is not explicitly set
126136
- Injects only the feature controls and behaviors required by generated controls
127137
- Generates well-structured XAML markup with proper binding and command setup
128138
- Follows WinUI patterns for control initialization and event handling
@@ -151,7 +161,7 @@ Examples Prompts:
151161

152162
{% promptcards %}
153163
{% promptcard Authentication %}
154-
Create a login page using the Fluent Light theme with a centered StackPanel containing email and password TextBox controls with validation. Include a "Remember Me" CheckBox, a forgot password Hyperlink, and a primary login Button. Add a secondary "Create Account" button below. Ensure the layout is well-organized and follows Windows desktop UI standards.
164+
Create a login page using the Light theme with a centered StackPanel containing email and password TextBox controls with validation. Include a "Remember Me" CheckBox, a forgot password Hyperlink, and a primary login Button. Add a secondary "Create Account" button below. Ensure the layout is well-organized and follows Windows desktop UI standards.
155165
{% endpromptcard %}
156166
{% promptcard Admin Dashboard %}
157167
Create a CMS Admin Dashboard UI featuring a collapsible NavigationView in a left panel with menu items for Dashboard, Content, Users, Analytics, and Settings; a CommandBar header showing the title "CMS Admin Dashboard" on the left and user information on the right; and a main content area with a Grid layout containing three summary cards in a row displaying Total Content, Total Users, and Active Sessions (each showing a label, count value, and percentage change), followed by a "Content Management" section with a DataGrid containing columns for Title, Author, Status, Date, and Actions, and finally two charts displayed side by side—a bar chart titled "Content Over Time" and a pie chart titled "Content by Category"—using realistic sample data.

0 commit comments

Comments
 (0)