JFormDesigner / FlatLaf

FlatLaf - Swing Look and Feel (with Darcula/IntelliJ themes support)
https://www.formdev.com/flatlaf/
Apache License 2.0
3.42k stars 272 forks source link

Question on customizing IntelliJ theme through properties file #824

Open SiboVG opened 8 months ago

SiboVG commented 8 months ago

Hello,

I'm trying to customize my IntelliJ OneDark theme (com.formdev.flatlaf.intellijthemes.FlatOneDarkIJTheme) through a properties file, but it doesn't seem to work.

I have added 3 properties files in the a resources/themes directory:

  1. FlatLaf.properties to apply general theme changes
  2. FlatDarculaLaf.properties to apply changes to another dark theme of my application
  3. FlatOneDarkIJTheme.properties to apply changes to the IntelliJ OneDark theme

I noticed that changes to FlatOneDarkIJTheme.properties have no effect on my OneDark theme. I did notice that changing something in FlatDarculaLaf.properties affects the OneDark theme (maybe because OneDark extends that theme?).


Here's how I initialize my theme:

FlatLaf.registerCustomDefaultsSource("themes");

FlatOneDarkIJTheme.setup();

Here's some content from FlatDarculaLaf.properties:

Tree.hash = #FF0000

Here's content from FlatOneDarkIJTheme.properties:

Tree.hash = #00FF00

Which results in a red tree hash, even though it should be green...

image

Is it even possible to customize the FlatOneDarkIJTheme because it is a 3rd party plugin? I also noted that in the Theme Editor, the theme preview also remains the standard light theme instead of it switching to the OneDark theme, but maybe that's because only the core themes are supported in the Theme Editor?

Thanks for any help!

DevCharly commented 7 months ago

The problem is that the IntelliJ themes work differently than the core themes:

  1. First the properties files of the base core theme are processed (either FlatIntelliJLaf or FlatDarculaLaf depending on whether IntelliJ themes is light or dark).
  2. IntelliJTheme$ThemeLaf.properties is processed.
  3. the IntelliJ theme .json file is loaded and the colors are applied to the UIDefaults table produced by the previous steps.

There is no processing of IntelliJ theme-specific property files. This is the reason why the Theme Editor does not support IntelliJ themes.

I've tried to change the above processing by converting the JSON theme files to FlatLaf properties, but this causes some problems. This would allow customizing IntelliJ themes and probably also usage in Theme Editor preview. Maybe I'll continue work on this task in the future...

Currently, you could use a IntelliJTheme$ThemeLaf.properties file (since FlatLaf 3.4.1) to customize IntelliJ themes. (for FlatLaf 3.4 and older use ThemeLaf.properties)

You need to prefix each property with the theme name. E.g.:

[One_Dark]Tree.paintLines = true
[One_Dark]Tree.hash = #00FF00

There is a IntelliJTheme$ThemeLaf.properties in core, which is used to fix issues in IntelliJ JSON themes: https://github.com/JFormDesigner/FlatLaf/blob/main/flatlaf-core/src/main/resources/com/formdev/flatlaf/IntelliJTheme%24ThemeLaf.properties

SiboVG commented 7 months ago

The problem is that the IntelliJ themes work differently than the core themes:

  1. First the properties files of the base core theme are processed (either FlatIntelliJLaf or FlatDarculaLaf depending on whether IntelliJ themes is light or dark).
  2. IntelliJTheme$ThemeLaf.properties is processed.
  3. the IntelliJ theme .json file is loaded and the colors are applied to the UIDefaults table produced by the previous steps.

There is no processing of IntelliJ theme-specific property files. This is the reason why the Theme Editor does not support IntelliJ themes.

I've tried to change the above processing by converting the JSON theme files to FlatLaf properties, but this causes some problems. This would allow customizing IntelliJ themes and probably also usage in Theme Editor preview. Maybe I'll continue work on this task in the future...

Currently, you could use a IntelliJTheme$ThemeLaf.properties file (since FlatLaf 3.4.1) to customize IntelliJ themes. (for FlatLaf 3.4 and older use ThemeLaf.properties)

You need to prefix each property with the theme name. E.g.:

[One_Dark]Tree.paintLines = true
[One_Dark]Tree.hash = #00FF00

There is a IntelliJTheme$ThemeLaf.properties in core, which is used to fix issues in IntelliJ JSON themes: https://github.com/JFormDesigner/FlatLaf/blob/main/flatlaf-core/src/main/resources/com/formdev/flatlaf/IntelliJTheme%24ThemeLaf.properties

Thanks a lot for the reply and the update in 3.4.1!

cleancoda commented 6 months ago

The problem is that the IntelliJ themes work differently than the core themes:

1. First the properties files of the base core theme are processed (either `FlatIntelliJLaf` or `FlatDarculaLaf` depending on whether IntelliJ themes is light or dark).

2. `IntelliJTheme$ThemeLaf.properties` is processed.

3. the IntelliJ theme `.json` file is loaded and the colors are applied to the `UIDefaults` table produced by the previous steps.

