
Not so many that you waste time deciding between shade #77 and shade #78, but enough to make sure you don't have to compromise too much. In practice, you want 8-10 shades to choose from (more on this later). You'll need more greys than you think, too - three or four shades might sound like plenty but it won't be long before you wish you had something a little darker than shade #2 but a little lighter than shade #3. Text, backgrounds, panels, form controls - almost everything in an interface is grey. You can break a good color palette down into three categories. To build something real, you need a much more comprehensive set of colors to choose from. You can't build anything with five hex codes. Well, unless you want your site to look like this: What you actually need This calculated and scientific approach to picking the perfect color scheme is extremely seductive, but not very useful. Distributed by an MIT license.Ever used one of those fancy color palette generators? You know, the ones where you pick a starting color, tweak some options that probably include some musical jargon like "triad" or "major fourth", and are then bestowed the five perfect color swatches you should use to build your website? (Thank you for the contribution!)Ĭopyright © 2018-2020 Benjamin Rühl. If you want to adjust the hue value of all colors in a color theme you might want to use python script to do so. You can include this ResourceDictionary in your App.xaml instead of the light and dark color schemes or in addition to them if you want to switch between those.

The colors and brushes you did not specify are then taken from the included color scheme. To make sure every key has a color or brush assigned it is recommended to copy the contents of an existing color scheme file and set the preferred values: SolidColorBrush) for each key in AdonisUI.Brushes. If you want to create a whole new color scheme you can create a new ResourceDictionary file and add a new Color for each key in AdonisUI.Colors and a new Brush (e.g. This ResourceDictionary can be included into the application resources instead of a built-in color scheme. A single ResourceDictionary file should hold all colors and brushes that use the resource keys of Adonis UI. Resources, replacingColorSchemeUri, replacedColorSchemeUri ) Custom color schemesĬustom color schemes need to be defined the same way as the built-in color schemes. Absolute ) Uri replacingColorSchemeUri = new Uri ( "pack://application:,/MyApp component/ColorSchemes/CustomColorScheme2.xaml", UriKind. Uri replacedColorSchemeUri = new Uri ( "pack://application:,/MyApp component/ColorSchemes/CustomColorScheme1.xaml", UriKind. To override single colors with custom values simply assign a new value to the corresponding resource key after including Adonis UI in your App.xaml. WindowButtonInteractionColor Overriding colors.Available colorsĮach color has a related brush with the same name that just ends with “Brush” instead of “Color”. This can be changed by overriding the accent color values as described here. By default, both color schemes use blue as their accent color. While relying on uniform colors for background areas and borders, an accent color can be used for visual highlighting of important spots. Note: Adonis UI must be included as namespace in Xaml: xmlns:adonisUi="clr-namespace:AdonisUI assembly=AdonisUI" Accent color Changing the basic background color for example will affect the background of every button, text box, radio button and so on.Ĭolors and brushes can be assigned using the according ComponentResourceKeys. These colors and brushes are used by every style of AdonisUI. InteractionForeground - foreground color when clicking a control.InteractionBorder - border color when clicking a control.


Background - background color of each control on that layer.For each color there is also a brush with the same name. For each layer there are a total of nine colors except for the base layer which needs only two. The color definitions go hand in hand with the layering system. Adonis UI tries to get along with as few colors as possible.
