[dma]

Hallo JD-Community.

So, nachdem ich X Beiträge zu dem Thema gelesen hatte, habe ich nun selber die Hand angelegt und so entstand mein eigenes Thema "Breeze Dark".

Ich möchte im Voraus schicken, dass ich versierter Linuxer bin und beruflich mit GUI von Softwareanwendungen zu tun habe.
Dieses Thema basiert an nahezu perfekten Komponenten- und Farbenkonstellationen von dem Breeze-Projekt, welches unter KDE-Anwendern verbreitet und bekannt ist.

Bevor ich in die Details gehe, möchte ich kurz zusammenfassen, was man verstanden haben muss, um an der Oberfläche von JD2 efektiv drehen zu können.
Es gibt 2 Punkte, mit denen sich ein Thema definiert:

1. Icons
2. Komponenten von Java-Oberfläche (Button, CheckBox, Spinner, Panel, ProgressBar etc.) samt ihrer Eigenschaften (Größe, Farbe etc.), die in Klassen definiert wurden und zur Laufzeit gerendert werden.

Zu KOMPONENTEN
Die bisherigen hier oft besprochenen Dark-Themen basierten auf den Themen von Synthetica. Das hat den Nachteil, dass die Oberfläche-Elemente "von Hand" als Bilder erstellt werden mussten und in der Klasseneigenschaften auf diese Bilder verwiesen wurde. Es waren ca. 50 Bilder für alle benötigten Komponenten (Button, CheckBox, Spinner, Panel, ProgressBar etc.). Diese Bilder hatten natürlich schon ihre Farben, die dann wiederum nicht mehr "customisebar" waren und wieder manuell nachgemacht werden mussten.

Somit war es für mich klar, dass nur die Lösung von FlatLaf in Frage kommt, wo es GAR KEINE Bilder für die Oberfläche gibt. Dazu kam noch der Super-Editor, der die Elemente anzeigt, wenn man sie formatiert. Hierzu kommt noch, dass man die Klassen nicht direkt verändern muss, sondern einfach über Parametrisierung abändern kann. Es reicht dann nur eine einzige *.properties-Datei zu überschreiben, um das Design komplett zu verändern.

Zu Icons
Hier ist das Thema deutlich einfacher. Im Installationverzeichnis von JD2 befindet sich ein Verzeichnis "themes". Hier sollte man das Verzeichnis "standard" unter einem anderen Namen dazu kopieren und die Symbole eins nach dem anderen erstzen.
Hinweis: es sollen UNBEDINGT Grafiken im SVG-Format verwendet werden. Diese sollen (möglichst) pixelgenau als 16x16 Pixel gezeichnet werden.
Im Breeze-Projekt gibt es jede Menge von Action-Icons in dieser Größe. Einige, die fehlten, habe ich im selben Design nachgezeichnet.

Was man noch zur Icon-Struktur-Wissen muss: im Hauptverzeichnis sind die meisten Symbole für die Oberfläche, im Verzeichnis "exttable" sind Symbole, die in der Tabellen-Bedienung verwendet werden (Spalten-Konfig, Sperre, Sortierung). Verzeichnisse "dialog" und "logo" sind selbsterklärend.

Einige Tipps zum "Theming"
Es geht eigentlich darum, Konstellationen für 3 Farben zu definieren:
- dunkle Farbe
- helle Farbe
- Akzent-Farbe

entsprechend für Light-Mode
- heller Hintergrund
- dunkle Schrift / Icons
- Akzent-Farbe

entsprechend für Dark-Mode
- dunkler Hintergrund
- helle Schrift / Icons
- Akzent-Farbe

Hinweis: Akzent-Farbe bleibt unverändert. Es können noch ergänzende Farben für Icons (rot, grün, blau, gelb) hinzukommen, um bestimmte Aktionen zu betonen.
(siehe Breeze-Projekt) -> github.com/KDE/breeze-icons


Im nächsten Post gehe ich detaillierter auf das Thema für JD2.


--------------------------------------------------------------------------------------------
SCREENSHOTS:
disk.yandex.ru/d/k6eGj-DBSAlZkg

Eine gezippte Datei mit Icons + Konfigurationsdateien
disk.yandex.ru/d/Mhyua2xuRh40AQ

[dma]

Was man im JDownloader machen muss:
1. Einstellungen / Profieinstellungen
2. in Filtereinstellungen "Look" eingeben
3. Wert FLATLAF_DARK bei "GraphicalUserInterfaceSettings: Look And Feel Theme" wählen
4. JD neustarten.

In der Zip-Datei befinden sich 3 Dateien, die man entpacken muss.
-> disk.yandex.ru/d/Mhyua2xuRh40AQ

1. breeze-dark.tar.gz -> muss nach <jd-verz>/themes entpackt werden
2. FlatDarkLaf.json.tar.gz -> muss nach <jd-verz>/cfg/laf entpackt werden
3. FlatDarkLaf.properties.tar.gz -> muss in <jd-verz>/libs/laf/flatlaf.jar ausgetauscht werden (wie man eine *.jar umpackt erkläre ich nicht)