There is no processing of IntelliJ theme-specific property files. This is the reason why the Theme Editor does not support IntelliJ themes.

I've tried to change the above processing by converting the JSON theme files to FlatLaf properties, but this causes some problems. This would allow customizing IntelliJ themes and probably also usage in Theme Editor preview. Maybe I'll continue work on this task in the future...

Currently, you could use a IntelliJTheme$ThemeLaf.properties file (since FlatLaf 3.4.1) to customize IntelliJ themes. (for FlatLaf 3.4 and older use ThemeLaf.properties)

You need to prefix each property with the theme name. E.g.:

[One_Dark]Tree.paintLines = true
[One_Dark]Tree.hash = #00FF00

There is a IntelliJTheme$ThemeLaf.properties in core, which is used to fix issues in IntelliJ JSON themes: https://github.com/JFormDesigner/FlatLaf/blob/main/flatlaf-core/src/main/resources/com/formdev/flatlaf/IntelliJTheme%24ThemeLaf.properties

Greetings!

I have a question related to this issue I hope.

I am trying to use as a theme from the theme-pack - specifically: Dracula com.formdev.flatlaf.intellijthemes.FlatDraculaIJTheme as seen here: https://github.com/JFormDesigner/FlatLaf/blob/main/flatlaf-intellij-themes/README.md

I have a similar challenge I believe, I have the properties file labeled as IntelliJTheme$ThemeLaf.properties per your instructions above, and added the name of the theme to each key inside the properties file like so:

[FlatDraculaIJTheme]Button.arc = 9999
[FlatDraculaIJTheme]Panel.background = #7469B6

however the properties file doesn't load.

I am using 3.4.1, here's my POM:

<dependency>
      <groupId>com.formdev</groupId>
      <artifactId>flatlaf</artifactId>
      <version>3.4.1</version>
    </dependency>
    <dependency>
      <groupId>com.formdev</groupId>
      <artifactId>flatlaf-intellij-themes</artifactId>
      <version>3.4.1</version>
    </dependency>
    <dependency>
      <groupId>com.formdev</groupId>
      <artifactId>flatlaf-extras</artifactId>
      <version>3.4.1</version>
    </dependency>

I confirmed the properties file loads if I use either of the main themes:

just not for the intellij type themes like the one I have in my example - FlatDraculaIJTheme.

Any suggestions would be greatly appreciated.

Hope you have a wonderful day!

Thank you for all your efforts and hard-work, keep it up!! :)

DevCharly commented 6 months ago

@cleancoda following should work:

[Dracula---Zihan_Ma]Button.arc = 9999
[Dracula---Zihan_Ma]Panel.background = #7469B6

The key prefix (enclosed in []) is the value of the name attribute in the theme JSON file: https://github.com/JFormDesigner/FlatLaf/blob/a311bac89b786bf6bb57d0e1045d619e0864d414/flatlaf-intellij-themes/src/main/resources/com/formdev/flatlaf/intellijthemes/themes/Dracula.theme.json#L2

Optionally the author attribute can be included in the prefix, which is necessary for Dracula because there is another Dracula theme in the "Metal UI" themes: https://github.com/JFormDesigner/FlatLaf/blob/a311bac89b786bf6bb57d0e1045d619e0864d414/flatlaf-intellij-themes/src/main/resources/com/formdev/flatlaf/intellijthemes/themes/Dracula.theme.json#L4

Here is the code that builds the supported prefixes: https://github.com/JFormDesigner/FlatLaf/blob/a311bac89b786bf6bb57d0e1045d619e0864d414/flatlaf-core/src/main/java/com/formdev/flatlaf/IntelliJTheme.java#L341-L344

cleancoda commented 6 months ago

@cleancoda following should work:

[Dracula---Zihan_Ma]Button.arc = 9999
[Dracula---Zihan_Ma]Panel.background = #7469B6

The key prefix (enclosed in []) is the value of the name attribute in the theme JSON file:

https://github.com/JFormDesigner/FlatLaf/blob/a311bac89b786bf6bb57d0e1045d619e0864d414/flatlaf-intellij-themes/src/main/resources/com/formdev/flatlaf/intellijthemes/themes/Dracula.theme.json#L2

Optionally the author attribute can be included in the prefix, which is necessary for Dracula because there is another Dracula theme in the "Metal UI" themes:

https://github.com/JFormDesigner/FlatLaf/blob/a311bac89b786bf6bb57d0e1045d619e0864d414/flatlaf-intellij-themes/src/main/resources/com/formdev/flatlaf/intellijthemes/themes/Dracula.theme.json#L4

Here is the code that builds the supported prefixes:

https://github.com/JFormDesigner/FlatLaf/blob/a311bac89b786bf6bb57d0e1045d619e0864d414/flatlaf-core/src/main/java/com/formdev/flatlaf/IntelliJTheme.java#L341-L344

SUCCESS!! That worked beautifully! Thank you so much for such a quick response!