---
title: "Palette"
description: "Property reference for the Palette global."
---
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import Link from '@slint/common-files/src/components/Link.astro';

Use `Palette` to create custom widgets that match the colors of
the selected style e.g. fluent, cupertino, material, or qt.

See [Widget Styles](/master/docs/slint/reference/std-widgets/style.md) for details on the available styles.

## Properties

### background
<SlintProperty propName="background" typeName="brush" propertyVisibility="out">
Defines the default background brush. Use this if none of the more specialized background brushes apply.
</SlintProperty>

### foreground
<SlintProperty propName="foreground" typeName="brush" propertyVisibility="out">
Defines the foreground brush that is used for content that is displayed on `background` brush.
</SlintProperty>

### alternate-background
<SlintProperty propName="alternate-background" typeName="brush" propertyVisibility="out">
Defines an alternate background brush that is used for example for text input controls or panels like a side bar.
</SlintProperty>

### alternate-foreground
<SlintProperty propName="alternate-foreground" typeName="brush" propertyVisibility="out">
Defines the foreground brush that is used for content that is displayed on `alternate-background` brush.
</SlintProperty>

### control-background
<SlintProperty propName="control-background" typeName="brush" propertyVisibility="out">
Defines the default background brush for controls, such as push buttons, combo boxes, etc.
</SlintProperty>

### control-foreground
<SlintProperty propName="control-foreground" typeName="brush" propertyVisibility="out">
Defines the foreground brush that is used for content that is displayed on `control-background` brush.
</SlintProperty>

### accent-background
<SlintProperty propName="accent-background" typeName="brush" propertyVisibility="out">
Defines the background brush for highlighted controls such as primary buttons.
</SlintProperty>

### accent-foreground
<SlintProperty propName="accent-foreground" typeName="brush" propertyVisibility="out">
Defines the foreground brush that is used for content that is displayed on `accent-background` brush.
</SlintProperty>

### selection-background
<SlintProperty propName="selection-background" typeName="brush" propertyVisibility="out">
Defines the background brush that is used to highlight a selection such as a text selection.
</SlintProperty>

### selection-foreground
<SlintProperty propName="selection-foreground" typeName="brush" propertyVisibility="out">
Defines the foreground brush that is used for content that is displayed on `selection-background` brush.
</SlintProperty>

### border
<SlintProperty propName="border" typeName="brush" propertyVisibility="out">
Defines the brush that is used for borders such as separators and widget borders.
</SlintProperty>

### color-scheme
<SlintProperty propName="color-scheme" typeName="enum" enumName="ColorScheme" propertyVisibility="in-out">
Read this property to determine the color scheme used by the palette.
Set this property to force a dark or light color scheme. All styles
except for the Qt style support setting a dark or light color scheme.
</SlintProperty>