{"id":13542769,"url":"https://github.com/microsoft/fluent-xaml-theme-editor","last_synced_at":"2025-04-04T21:10:28.592Z","repository":{"id":43355551,"uuid":"144782026","full_name":"microsoft/fluent-xaml-theme-editor","owner":"microsoft","description":"The Fluent Design XAML theme editor.","archived":false,"fork":false,"pushed_at":"2023-06-21T06:05:30.000Z","size":1397,"stargazers_count":637,"open_issues_count":28,"forks_count":94,"subscribers_count":41,"default_branch":"master","last_synced_at":"2025-03-28T20:11:09.768Z","etag":null,"topics":["csharp","fluent-design","theme","uwp","windows","windows-10","winui","xaml"],"latest_commit_sha":null,"homepage":null,"language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microsoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-14T23:26:56.000Z","updated_at":"2025-03-03T20:48:38.000Z","dependencies_parsed_at":"2025-01-04T08:23:24.765Z","dependency_job_id":"d3525b50-ac1a-4e79-866a-32934af634bc","html_url":"https://github.com/microsoft/fluent-xaml-theme-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ffluent-xaml-theme-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ffluent-xaml-theme-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ffluent-xaml-theme-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoft%2Ffluent-xaml-theme-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microsoft","download_url":"https://codeload.github.com/microsoft/fluent-xaml-theme-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247249532,"owners_count":20908212,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["csharp","fluent-design","theme","uwp","windows","windows-10","winui","xaml"],"created_at":"2024-08-01T11:00:17.389Z","updated_at":"2025-04-04T21:10:28.576Z","avatar_url":"https://github.com/microsoft.png","language":"C#","readme":"---\npage_type: sample\nname: Fluent Xaml Theme Editor\nlanguages:\n  - csharp\n  - xaml\nproducts:\n  - windows\n  - windows-uwp\ndescription: A tool and sample app that shows you how to theme your app effortlessly. Jumpstarting this by also giving you lightweight toolability to see your custom theme come to life in your app.\n---\n\nFluent XAML Theme Editor \n===\n\n![using component overrides](README_Images/XamlThemeEditor_screenshot.png)\n\nThis repo contains the full solution and source code to the Fluent XAML Theme Editor - a tool that helps demonstrate the flexibility of the [Fluent Design System](https://www.microsoft.com/design/fluent/) as well as supports the app development process by generating XAML markup for our ResourceDictionary framework used in Universal Windows Platform (UWP) applications.\n\nThe source code located in this repo was created with the Universal Windows Platform available in Visual Studio and is designed to run on desktop, mobile and future devices that support the Universal Windows Platform.\n\n\u003e **Note:** If you are unfamiliar with XAML, the Universal Windows Platform, Fluent Design or resources and ResourceDictionaries, it is highly recommended that you visit the [Design Universal Windows Platform](https://developer.microsoft.com/en-us/windows/apps/design) site and familiarize yourself with the language and framework that this tool is intended for.\n\nUniversal Windows Platform development\n---\n\nThis application requires Visual Studio 2017 Update 4 or higher and the Windows Software Development Kit (SDK) version 17763 or higher for Windows 10.\n\n   [Get a free copy of Visual Studio 2017 Community Edition with support for building Universal Windows Platform apps](http://go.microsoft.com/fwlink/p/?LinkID=280676)\n\nAdditionally, to stay on top of the latest updates to Windows and the development tools, become a Windows Insider by joining the Windows Insider Program.\n\n   [Become a Windows Insider](https://insider.windows.com/)\n   \nStore version of tool\n---\nIf you're not looking to be apart of this open source project and instead would just like to use the app itself, please to go the Microsoft Store version of this tool and [download it there](https://www.microsoft.com/store/apps/9N2XD3Q8X57C).\n\nHow to use the tool\n---\nWith the preview build, you can select three major colors for both the Light and Dark themes in the right-hand properties view labeled “Color Dictionary”.\n\n![color properties window](README_Images/RegionBasePrimary_Properties.png)\n\n - **Region** – The background that all the controls sit on, which is a separate resource that does not exist in our framework.\n - **Base** – Represents all our controls’ backplates and their temporary state visuals like hover or press. In general, Base should be in contrast with the background (or Region color) of your theme and with black text (if in Light theme) and white text (if in Dark theme).\n - **Primary** – This is essentially the Accent color and should contrast with mainly white text. It is also used in more choice locations to show alternate rest states for toggled controls like list selection, checkbox or radiobutton checked states, slider fill values, and other control parts that need to be shown as different from their default rest state once interacted with.\n \nRefining the colors\n---\nIn addition to the three major colors for each theme, you can also expand any one of the major colors to see a list of minor colors that change the look of only certain control parts - this basically allows you to get more detailed with your color choices for states.\n\n![color properties window details](README_Images/RegionBasePrimary_DetailColorProperties.png)\n\nTo access the detailed view of colors, simply click the chevron next to the major color button swatches.\n\nCreating, saving and loading presets\n---\nThe editor will ship with some presets for you to look at to get an idea of what a theme looks like in the app. The preset dropdown is located at the top of the Color Dictionary properties panel.\n\nWhen you first boot up it will always be set to Default – which is the Light and Dark theme styling default for all our controls. You can select different themes like Lavender and Nighttime to get an idea of how the tool will theme our controls.\n\nOnce you’re ready to start making your own theme, just start editing the colors! Once you’ve started tweaking them, you’ll notice that the Presets ComboBox goes from the name of the preset to “Custom”:\n\nThis means that you’ve started a new temporary theme that’s “Custom.” Any changes you make will not affect any of the other Presets in that box.\n\n - Once you’re satisfied with the changes you’ve made, simply click the “Save” button and browse to your desired save point.\n - Similarly, you can open your saved JSON theme by clicking the “Load” button and browsing to your saved theme’s file location.\n \nChecking contrast ratio\n---\nThe last part of the theme editor is probably one of the most important parts of creating your theme, and that is to make sure that in either respective theme you are contrast compliant. The tool provides you with a small list of contrast information on the left-hand side of the color selection window when choosing your color.\n\n![contrast panel example](README_Images/ColorContrast_Good.png)\n\nIn this window you can see your contrast with the most prevalent text color in the theme that you’re choosing to edit, in the above case black text because you are editing a Light theme color value.\n\nWhen you pick a color that falls below the standard contrast ratio of **4.5:1**, you’ll be alerted with red text next to your contrast value.\n\n![contrast panel bad example](README_Images/ColorContrast_Bad.png)\n\nYou can learn more about [contrast ratios and their importance here](https://docs.microsoft.com/en-us/windows/uwp/design/accessibility/accessible-text-requirements).\n\nExporting and using your theme in a UWP app\n---\nOnce you’ve themed everything, you’ll want to use it in your app! To do that you’ll need to click the “Export” button at the bottom of the Color Dictionary properties panel.\n\n![export theme](README_Images/ExportTheme.png)\n\nThat button will open a popup window with a generic, unnamed ResourceDictionary stub (seen below).\n\n![export theme popup](README_Images/ExportTheme_Popup.png)\n\nThis window doesn’t make anything final, however, if you want to make some changes to the theme and re-export them to the Export window, it will refresh with your changed color values.\n\nHowever, once you’re ready to use it in your app, click the “Copy to Clipboard” button in the lower right corner and go to UWP Visual Studio solution.\n\nOnce in Visual Studio, right-click on the project solution, located in the Solution Explorer.\n\n![creating resource dictionary Visual Studio](README_Images/VisualStudio_CreateResourceDictionary.png)\n\nAnd go to Add \u003e New Item and then choose Resource Dictionary.\n\n![creating resource dictionary Visual Studio](README_Images/VisualStudio_CreateResourceDictionary_2.png)\n\nName that dictionary whatever makes sense to you and click Add when you’re done.\n\n![creating resource dictionary Visual Studio](README_Images/VisualStudio_CreateResourceDictionary_3.png)\n\nThat should generate a blank ResourceDictionary like this:\n\n```xaml\n\u003cResourceDictionary\n    xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"\n    xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\"\n    xmlns:local=\"using:MyAppName\"\u003e\n    \n\u003c/ResourceDictionary\u003e\n```\n\nNow you can paste the exported theme code from the editor into that ResourceDictionary.\n\n```xaml\n\u003cResourceDictionary\n    xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"\n    xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\"\n    xmlns:local=\"using:MyAppName\"\u003e\n    \n    \u003c!-- Free Public License 1.0.0 Permission to use, copy, modify, and/or distribute this code for any purpose with or without fee is hereby granted. --\u003e\n    \u003cResourceDictionary.ThemeDictionaries\u003e\n        \u003cResourceDictionary x:Key=\"Default\"\u003e\n            \u003cResourceDictionary.MergedDictionaries\u003e\n                \u003cColorPaletteResources Accent=\"#FF0073CF\" AltHigh=\"#FF000000\" AltLow=\"#FF000000\" AltMedium=\"#FF000000\" AltMediumHigh=\"#FF000000\" AltMediumLow=\"#FF000000\" BaseHigh=\"#FFFFFFFF\" BaseLow=\"#FF333333\" BaseMedium=\"#FF9A9A9A\" BaseMediumHigh=\"#FFB4B4B4\" BaseMediumLow=\"#FF676767\" ChromeAltLow=\"#FFB4B4B4\" ChromeBlackHigh=\"#FF000000\" ChromeBlackLow=\"#FFB4B4B4\" ChromeBlackMedium=\"#FF000000\" ChromeBlackMediumLow=\"#FF000000\" ChromeDisabledHigh=\"#FF333333\" ChromeDisabledLow=\"#FF9A9A9A\" ChromeGray=\"#FF808080\" ChromeHigh=\"#FF808080\" ChromeLow=\"#FF151515\" ChromeMedium=\"#FF1D1D1D\" ChromeMediumLow=\"#FF2C2C2C\" ChromeWhite=\"#FFFFFFFF\" ListLow=\"#FF1D1D1D\" ListMedium=\"#FF333333\" /\u003e\n                \u003cResourceDictionary\u003e\n                    \u003cColor x:Key=\"SystemChromeAltMediumHighColor\"\u003e#CC000000\u003c/Color\u003e\n                    \u003cColor x:Key=\"SystemChromeAltHighColor\"\u003e#FF000000\u003c/Color\u003e\n                    \u003cColor x:Key=\"SystemRevealListLowColor\"\u003e#FF1D1D1D\u003c/Color\u003e\n                    \u003cColor x:Key=\"SystemRevealListMediumColor\"\u003e#FF333333\u003c/Color\u003e\n                    \u003cColor x:Key=\"RegionColor\"\u003e#FF000000\u003c/Color\u003e\n                    \u003cSolidColorBrush x:Key=\"RegionBrush\" Color=\"{StaticResource RegionColor}\" /\u003e\n                \u003c/ResourceDictionary\u003e\n            \u003c/ResourceDictionary.MergedDictionaries\u003e\n        \u003c/ResourceDictionary\u003e\n        \u003cResourceDictionary x:Key=\"Light\"\u003e\n            \u003cResourceDictionary.MergedDictionaries\u003e\n                \u003cColorPaletteResources Accent=\"#FF0073CF\" AltHigh=\"#FFFFFFFF\" AltLow=\"#FFFFFFFF\" AltMedium=\"#FFFFFFFF\" AltMediumHigh=\"#FFFFFFFF\" AltMediumLow=\"#FFFFFFFF\" BaseHigh=\"#FF000000\" BaseLow=\"#FFCCCCCC\" BaseMedium=\"#FF898989\" BaseMediumHigh=\"#FF5D5D5D\" BaseMediumLow=\"#FF737373\" ChromeAltLow=\"#FF5D5D5D\" ChromeBlackHigh=\"#FF000000\" ChromeBlackLow=\"#FFCCCCCC\" ChromeBlackMedium=\"#FF5D5D5D\" ChromeBlackMediumLow=\"#FF898989\" ChromeDisabledHigh=\"#FFCCCCCC\" ChromeDisabledLow=\"#FF898989\" ChromeGray=\"#FF737373\" ChromeHigh=\"#FFCCCCCC\" ChromeLow=\"#FFECECEC\" ChromeMedium=\"#FFE6E6E6\" ChromeMediumLow=\"#FFECECEC\" ChromeWhite=\"#FFFFFFFF\" ListLow=\"#FFE6E6E6\" ListMedium=\"#FFCCCCCC\" /\u003e\n                \u003cResourceDictionary\u003e\n                    \u003cColor x:Key=\"SystemChromeAltMediumHighColor\"\u003e#CCFFFFFF\u003c/Color\u003e\n                    \u003cColor x:Key=\"SystemChromeAltHighColor\"\u003e#FFFFFFFF\u003c/Color\u003e\n                    \u003cColor x:Key=\"SystemRevealListLowColor\"\u003e#FFE6E6E6\u003c/Color\u003e\n                    \u003cColor x:Key=\"SystemRevealListMediumColor\"\u003e#FFCCCCCC\u003c/Color\u003e\n                    \u003cRevealBackgroundBrush x:Key=\"SystemControlHighlightListLowRevealBackgroundBrush\" TargetTheme=\"Light\" Color=\"{ThemeResource SystemRevealListMediumColor}\" FallbackColor=\"{ StaticResource SystemListMediumColor}\" /\u003e\n                    \u003cColor x:Key=\"RegionColor\"\u003e#FFFFFFFF\u003c/Color\u003e\n                    \u003cSolidColorBrush x:Key=\"RegionBrush\" Color=\"{StaticResource RegionColor}\" /\u003e\n                \u003c/ResourceDictionary\u003e\n            \u003c/ResourceDictionary.MergedDictionaries\u003e\n        \u003c/ResourceDictionary\u003e\n        \u003cResourceDictionary x:Key=\"HighContrast\"\u003e\n            \u003cStaticResource x:Key=\"RegionColor\" ResourceKey=\"SystemColorWindowColor\" /\u003e\n            \u003cSolidColorBrush x:Key=\"RegionBrush\" Color=\"{StaticResource RegionColor}\" /\u003e\n        \u003c/ResourceDictionary\u003e\n    \u003c/ResourceDictionary.ThemeDictionaries\u003e\n    \n\u003c/ResourceDictionary\u003e\n```\nNow you have a fully customized color theme waiting to be use, so let’s apply it!\n\nTo do that, you’ll want to go into your page or app.xaml (depending on how much of your app you want the theme to apply to) and merge your theme dictionary into the resources of that page or app.\n\n```xaml\n\u003cPage.Resources\u003e\n   \u003cResourceDictionary\u003e\n      \u003cResourceDictionary.MergedDictionaries\u003e\n         \u003cResourceDictionary Source=\"PurpleGreenTheme.xaml\"/\u003e\n      \u003c/ResourceDictionary.MergedDictionaries\u003e\n   \u003c/ResourceDictionary\u003e\n\u003c/Page.Resources\u003e\n```\n\nLastly, don’t forget to set the background color of your page to the RegionColor that you picked for your theme. It’s the only brush that won’t get set automatically.\n\n```xaml\n\u003cGrid Background=\"{ThemeResource RegionBrush}\"\u003e\n   \u003c!-- Your page layout/content here --\u003e\n\u003c/Grid\u003e\n```\n\nOnce that’s in, you’re done! Your theme colors will now be pervasive across your app or page depending.\n\nUsing ColorPaletteResources in code-behind\n---\nTo access the ColorPaletteResources API in code behind, and to change any of the color properties at runtime, loop through the merged dictionaries in app.xaml (or at the scope that you merged your themes) and grab a reference to the currently used ResourceDictionary as a ColorPaletteResource instance\n\nHere's an example of how to grab and edit the properties on ColorPaletteResources in C#:\n```C#\npublic MainPage()\n{\n    this.InitializeComponent();\n\n    ColorPaletteResources cpr = FindColorPaletteResourcesForTheme(\"Light\");\n    cpr.Accent = Colors.Red;\n\n    ReloadPageTheme(this.RequestedTheme);\n}\n\nprivate void ReloadPageTheme(ElementTheme startTheme)\n{\n    if (this.RequestedTheme == ElementTheme.Dark)\n        this.RequestedTheme = ElementTheme.Light;\n    else if (this.RequestedTheme == ElementTheme.Light)\n        this.RequestedTheme = ElementTheme.Default;\n    else if (this.RequestedTheme == ElementTheme.Default)\n        this.RequestedTheme = ElementTheme.Dark;\n\n    if (this.RequestedTheme != startTheme)\n        ReloadPageTheme(startTheme);\n}\n\nprivate ColorPaletteResources FindColorPaletteResourcesForTheme(string theme)\n{\n    foreach (var themeDictionary in Application.Current.Resources.ThemeDictionaries)\n    {\n        if (themeDictionary.Key.ToString() == theme)\n        {\n            if (themeDictionary.Value is ColorPaletteResources)\n            {\n                return themeDictionary.Value as ColorPaletteResources;\n            }\n            else if (themeDictionary.Value is ResourceDictionary targetDictionary)\n            {\n                foreach (var mergedDictionary in targetDictionary.MergedDictionaries)\n                {\n                    if (mergedDictionary is ColorPaletteResources)\n                    {\n                        return mergedDictionary as ColorPaletteResources;\n                    }\n                }\n            }\n        }\n    }\n    return null;\n}\n```\nWe don't recommend doing this too often at runtime as you could experience some performance issues, but if placed in a Settings page or areas where you don't expect users to toggle it often, the performance shouldn't be too bad.\n\n\u003e **Tip!** You need to reload a ResourceDictionary in order for the resources within to get any new color changes you've applied. You can do so by flipping the RequestedTheme to a different theme and back again. That is what the ReloadPageTheme function is doing.\n\nTheming for Downlevel\n---\nAlthough the API used in the exported code for this tool is for version 17744 or greater, it's not too complicated to get your theme to work on earlier SDK versions.\n\nWhen you export your theme, you'll see a ResourceDictionary markup with a ColorPaletteResources definition similar to this:\n\n```xaml\n\u003cResourceDictionary.ThemeDictionaries\u003e\n    \u003cResourceDictionary x:Key=\"Default\"\u003e\n        \u003cResourceDictionary.MergedDictionaries\u003e\n            \u003cColorPaletteResources Accent=\"#FF8961CC\" AltHigh=\"#FF000000\" AltLow=\"#FF000000\" AltMedium=\"#FF000000\" AltMediumHigh=\"#FF000000\" AltMediumLow=\"#FF000000\" BaseHigh=\"#FFFFFFFF\" BaseLow=\"#FF64576B\" BaseMedium=\"#FFB6AABC\" BaseMediumHigh=\"#FFCBBFD0\" BaseMediumLow=\"#FF8D8193\" ChromeAltLow=\"#FFCBBFD0\" ChromeBlackHigh=\"#FF000000\" ChromeBlackLow=\"#FFCBBFD0\" ChromeBlackMedium=\"#FF000000\" ChromeBlackMediumLow=\"#FF000000\" ChromeDisabledHigh=\"#FF64576B\" ChromeDisabledLow=\"#FFB6AABC\" ChromeGray=\"#FFA295A8\" ChromeHigh=\"#FFA295A8\" ChromeLow=\"#FF332041\" ChromeMedium=\"#FF3F2E4B\" ChromeMediumLow=\"#FF584960\" ChromeWhite=\"#FFFFFFFF\" ListLow=\"#FF3F2E4B\" ListMedium=\"#FF64576B\" /\u003e\n        \u003cResourceDictionary\u003e\n            \u003cColor x:Key=\"RegionColor\"\u003e#FF262738\u003c/Color\u003e\n            \u003cSolidColorBrush x:Key=\"RegionBrush\" Color=\"{StaticResource RegionColor}\" /\u003e\n        \u003c/ResourceDictionary\u003e\n    \u003c/ResourceDictionary.MergedDictionaries\u003e\n\u003c/ResourceDictionary\u003e\n```\n\nColorPaletteResources is a friendly API for our SystemColors that sit within generic.xaml and allows for those SystemColors to be scoped at any level. \n\nIf you wanted to enable this same theme to work downlevel, you would have to define each SystemColor individually with each color from your theme:\n\n```xaml\n\u003cResourceDictionary\u003e\n    \u003cResourceDictionary.ThemeDictionaries\u003e\n        \u003cResourceDictionary x:Key=\"Default\"\u003e\n            \u003cColor x:Key=\"SystemAltHighColor\"\u003e#FF000000\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemAltLowColor\"\u003e#FF000000\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemAltMediumColor\"\u003e#FF000000\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemAltMediumHighColor\"\u003e#FF000000\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemAltMediumLowColor\"\u003e#FF000000\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemBaseHighColor\"\u003e#FFFFFFFF\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemBaseLowColor\"\u003e#FF64576B\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemBaseMediumColor\"\u003e#FFB6AABC\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemBaseMediumHighColor\"\u003e#FFCBBFD0\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemBaseMediumLowColor\"\u003e#FF8D8193\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemChromeAltLowColor\"\u003e#FFCBBFD0\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemChromeBlackHighColor\"\u003e#FF000000\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemChromeBlackLowColor\"\u003e#FFCBBFD0\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemChromeBlackMediumLowColor\"\u003e#FF000000\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemChromeBlackMediumColor\"\u003e#FF000000\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemChromeDisabledHighColor\"\u003e#FF64576B\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemChromeDisabledLowColor\"\u003e#FFB6AABC\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemChromeHighColor\"\u003e#FFA295A8\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemChromeLowColor\"\u003e#FF332041\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemChromeMediumColor\"\u003e#FF3F2E4B\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemChromeMediumLowColor\"\u003e#FF584960\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemChromeWhiteColor\"\u003e#FFFFFFFF\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemChromeGrayColor\"\u003e#FFA295A8\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemListLowColor\"\u003e#FF3F2E4B\u003c/Color\u003e\n            \u003cColor x:Key=\"SystemListMediumColor\"\u003e#FF64576B\u003c/Color\u003e                \n            \u003cColor x:Key=\"SystemAccentColor\"\u003e#FF8961CC\u003c/Color\u003e\n            \n            \u003cColor x:Key=\"RegionColor\"\u003e#FF262738\u003c/Color\u003e\n            \u003cSolidColorBrush x:Key=\"RegionBrush\" Color=\"{StaticResource RegionColor}\"/\u003e\n         \u003c/ResourceDictionary\u003e\n    \u003c/ResourceDictionary.ThemeDictionaries\u003e\n\u003c/ResourceDictionary\u003e\n```\nIn this case we're using the Lavendar theme to show this downlevel transition.\n\n\u003e **Warning:** Although this markup format change will enable your theme to be applied across controls in earlier SDK versions, it **will not** work on a page, container or control scoped level. ColorPaletteResources is the API that allows **scoping behavior**. This markup format will only work at the app.xaml level for earlier SDKs.\n\nContributions\n---\nThis tool was created directly from the feature team and although we welcome your input and suggestions for improvements to the tool, we are not accepting any features or changes from the public at this time. Please check back regularly as we may evolve our contribution model in the future.\n\nThis project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.\n\nSee also\n---\n\nFor additional Windows source code, tools and samples, please see [Windows on GitHub](http://microsoft.github.io/windows/). \n","funding_links":[],"categories":["Tooling"],"sub_categories":["What We Track"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoft%2Ffluent-xaml-theme-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrosoft%2Ffluent-xaml-theme-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoft%2Ffluent-xaml-theme-editor/lists"}