- Overview
- How to create and use a color palette?
- Creating a color palette
- Associating a palette with a project or window
- Using palette colors in project elements
- Changing palettes dynamically
- Icons, images, buttons and color palettes
- Edit control
- Image control
- Radio Button / Check Box control
- Button control
- Table control
- Slider control
- Color palettes and WLanguage
- Handling color palettes as JSON files
- WLanguage functions
Starting with version 2025, WINDEV and WINDEV Mobile include color palettes for projects and windows. A palette is a set of about a hundred colors. Each color is intended for a specific use in the skin template, e.g., background, text, border, etc.
Each color is named according to its use: background-window, background-input, background-hover, background-button, etc.
A palette allocates a color to each "color name". For example, window-background = "#be677f" or button-background-color = RGB(190,103,127) When a new palette is applied, all controls automatically switch to the new colors. This mechanism lets you change the look of an application easily and dynamically. A series of functions allow you to create and manipulate color palettes. A color palette is a JSON file that can be easily modified in WLanguage.  Improvements available in version 2025: How to create and use a color palette? Creating a color palette You can create color palettes programmatically with PaletteGenerate. This function generates a color palette based on the specified base color. This color palette can then be saved as a file using PaletteSave. Examples: RedPalette is Palette
RedPalette = PaletteGenerate(0x7F67BE)
PaletteSave(RedPalette, "RedPalette.wdpalette")
GreenPalette is Palette
GreenPalette = PaletteGenerate(DarkGreen)
PaletteSave(GreenPalette, "GreenPalette.wdpalette")
The resulting .wdpalette file can then be associated with the project or window. Associating a palette with a project or window You can associate a color palette with the entire project. However, you can also associate a color palette with a specific window. In this case, the window's color palette takes precedence over the project's color palette. This makes it possible to use multiple color palettes in a single project. To associate a palette with a project: - Open the project description window. To do so, go to the "Project" tab, "Project" group, and click "Description".
- In the "Style" tab, in "Palette", select the .wdpalette file.
- Confirm.
To associate a palette with a window: - Open the window description ("Description" option in the context menu).
- In the "Style" tab, in "Skin template and palette", select the .wdpalette file in "Color palette".
- Confirm.
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.
Using palette colors in project elements To use the different colors from a palette, you need to modify the style of the different elements in your project, including windows, controls, etc. To do so, simply use the color names defined in the palette for these elements. For example: - To use a color from the palette as the background color of a window, simply go to "Style" tab of the window description, "Colors" selection, and in "Background", select the desired color from the palette.
- To use a color from the palette for a button outline, go to the "Style" tab of the button description window, select the "Focus outline" element, and select the desired color from the palette associated with the window.
If an element is associated with a palette, a specific icon appears: When the different project elements are associated with a palette, you can switch between palettes dynamically. Changing palettes dynamically Color palettes can be changed dynamically, using PaletteChange. This change can be applied to the entire project or to a single window. All the elements associated with a color defined in the project or window color palette are automatically updated. Example: GreenPalette is Palette
GreenPalette = PaletteGenerate(DarkGreen)
PaletteSave(GreenPalette, "GreenPalette.wdpalette")
PaletteChange(GreenPalette)
When applying this change, you can use Windows theme colors. Simply use SysWindowsAccentColor to get the Windows theme accent color. You can then generate the corresponding color palette. For example: WindowsPalette is Palette
WindowsPalette = PaletteGenerate(SysWindowsAccentColor())
PaletteSave(WindowsPalette, "WindowsPalette.wdpalette")
PaletteChange(WindowsPalette)
Icons, images, buttons and color palettes If your project contains icons, images, etc., when you apply a new palette, these elements must adapt to the color used in the palette. This is particularly important for monochrome icons and images. To achieve this, you can use monochrome images/icons, then define the palette color to be used for these images. This way, colors will follow any changes made to the palette. Monochrome image mode is supported for most standard controls: Note: Images in monochrome mode are supported from version 2025 Update 1. Edit control An Edit control can display buttons to the left or right of the input field. You can specify whether the image should be forced to monochrome. If so, you can also define whether it should use to the text color or style color. If you select text color, the color of the image will match the color of the text in the Edit control. If you select style color, the color of the image will match to the color defined in "Force monochrome mode". Image control In an Image control, you can force the image to monochrome mode: - Open the control description window.
- In the "General" tab, check "Monochrome".
- In the "Style" tab, select "Force to monochrome mode" and specify the palette color to be used.
- Confirm.
Radio Button / Check Box control In a Radio Button control or Check Box control, you can use monochrome mode for checkmarks and check boxes. - Open the control description window.
- 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.
- Confirm.
Button control A Button control can contain one or more images. To force images in the control to monochrome mode using a specific color: - Open the control description window.
- 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.
- Confirm.
Table control Table controls use multiple images: filter and sort icons, etc. To force images in the control to monochrome mode using a specific color: - Open the control description window.
- 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.
- Confirm.
Slider control In a Slider control, you can force the cursor to monochrome mode. - Open the control description window.
- 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.
- Confirm.
Color palettes and WLanguage Palettes are JSON files that can be manipulated: - using specific WLanguage functions,
- using functions for JSON variables.
Handling color palettes as JSON files A color palette corresponds to a JSON file containing a description of the different colors in the palette. JSON file extract: {
"main":"#2D915A",
"background":"#F8FFF2",
"text":"#000000",
"warning":"#FF0000",
"window-background":"=background",
"imageless-background":"=main",
"input-background":"=window-background",
"hover-background":"=MIX(background,text,8)",
"select-background":"=MIX(background,text,15)",
"oddline-background":"=MIX(background,hover-background,50)",
,"note-background":"=MIX(background,text,50)",
"warning-background":"=MIX(background,warning,50)",
"basic-text":"=text",
"select-text":"=TEXTOK(select-background)",
"input-text":"=TEXTOK(input-background)",
"windowtitle-text":"=TEXTOK(window-background)",
...
} You can edit this JSON file and add your own colors. In this file, you can indicate that a color is derived from another named color, and apply a filter to it. You can change the lightness, hue, etc. This makes it possible to create cascading colors. For example: - 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
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.
WLanguage functions WLanguage allows you to manipulate color palettes: - via the Palette type.
- via different WLanguage functions:
| | | Changes the palette used by the project or by a window. | | Generates a palette from a base color. | | Gets the palette currently used by the project or window. | | Loads a palette from a .wdpalette file. | | Saves a palette to a file. |
This page is also available for…
|
|
|