Associating a palette with a project

1. Open the project description window. To do so, go to the "Project" tab, "Project" group, and click "Description".
2. Go to the "Style" tab, "Palettes" section to see the list of palettes associated with the project.
   
   You can:
   • Add a palette (). This button opens the palette selection window.
     
   • Delete a palette ().
   • Set the default palette (). This palette will be used by default in the editor and when the application is launched.
3. Confirm.

Associating a palette with a window

1. Open the window description ("Description" option in the context menu).
2. In the "Style" tab, in "Skin template and palette", select the .wdpalette file in "Color palette".
   
3. Confirm. The color palette is immediately associated with the window in the editor.

Remarks

• To dynamically associate a color palette with a project or window, simply use PaletteChange.
• Color palettes correspond to JSON files. This makes it possible to use the same color palette in multiple projects. You can also share color palettes via the Source Code Manager, for example.

Creating a color palette

RedPalette is Palette
RedPalette = PaletteGenerate(0x7F67BE)
PaletteSave(RedPalette, "RedPalette.wdpalette")

GreenPalette is Palette
GreenPalette = PaletteGenerate(DarkGreen)
PaletteSave(GreenPalette, "GreenPalette.wdpalette")

• If the secondary color is not specified, it is automatically defined to obtain the best effect.
• If a secondary color is specified, it will be used in all the styles that use a secondary color (see JSON file contents).

Changing palettes dynamically

• change the palette associated with a project or window using a variable of type Palette.
  Example:
  

  GreenPalette is Palette
  GreenPalette = PaletteGenerate(DarkGreen)
  PaletteSave(GreenPalette, "GreenPalette.wdpalette")
  PaletteChange(GreenPalette)

• change the palette associated with a project using a "wdpalette" file. By default, accessible wdpalette files appear in the code suggestions.
  
  

  To change the current syntax in the code editor, press Ctrl + Up or Down arrow key.

Creating a color palette based on the Windows theme

1. Use SysWindowsAccentColor to get the Windows accent color.
2. Generate the corresponding color palette (PaletteGenerate).
3. Change the palette used (PaletteChange).

WindowsPalette is Palette

WindowsPalette = PaletteGenerate(SysWindowsAccentColor())
PaletteSave(WindowsPalette, "WindowsPalette.wdpalette")
PaletteChange(WindowsPalette)

// Listen for the event to generate the palette adapted to the system
CONSTANT
	EVT_THEME = 0x001A
END

Event(_ChangeAccentColor, "WIN_CountryStats", EVT_THEME)

INTERNAL PROCEDURE _ChangeAccentColor(nWindowsMessage int<useful>, ...
	nWParam int<useful>, nLParam int<useful>)
		// Change palette
		WindowsPalette is Palette
		WindowsPalette = PaletteGenerate(SysWindowsAccentColor())
		PaletteSave(WindowsPalette, "WindowsPalette.wdpalette")
		PaletteChange(WindowsPalette)
END

• Edit controls.
• Image controls.
• Radio Button/Check Box controls.
• Button control.
• Table control.
• Slider.

Edit control

Image control

1. Open the control description window.
2. In the "General" tab, check "Monochrome".
3. In the "Style" tab, select "Force to monochrome mode" and specify the palette color to be used.
4. Confirm.

Radio Button / Check Box control

1. Open the control description window.
2. In the "Style" tab, expand "Element", select "Checkmark border" (or "Checkmark"), and check "Adapt image with the colors defined in this window". You can then select the desired palette color.
3. Confirm.

Button control

1. Open the control description window.
2. In the "Style" tab, expand "Element", select "Force to monochrome mode" and choose the desired color. You can use a color from a color palette.
3. Confirm.

Table control

1. Open the control description window.
2. In the "Style" tab, expand "Element", select "Force to monochrome mode" and choose the desired color. You can use a color from a color palette.
3. Confirm.

Slider control

1. Open the control description window.
2. In the "Style" tab, expand "Element", select "Cursor", and check "Adapt image with the colors defined in this window". You can then select the desired palette color.
3. Confirm.

• using specific WLanguage functions,
• using functions for JSON variables.

WLanguage functions