Hinweis zur Anpassung der eigenen Akzent-Farbe:
Bevor man die Datei FlatDarkLaf.properties überschreibt, kann man die aus dem Archiv so anpassen, indem man den Parameter @accentBaseColor anpasst. Folglich werden entsprechende Farbenkonstellationen neu berechnet und alle Komponenten (CheckBox, ProgressBalken etc.) in neuem Akzent-Design gerendert.

#######################################################
# Breeze-Dark by DMA
# EDIT YOUR INDIVIDUAL accentBaseColor :-) #64989A
@accentBaseColor = #64989A
#
#The Purple (CANONICAL AUBERGINE) is #772953
#The Orange (UBUNTU ORANGE) is #e95420
# Fedora MEDIUM ELECTRIC BLUE #0B57A4
#######################################################

Wer mag, bitte testen, es gibt ein paar kleine Punkte, die ich nicht rund kriege, aber vielleicht mit der Hilfe der Entwicklung kann man die properties-Datei noch nachbessern.

Bekannte Probleme:
- Bei FlatLaf wird die Icon-Klasse CheckBox mit 15px gerendert, im Panel Links wird der rechte Rand wohl um einen Pixel abgeschnitten, obwohl ich die Außenabstände für die Checkbox mit 0px konfiguriert habe, wahrscheinlich ist der Panel zu schmal.
- Nicht alle Einstellungen von der Properties werden übernommen: z.B. für TableHeader konnte ich die Farbe übergeben, nicht aber die Höhe, so dass der Text leicht unten abgeschnitten ist.

ToDo:

- Überführung der Parameter aus FlatDarkLaf.json nach FlatDarkLaf.properties, um nichts nachträglich konfigurieren zu müssen
Im Moment sieht die FlatDarkLaf.json so aus:

Spoiler:

{
"iconsetid":"breeze-dark",

"colorforpanelbackground":"#ff1b1e20",

"configlabelenabledtextcolor":"#fffcfcfc",
"colorforconfigheadertextcolor":"#fffcfcfc",

"customtablerowheight":32,

"colorfortableselectedrowsforeground":"#ff64989a",
"colorfortablepackagerowbackground":"#ff31363b",
"colorfortablesortedcolumnview":"#ff64989a",
"colorfortablemouseoverrowforeground":"#fffcfcfc",
"colorfortablealternaterowbackground":"#0635383c",
"tablealternaterowhighlightenabled":false,

"colorfortablesortedcolumnview":"#ff64989a",
"colorforpanelheaderbackground":"#ff64989a",

"colorforpanelheaderforeground":"#fffcfcfc",
"colorforspeedmeterlimiterbottom":"#ff8b9236",
"colorforconfigpaneldescriptiontext":"#ffa1a9b1",
"colorfortablepackagerowforeground":"#fffcfcfc",
"colorforspeedmetercurrenttop":"#ca861934",
"colorfortablemouseoverrowbackground":"#ff4e7375",
"colorfortableselectedrowsbackground":"#ff2a2e32",
"configlabeldisabledtextcolor":"#ffa1a9b1",
"colorforscrollbarsmouseoverstate":"#ff2e3435",

"colorforspeedmeteraverage":"#ff356b5e",
"colorforspeedmeteraveragetext":"#fffcfcfc",
"colorforspeedmetertext":"#fffcfcfc",
"colorforspeedmetercurrentbottom":"#ff3d7d6a",

"colorforprogressbarforeground1":"#5f476d6e",
"colorforprogressbarforeground2":"#5f476d6e",
"colorforprogressbarforeground3":"#80476d6e",
"colorforprogressbarforeground4":"#5f476d6e",
"colorforprogressbarforeground5":"#5f476d6e",

"colorfortablefilteredview":"#ff00ff00",
"colorfortooltipforeground":"#fffcfcfc",

"colorforerrorforeground":"#ffda4453",
}

- Lösung des Problems mit der CheckBox in 2 Kontexten, wo ein Pixelstreifen (rechts) abgeschnitten wird (Bilder folgen)

- Korrektur der Icon-Hintergründe ganz unten rechts (Bilder folgen)

- ..?

[raztoki]

Thanks for your in depth post, unfortunately your attachments wont be possible for the public to obtain with the current forum settings. I'll check which services you can upload to which have been preapproved.

imgur.com
privatelink.de
picflash.org

[dma]

Many thanks. It would be really better if I could post some pictures. I would like to use the pictures to describe errors or clarify questions in order to solve problems.
I promise that I will not abuse it.

[pspzockerscene]

@dma
Sehr cool!

Zu den Screenshots:
Jeder kann öffentlich sichtbare Screenshots posten, aber nur auf Bilderhostern, die wir erlauben.
Diese hat raztoki in seiner Antwort aufgelistet.
EDIT

Zu Dateianhängen:
Auch die können in diesem Forum nur Moderatoren sehen.
Um Dateien zu verlinken, bitte folgendes tun:
1. Datei auf einen beliebigen Filehoster/Clloudanbieter hochladen.
2. Link ohne Protokoll posten also z.B. drive.google.com/...

[pspzockerscene]

Ich hab deinen Thread mal angepinnt in der Hoffnung, dass mehr User was davon haben