JDownloader Community - Appwork GmbH
 

Reply
 
Thread Tools Display Modes
  #1  
Old 24.09.2023, 00:04
dma dma is offline
Baby Loader
 
Join Date: Sep 2023
Location: /home/dma/
Posts: 6
Default *Dark Theme | Breeze-Dark | FlatDarkLaf *

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
Attached Images
File Type: jpg Screenshot_20230922_191833.jpg (162.1 KB, 1 views)
File Type: png Screenshot_20230922_191927.png (57.6 KB, 0 views)
File Type: jpg Screenshot_20230922_192002.jpg (165.6 KB, 2 views)
File Type: jpg Screenshot_20230922_192039.jpg (144.7 KB, 0 views)
File Type: jpg Screenshot_20230922_192116.jpg (173.1 KB, 2 views)

Last edited by dma; 25.09.2023 at 20:39. Reason: Bilder in SPOILER gepackt, um Webseitenlayout nicht zu zerstören
Reply With Quote
  #2  
Old 24.09.2023, 00:30
dma dma is offline
Baby Loader
 
Join Date: Sep 2023
Location: /home/dma/
Posts: 6
Default Dateien für das Thema

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.
Code:
#######################################################
# 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:

Code:
{
"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)

- ..?

Last edited by dma; 25.09.2023 at 21:36.
Reply With Quote
  #3  
Old 24.09.2023, 05:43
raztoki's Avatar
raztoki raztoki is offline
English Supporter
 
Join Date: Apr 2010
Location: Australia
Posts: 17,671
Default

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
__________________
raztoki @ jDownloader reporter/developer
http://svn.jdownloader.org/users/170

Don't fight the system, use it to your advantage. :]

Last edited by raztoki; 24.09.2023 at 08:11. Reason: added some whitelisted domains
Reply With Quote
  #4  
Old 24.09.2023, 10:47
dma dma is offline
Baby Loader
 
Join Date: Sep 2023
Location: /home/dma/
Posts: 6
Default

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.
Reply With Quote
  #5  
Old 25.09.2023, 11:35
pspzockerscene's Avatar
pspzockerscene pspzockerscene is offline
Community Manager
 
Join Date: Mar 2009
Location: Deutschland
Posts: 73,118
Default

@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/...
__________________
JD Supporter, Plugin Dev. & Community Manager

Erste Schritte & Tutorials || JDownloader 2 Setup Download
Spoiler:

A users' JD crashes and the first thing to ask is:
Quote:
Originally Posted by Jiaz View Post
Do you have Nero installed?

Last edited by pspzockerscene; 25.09.2023 at 11:38. Reason: Infos zum Posten von Dateien ergänzt.
Reply With Quote
  #6  
Old 25.09.2023, 11:40
pspzockerscene's Avatar
pspzockerscene pspzockerscene is offline
Community Manager
 
Join Date: Mar 2009
Location: Deutschland
Posts: 73,118
Default

Ich hab deinen Thread mal angepinnt in der Hoffnung, dass mehr User was davon haben
__________________
JD Supporter, Plugin Dev. & Community Manager

Erste Schritte & Tutorials || JDownloader 2 Setup Download
Spoiler:

A users' JD crashes and the first thing to ask is:
Quote:
Originally Posted by Jiaz View Post
Do you have Nero installed?
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT +2. The time now is 23:06.
Provided By AppWork GmbH | Privacy | Imprint
Parts of the Design are used from Kirsch designed by Andrew & Austin
Powered by vBulletin® Version 3.8.10 Beta 1
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.