Add support for custom themes (FlatLaf)

[manufino]

Some people might find it annoying to work with light themes. We could add support for custom themes and include two default themes one light and one dark that can be set.

We could use the library: https://www.formdev.com/flatlaf/

[DarwinNE]

It can be interesting as long as FidoCadJ does not become tied and dependent from a single particular library. For instance, I used Quaqua for many years with macOS, but it become obsolete and I am searching for something better that would also support the dark mode.

[manufino]

FlatLaf is a good library for GUI themes; it's well-developed and stable. It doesn't require significant modifications to be integrated, and we could create a system that, if FlatLaf is found during compilation, it uses it; otherwise, the native themes already in place will be applied.

[manufino]

I'm integrating support for custom themes: Very nice, the menu is moved to the title bar.

I moved the checkbox for FidoCad compatibility to the first tab and I'm creating a dedicated tab for theme management.

The integration is non-invasive, and if the library is not found, the standard default look and feel is applied.

For the dark version, the theme file needs some work; it's not very visually appealing in certain areas:

[DarwinNE]

Very nice. Maybe on some icons you can create a dark mode version by inverting the colors.

[DarwinNE]

This is the current appearance of FidoCadJ 0.24.8 on macOS Sonoma:

Of course, the menu bar is on the top of the screen as it should be. IIRC, this look is obtained with VAqua. It is kind of ok, but this look and feel does not support the dark mode (that I am currently using on the computer where I took the screenshot).

I think that we can try to use FlatLaf for all platforms and switch from VAqua to FlatLaf on macOS, too.

[DarwinNE]

Be careful with the "FidoCAD comptibility mode". Users tended to click it and then forget it as its effect aren't immediately evident. The next time they use FidoCadJ they are puzzled, though, as some options are not available anymore. This is why I kept it separated in a dedicated tab.

It made sense to have this option fifteen years ago as there were still people using FidoCAD for Windows, but I am not sure it is still very useful now. Maybe it can be hidden (appear only by pressing CTRL or something similar?).

[manufino]

Yes, I also believe that there aren't many people using FidoCAD these days. Maybe we could consider removing it completely to avoid potential issues. What do you think?

[manufino]

Very nice. Maybe on some icons you can create a dark mode version by inverting the colors.

The solution would be simple: just increase that small white halo around the icons, perhaps fading it outwards, this would allow us to reuse the same icons across all theme configurations.

However, I'm not capable of doing it myself; I've never really gotten along with graphic design programs.

[manufino]

@DarwinNE, Could the options panel work like this?

Obviously, I'll be adding all the strings to the translation files in both Italian and English.

I was also considering splitting the "DialogOptions" code into multiple parts since it's becoming quite long. I would create separate classes for each options panel. What do you think?

[DarwinNE]

It looks very nice. Add strings in all resource files, just keep them in English for the languages you do not speak. Resource files must always be complete or FidoCadJ cannot run. Then, you add a message on discussions about every translation that is missing, like I have done here:

https://github.com/DarwinNE/FidoCadJ/issues/186

For the "FidoCadJ compatibility mode" let's keep it there for a while, but I think it may be ultimately removed. We may ask people on ElectroYou.it (since the Italian community is the only one where the original FidoCad was used).

[DarwinNE]

I tried the dark theme and it seems to work fine on macOS, too. I think we do not need Vaqua anymore, as long as I understand how to make sort that the title bar becomes dark, too (or is removed altogether as I did with Vaqua).

The theme should follow the theme of the operating system, isn't it? For instance, the default should be the dark mode if the OS is configured to use it and vice versa if the light mode is chosen. Shall we leave the choice to the end user?

[manufino]

... I think we do not need Vaqua anymore, as long as I understand how to make sort that the title bar becomes dark, too (or is removed altogether as I did with Vaqua).

For this, take a look at this page: https://www.formdev.com/flatlaf/macos/

The theme should follow the theme of the operating system, isn't it?

This could be difficult on some systems, so I would leave the choice to the user to avoid any issues.

[manufino]

For color management, the only thing missing is the setting to define the color of selected objects. I found it a bit tricky, but I'll work on it.

[DarwinNE]

I prepared some toolbar icons for the dark mode:

https://github.com/DarwinNE/FidoCadJ/tree/master/icons/dark_mode/export

Look into icons32 and icons16

[manufino]

@DarwinNE, And are you leaving the "arrow.png" as it is? https://github.com/DarwinNE/FidoCadJ/commit/74a736c146f391379ecb50934c7aa7a761434bf1#diff-60e46790a34cae2b4745fe1aeaba21e8c779d8539a363806903fbc27a6d1cc4d

[DarwinNE]

Yes, the arrow I see now is black with a white outline, exactly like a mouse pointer.

[manufino]

Yes, the arrow I see now is black with a white outline, exactly like a mouse pointer.

This happens on a Mac, but on other systems, 90% of the time the pointer is white, especially if the theme is dark.

Anyway, I just wanted to make sure you hadn't forgotten to change it. For me, it's fine as it is.

[DarwinNE]

The results on macOS is nice!

[manufino]

@DarwinNE, Yes, the Mac system makes everything look nicer.

I changed the background color on the layer combobox and the treeview; I find it better this way. If you're interested, here's the code to customize the dark theme. It might be useful to you...

# Global settings for a dark theme
@background = #2B2B2B
@foreground = #CCCCCC
@selectionBackground = #555555
@selectionForeground = #FFFFFF

# Default background and foreground
Component.background = @background
Component.foreground = @foreground

# Set the background color to white and text color to black for specific components
TextField.background = #FFFFFF
TextField.foreground = #000000

FormattedTextField.background = #FFFFFF
FormattedTextField.foreground = #000000

PasswordField.background = #FFFFFF
PasswordField.foreground = #000000

ComboBox.background = #FFFFFF
ComboBox.foreground = #000000
ComboBox.selectionBackground = #FFFFFF
ComboBox.selectionForeground = #000000

ComboBox.editorBackground = #FFFFFF
ComboBox.editorForeground = #000000

# Specific style for JLabel inside JComboBox to ensure black text
ComboBox.renderer[Label].foreground = #000000

# Tree background and foreground colors
Tree.background = #FFFFFF
Tree.foreground = #000000

# Popup menu and dropdown menu settings
PopupMenu.background = #FFFFFF
PopupMenu.foreground = #000000

Menu.background = #FFFFFF
Menu.foreground = #000000

MenuItem.background = #FFFFFF
MenuItem.foreground = #000000

ComboBox.renderer[Label].foreground = #000000
Panel.foreground = #000000
Label.foreground = #000000

# Set the background color to white for JPanel components inside JTabbedPane
TabbedPane.Panel.background = #FFFFFF

# Set the foreground color to black for JLabel components inside JTabbedPane
TabbedPane.Panel[Label].foreground = #000000

# Round the corners of JComboBox components
Component.arc = 10

[DarwinNE]

Nice! BTW, after the last commit the title bar was not dark anymore. I solved the problem in the commit https://github.com/DarwinNE/FidoCadJ/commit/4cc343ca0941efc4d05bfc64625fc1bfe2f3b82e as applyOptimizationSettings() should be called before Swing and AWT are initialized. There is a small risk of having unhandled exceptions when calling applyOptimizationSettings() and we should keep it to the minimum.

[DarwinNE]

Shall we close this issue?

[manufino]

Yes, that's fine with me.

[DarwinNE]

Let's do it 😊