• via the Palette type.
• via different WLanguage functions:
  

  New in version 2025 PaletteChange	Changes the palette used by the project or by a window.
  New in version 2025 PaletteGenerate	Generates a palette from a base color.
  New in version 2025 PaletteGet	Gets the palette currently used by the project or window.
  New in version 2025 PaletteLoad	Loads a palette from a .wdpalette file.
  New in version 2025 PaletteSave	Saves a palette to a file.

Handling color palettes as JSON files

• To add a custom color to the "WD_Eco.palette" file:
  

  MyPalette is Palette
  ...
  MyPalette["CustomColor"] = RGB(255,15,21)

• To adjust the opacity of one of the colors of the palette, you can directly modify the color using the Opacity property:
  

  MyPalette is Palette
  ...
  MyPalette["CustomColor"] = RGB(255,15,21)
  MyPalette["CustomColor"].Opacity = 127

  Transparency is defined by an alpha channel.
  After saving and loading the palette, the opacity (transparency) value will be applied to "CustomColor". It will then be available in the list of colors of the different controls. A specific color preview shows that the color supports transparency.
  
  
  Attention: Opacity is only supported from version 2025 Update 1.

JSON file contents

• Primary colors
  • Primary: Main accent color. Determines the overall look of the UI.
  • Primary Text: Text color meant to be visible on a background that uses the primary color.
  • Primary Border: Main color for control borders.
  • Primary Red Background: Contrasting red background for primary_text.
• Secondary colors and text
  • Secondary: Secondary theme color.
  • Text: Main text color, readable on the following backgrounds: secondary, windows_background, container_background.
  • Border: Border color to distinguish controls on secondary backgrounds.
• Background colors
  • Window Background: Window background.
  • Container Background: Background of container controls (cell, tab, supercontrol, etc.).
  • Input Background: Background for Edit and Combo Box controls.
  Tip: These colors can also be used to alternate the colors of odd and even rows in Table and Looper controls.
• Interaction effects
  • Pressed Mix: Mixed color for the pressed state.
  • Hovered Mix: Mixed color for the hovered state.
  • Grayed Mix: Mixed color for the grayed out effect.
• Other effects
  • Focus Outline: Focus outline color.
  • Accent Background: Background for progress bars or indicators.
  • Text Light: Lighter text color for information text.
  • Border Strong: Stronger border color.
  • Primary Light: Lighter version of primary.
  • Primary Dark: Darker version of primary.
• Selection and hover bars
  • Selected Background: Selection bar background.
  • Selected Text: Text readable on selected_background.
  • Hovered Background: Hovered background.
• Other texts
  • Windows Title Text: Window title text.
  • Title Text: Section title color.
  • Subtitle Text: Subtitle color.
  • Section Text: Section label color.
  • Red Text: Red text readable on windows_background and container_background.
  • Gray Text: Gray text readable on windows_background and container_background.
  • Link Text: Color for buttons and links.
• Negative
  • Negative Text: Text in negative mode.
  • Negative Background: Background in negative mode.
• Grayed out
  • Disabled Text: Grayed-out text.
  • Disabled Background Text: Grayed-out text background (raised effect).
• Series colors:
  • graph_series_N: Where N is a number from 1 to 11 (see example above).

• Referencing a color from the palette
  You can directly reference another color in the palette:
  "link_text":"=primary"
• MIX: Mixes color1 and color2 according to the specified percentage.
  Syntax:
  
  MIX(<color1>, <color2>, <color2 percentage>)
• MIXGRAY: Has the same effect as MIX, then converts the result to grayscale (extracts the luminosity of the resulting color).
  Syntax:
  
  MIXGRAY(<color1>, <color2>, <color2 percentage>)
• TEXTOK: Returns white or black to ensure optimum text readability against <backgroundcolor>.
  Syntax:
  
  TEXTOK(<backgroundcolor>)
• BGOK: Returns a white or black background to ensure optimal readability of a text that uses <textcolor>.
  Syntax:
  
  BGOK(<textcolor>)
• SERIES: Returns the series color corresponding to the given index (hard-coded preset color).
  Syntax:
  
  SERIES(<index 0 to 10>)
• IFLUMLT: Returns <colorIfLighter> or <colorIfDarker> depending on the luminance of <color1> compared to the <nLuminance> threshold.
  Syntax:
  
  IFLUMLT(<color1>, <nLuminance>, <colorIfLighter>, <colorIfDarker>)