Theme Editorv2

The FlatLaf Theme Editor supports editing FlatLaf theme properties files.

Overview

The theme editor allows editing all FlatLaf properties files in the opened directory. It provides auto-completion for keys and values, color chooser and color picker, automatically saves all modifications on window deactivation, reloads external changes on window activation, and more.

1. opened directory
2. all properties files in opened directory
3. create new properties file
4. editor area
5. preview area
6. current line highlighted
7. HSL and hey RGB color values for color defined in line
8. color preview for color defined in line
9. find and replace bar

Download

Run with java -jar flatlaf-theme-editor-<version>.jar (or double-click it). Requires Java 8 or newer.

Preview

The preview area on the right side of the main window shows the current look of the active properties file. The preview is updated immediately while editing.

On the All tab, use the Enabled, Editable (for text components) and Focused check boxes to toggle the preview component states.

On the Buttons tab, use the Button type toolbar to preview the various button types. Use the try me buttons to test hover, pressed and focused behavior.

On the Switches tab, use the Zoom toolbar to make the switches larger to better see changes. Use the try me switches to test hover, pressed and focused behavior.

Insert/edit Color

Use "Edit > Insert Color" (from menu) or Ctrl+G to open the color chooser dialog and insert a color value into the editor at the current caret position.

If the editor caret is at a color value before you press Ctrl+G, you can edit it in the color chooser dialog.

Pick Color from Screen

Use "Edit > Pick Color from Screen" (from menu) or Ctrl+Shift+G to pick a color from anywhere on the screen and insert its value into the editor at the current caret position. The editor and the preview is updated immediately while moving the mouse over the screen. Press mouse button to pick color, or Esc key to cancel. Arrow keys move mouse location by one pixel.

1. mouse location
2. zoom view of area at mouse location
3. hex RGB and HSL color values at mouse location
4. hex RGB value updated immediately in editor
5. colors updated immediately in preview
6. Windows 11 Settings window

Getting started

When you first start the theme editor, you'll see an empty window. First thing to do is to open a directory that either already contains one or more FlatLaf properties files or where you want to create a new properties file.

If you open a directory that does not contain properties files, you'll see this:

New Theme

Click New Theme to create a new theme. Enter the name of the theme (e.g. MyAppTheme) and select a base theme.

This creates MyAppTheme.properties and a corresponding Java file MyAppTheme.java for the new theme.

To use the new theme in your app, add following to your main() method:

MyAppTheme.setup();

See New Theme for details.

Modify Core Themes

Click Modify Core Themes if you use one of the core themes and want to make some modifications.

This creates empty FlatLightLaf.properties and FlatDarkLaf.properties files. If you need only one of them, delete the other one.

To use these properties files in your app, add following to your main() method:

FlatLaf.registerCustomDefaultsSource( "com.myapp.themes" );

Note: Invoke this method before setting the look and feel.

See Application properties files for details.

Keyboard shortcuts

Some useful (editor) keyboard shortcuts: