Fluent Design Style Text and Password Field for Java, JavaFX

I’ve just released version 4.5 of Java, JavaFX theme JMetro. This version adds new styles for the text and password field, inspired, as usual, by Fluent Design.

In this post, I’m going to go over the text box and password box changes in this new release in greater detail.

JMetro Version 4.5

Like I said in the introduction, JMetro 4.5 has just been released.

I’ll start by showing the old text field and password field styles prior to JMetro 4.5:

TextField — JMetro OLD Light Theme

Text Field — JMetro OLD Dark Theme

And, here is the old light and dark style for the password field:

Password Box — JMetro OLD Light Theme

Password Field — JMetro OLD dark theme

These are some of the differences between the old styles and the new styles introduced in JMetro 4.5:

• Colors have changed;
• The accent color is used when the controls are focused (control is open for, and receives keyboard input);
• Hover colors have changed;
• The text has been made bigger by default;
• Icons for clear and show password have been tweaked slightly (positioning and size).

And, here are the new styles in action:

TextField — JMetro NEW light theme

TextField — JMetro NEW dark theme

The new password field styles look as follows:

Password Field — JMetro NEW light theme

Password Field — JMetro NEW dark theme

There are the differences between the new styles and Microsoft’s Fluent Design, namely icons. I don’t like the Fluent Design’s icon for the show password button on the password field — and the colors. I’m not fond of how, in the dark version, the color changes abruptly from black to white when the controls are focused.

Of course, if you don’t agree, you can easily add a stylesheet to override the JMetro looks after the call to applyTheme from the JMetro class.

In the future, I plan to slightly update the show password icon and make its stroke thinner.

Wrapping Up

JMetro version 4.5 is still very new. With it, new password field and text field styles are available.

As always, if you want to look at the documentation, you can check out the Java, JavaFX theme JMetro page. This will be updated soon with the details from this new version.

Next, I’ll probably be looking at and updating the Progress controls.

Hope you enjoyed!