Dasselbe Fenster, Ihr Stil

Eigenes Design erstellen

Ein Design ist eine kleine Textdatei im TOML- (oder JSON-)Format. Sie benennt nur das, was sie ändert; alles andere stammt von dem Design, auf dem sie aufbaut. Sie müssen MDM nicht selbst kompilieren oder programmieren können.

1. Erstellen

   Beginnen Sie mit einigen Farben und fügen Sie nach und nach weitere hinzu:

   name = "Harbour"
   inherits = "classic"
   icons = "color"
   
   [seeds.light]
   background = "#eef3f6"
   surface = "#ffffff"
   text = "#11202b"
   accent = "#0f6c8c"
   
   [seeds.dark]
   background = "#14212a"
   surface = "#0e171d"
   text = "#e8f0f4"
   accent = "#5cc3e6"
   
   [sizes]
   radius = 6
   
   [controls]
   focus = "ring"

   • inheritsist das Design, von dem Ihres ausgeht: classic (die Standardeinstellung), high-contrast, metro, adwaita, breeze, luna, aero, aqua oder eine andere Designdatei im selben Ordner.
   • [seeds]sind eine Handvoll Farben (background, surface, header, text, accent, selection, error, warning, success), die MDM auf alle Bedienelemente verteilt. [seeds.light] und [seeds.dark] geben jeder Seite ihre eigene.
   • [colors]legt einzelne Farbfunktionen auf beiden Seiten fest, [light] und [dark] nur auf einer Seite: #rrggbb oder #rrggbbaa mit Transparenz.
   • [sizes]sind Eckenradien, Rahmenbreiten, Schriftgrößen und Zeilenhöhen in Pixeln. [controls] wählt die Form von Textfeldern, Kontrollkästchen, Schaltflächen, Fortschrittsbalken, Bildlaufleisten, der Fokusmarkierung und der Titelleiste.
   • iconsist color, mono oder accent. Ein Theme in einem eigenen Ordner (my-theme/theme.toml) kann seine Icons in icons/16 und icons/24 bereitstellen, jeweils benannt nach dem, was sie zeigen (tb-add-url.svg, cat-music.png); -symbolic übernehmen die Textfarbe des Themes.
   • contrast = "high"verstärkt jede Kante und Textfarbe darüber.

   Ein Schlüssel, den MDM nicht kennt, oder ein Wert, den es nicht lesen kann, wird übersprungen und in MDMs Log (logs-Ordner neben dem Themes-Ordner) geschrieben, sodass eine für ein neueres MDM erstellte Datei weiterhin geladen wird. Die integrierten Themes werden auf dieselbe Weise geschrieben: lesen Sie sie auf GitHub.

   Jede Farbrolle (156)

   Schlüssel	Was es färbt
   window	Hintergrund von Windows und Dialogen
   text	Text und Glyphen
   text.disabled	Deaktivierter Text, das eine Grau jedes ausgegrauten Steuerelements und jeder Beschriftung
   text.muted	Sekundärer Text: Notizen, Größen, Versionen
   link	Text, der etwas öffnet
   error	Fehlertext
   error.strong	Meldung einer fehlgeschlagenen Prüfung in den Optionen (Verbindungs-, Browser- und Helfertests)
   warning	Warntext
   success	Erfolgstext (eine übereinstimmende Prüfsumme)
   reach.near	Der Server eines Downloads in der Nähe seiner Roundtrip-Zeit (unter 60 ms), in den Eigenschaften
   reach.medium	Ein Server mit einer mittleren Roundtrip-Zeit (60 bis 150 ms)
   reach.far	Ein Server mit einer weiten Roundtrip-Zeit (über 150 ms)
   flag.edge	Der dünne Rand um die Flagge eines Landes
   accent	Der Akzent: Fokuslinien, offene und Standard-Steuerelemente, Filter, Fokus von Links
   focus.ring	Das gepunktete Tastatur-Fokusrechteck
   selection	Die Füllung einer Auswahl: Zeilen, ein ausgewählter Tag, ausgewählter Text
   selection.text	Text auf der Auswahl
   selection.muted	Sekundärer Text auf der Auswahl
   selection.inactive	Eine ausgewählte Zeile in einer Liste ohne Fokus
   selection.focus	Die gepunktete Umrandung der fokussierten Zeile auf einer ausgewählten Zeile
   group.line	Der Rahmen eines Gruppenfelds
   etch.shadow	Die Schattenlinie eines geätzten Trennzeichens
   etch.light	Die Hervorhebungslinie eines geätzten Trennzeichens
   tab.page	Der Körper einer Registerkarte
   tab	Ein nicht ausgewählter Tab und der Schatten der Seite
   tab.hot	Ein Tab unter dem Mauszeiger
   chevron	Ein Pfeil einer Dropdown-Liste oder eines Drehfelds
   chevron.disabled	Ein ausgegrauter Pfeil
   subtle.hot	Ein Element ohne eigene Oberfläche (Pfeil, Spaltenüberschrift) unter dem Mauszeiger
   subtle.pressed	Ein solches Element gedrückt oder geöffnet
   highlight.hot	Ein Kalendertag oder Pfeil unter dem Mauszeiger, ein Ablageziel
   highlight.pressed	Ein Kalendertag oder Pfeil gedrückt
   field	Das Innere eines Textfelds oder einer Liste
   field.border	Der Rahmen eines Textfelds
   field.bottom	Die untere Linie eines Textfelds, während es bearbeitet werden kann
   field.disabled	Das Innere eines ausgegrauten Textfelds
   field.disabled.border	Der Rahmen eines ausgegrauten Textfelds
   field.readonly	Das Innere eines schreibgeschützten Textfelds
   field.readonly.border	Der Rahmen eines schreibgeschützten Textfelds
   combo.chevron	Der Chevron einer Dropdown-Liste
   combo.arrow.hot	Der Pfeilbereich einer bearbeitbaren Dropdown-Liste unter dem Mauszeiger
   combo.arrow.pressed	Der Pfeilbereich einer bearbeitbaren Dropdown-Liste gedrückt oder geöffnet
   button	Die Oberfläche einer Schaltfläche
   button.hot	Die Oberfläche einer Schaltfläche unter dem Mauszeiger
   button.pressed	Die Oberfläche einer Schaltfläche gedrückt
   button.border	Der Rahmen einer Schaltfläche
   button.bottom	Die untere Kante einer Schaltfläche
   button.text	Der Text einer Schaltfläche
   button.text.pressed	Der Text einer Schaltfläche gedrückt
   button.default.border	Der Rahmen der Standardschaltfläche
   button.default.bottom	Die untere Kante der Standardschaltfläche
   button.disabled	Die Oberfläche einer ausgegrauten Schaltfläche
   button.disabled.border	Der Rahmen einer ausgegrauten Schaltfläche
   button.accent	Die Oberfläche einer Akzent-Schaltfläche
   button.accent.hot	Fläche einer Akzent-Schaltfläche unter dem Zeiger
   button.accent.pressed	Fläche einer Akzent-Schaltfläche im gedrückten Zustand
   button.accent.bottom	Unterer Rand einer Akzent-Schaltfläche
   button.accent.text	Text einer Akzent-Schaltfläche
   button.accent.text.pressed	Text einer Akzent-Schaltfläche im gedrückten Zustand
   button.glow	Das Leuchten im Inneren einer Schaltfläche unter dem Zeiger, wenn der Stil es zeichnet (Luna; transparent: keine)
   gloss	Der Glanz, in den glänzende Teile oben übergehen: Schaltflächen, Felder, Leisten und Titelleisten (Luna, Aero, Aqua)
   check	Das Innere eines nicht markierten Kontrollkästchens oder Optionsfelds
   check.hot	Das Innere unter dem Zeiger
   check.pressed	Das Innere im gedrückten Zustand
   check.border	Der Rahmen eines nicht markierten Kontrollkästchens oder Optionsfelds
   check.border.hot	Der Rahmen unter dem Zeiger
   check.border.pressed	Der Rahmen im gedrückten Zustand
   check.border.disabled	Der Rahmen eines ausgegrauten, nicht markierten Kontrollkästchens
   check.on	Die Akzentfarbe eines markierten Kontrollkästchens oder Optionsfelds
   check.on.hot	Die markierte Akzentfarbe unter dem Zeiger
   check.on.pressed	Die markierte Akzentfarbe im gedrückten Zustand
   check.on.disabled	Die Füllung eines ausgegrauten, markierten Kontrollkästchens
   check.mark	Der Haken oder Punkt auf dem markierten Akzent
   progress.track	Die Spur einer Fortschrittsanzeige
   progress.bar	Die Füllung einer Fortschrittsanzeige
   meter.track	Die Spur eines Messbalkens (erledigter Teil eines Downloads)
   meter.edge	Der Rand eines Messbalkens
   meter.fill	Die Füllung eines Messbalkens
   list	Der Hintergrund der Download-Liste
   list.frame	Der Umriss einer Liste, Tabelle oder eines Feldes
   grid	Gitternetzlinien zwischen den Zeilen einer Liste in Dialogfeldern
   list.grid	Die Gitternetzlinien der Download-Liste
   header	Spaltenüberschriften jeder Liste und Tabelle
   header.line	Die untere Linie einer Kopfzeile in Listen von Dialogfeldern
   header.sep	Die Trennlinien zwischen Spaltenüberschriften
   table.line	Die Trennlinien in den Tabellen des Link-Grabbers und bei „Torrent hinzufügen“
   header.sorted	Die Überschrift der sortierten Spalte
   header.sort-arrow	Der Sortierpfeil
   row.pressed	Eine gedrückte Listenzeile
   chip.web	Der „Web“-Chip in der Download-Liste
   chip.torrent	Der „Torrent“-Chip in der Download-Liste
   chip.text	Text auf einem Chip
   list.drag-ghost	Eine Spaltenüberschrift, die gezogen wird
   list.marquee	Das Auswahlrechteck für Zeilen
   list.marquee.border	Der Rand des Auswahlrechtecks
   scroll.track	Die Spur einer Bildlaufleiste
   scroll.corner	Wo sich zwei Bildlaufleisten treffen
   scroll.thumb	Der Schieberegler und die Pfeile einer Bildlaufleiste
   scroll.thumb.hot	Der Schieberegler oder ein Pfeil unter dem Mauszeiger
   scroll.thumb.pressed	Der Schieberegler oder ein Pfeil, der gedrückt oder gezogen wird
   menubar	Die Menüleiste
   menubar.bottom	Die letzte Zeile der Menüleiste
   menubar.line	Die Linie unter der Menüleiste
   menubar.hot	Ein Menütitel unter dem Mauszeiger
   menubar.open	Der Titel des geöffneten Menüs
   menu	Der Hintergrund eines Menüs
   menu.item	Ein Menüpunkt
   menu.hot	Ein Menüpunkt unter dem Mauszeiger
   menu.border	Der Rahmen eines Menüs und eines Popups
   menu.sep	Die Trennlinien eines Menüs
   menu.text	Der Text eines Menüs
   menu.glyph	Aufzählungszeichen, Häkchen und Untermenü-Pfeile
   menu.text.disabled	Ein ausgegrauter Menüpunkt
   toolbar.line	Die obere Linie der Symbolleiste
   toolbar.line.light	Der Hervorhebung darunter
   toolbar.hot	Eine Schaltflächen in der Symbolleiste unter dem Mauszeiger
   toolbar.hot.faint	Der andere Teil einer geteilten Schaltfläche, während einer unter dem Mauszeiger ist
   toolbar.pressed	Eine gedrückte Schaltfläche in der Symbolleiste
   toolbar.hot.edge	Der Rand einer aktiven Schaltfläche in der Symbolleiste
   toolbar.hot.border	Der Rahmen einer aktiven Schaltfläche in der Symbolleiste (transparent: keiner)
   toolbar.split.shadow	Der Teiler einer geteilten Schaltfläche im Ruhezustand: sein Schatten
   toolbar.split.light	Die Hervorhebung des Teilers
   toolbar.text.disabled	Eine ausgegraute Beschriftung in der Symbolleiste
   toolbar.arrow	Der Pfeil einer Dropdown-Schaltfläche
   icon.disabled	Die Farbe eines ausgegrauten Symbols (Anfang)
   icon.disabled.end	Die Farbe eines ausgegrauten Symbols (Ende)
   tree	Der Hintergrund der Kategorienbaumansicht
   tree.lines	Die gepunkteten Verbindungslinien der Baumansicht
   tree.expander	Die Chevrons der Baumansicht, wo die Variante sie zeichnet
   tree.frame	Der Rahmen des Kategorienbereichs
   progress.status	Der Statuswert im Fortschrittsfenster
   progress.label.disabled	Eine ausgegraute Beschriftung im Fortschrittsfenster
   segments.border	Der Rahmen der Segmentleiste
   segments.corner	Die Eckpixel der Segmentleiste
   pieces.have	Ein Torrent-Teil, der hier ist
   pieces.partial	Ein Quadrat, das für teilweise vorhandene Teile steht
   pieces.missing	Ein noch nicht vorhandener Teil
   caption	Eine Titelleiste, die MDM selbst zeichnet
   caption.text	Ihr Titel und ihre Glyphen
   caption.text.inactive	Ihr Titel und ihre Glyphen, wenn das Fenster nicht aktiv ist, und die einer ausgegrauten Schaltfläche
   caption.hot	Eine Beschriftungsschaltfläche unter dem Mauszeiger (ein Farbton über der Leiste)
   caption.pressed	Eine gedrückte Beschriftungsschaltfläche (ein Farbton über der Leiste)
   caption.button	Eine Beschriftungsschaltfläche im Ruhezustand, wo der Stil eine anzeigt (ein Farbton über der Leiste; transparent: keiner)
   caption.close	Schließen unter dem Mauszeiger
   caption.close.text	Glyphe von „Schließen“ unter dem Zeiger
   caption.inactive	Von MDM gezeichnete Titelleiste, wenn das Fenster nicht aktiv ist (transparent: wie bei Aktivität)
   drop-target.edge	Kante des Ablageziels im Ruhezustand
   egui.panel	Hintergrund des egui-Panels
   egui.window	Hintergrund von Tooltips
   egui.window.border	Rahmen von Tooltips
   egui.text	Text von Tooltips
   egui.selection.text	Farbe des ausgewählten Textes in egui-Feldern
   egui.extreme	Dunkelster (oder hellster) egui-Hintergrund
   egui.faint	Blasser egui-Hintergrund
   egui.widget	egui-Widgets im Ruhezustand
   egui.widget.border	Ihr Rahmen (transparent: keiner)

   Alle Größen (26)

   Schlüssel	Was es einstellt
   radius	Eckenradius von Schaltflächen, Textfeldern und Dropdown-Menüs
   radius.button	Eckenradius einer glänzenden Schaltfläche (Luna, Aero; Aqua ist an den Enden abgerundet)
   radius.part	Eckenradius eines getönten Bereichs (Pfeilzone, Drehfeld)
   radius.check	Eckenradius eines Kontrollkästchens
   radius.flyout	Eckenradius eines Popups in einem Fenster (Kalender, Filterfeld)
   radius.menu-item	Eckenradius eines Menüelements unter dem Zeiger
   radius.egui	Eckenradius der egui-eigenen Widgets
   radius.popup	Eckenradius von Tooltips
   border	Breite des Rahmens eines Steuerelements
   focus-line	Höhe der Akzentlinie eines fokussierten Textfeldes
   chevron.width	Strichstärke des Chevrons eines Dropdown-Menüs
   font.dialog	Dialogtext (Tahoma in IDM-Dialogen)
   font.dialog.bold	Titel der Optionsseiten
   font.title	Fensterüberschrift (Tahoma Bold): der Browsererweiterung, der Helfer
   font.code	Ein Anmeldecode, der auf der Seite eines Dienstes eingegeben werden muss
   font.ui	Menüs und Text des Hauptfensters (Segoe UI)
   font.ui.bold	Fette Überschriften im Hauptfenster
   font.small	eguis kleiner Text
   font.body	eguis Fließtext: Tooltips, mehrzeilige Felder
   font.heading	eguis Überschriften
   list.row	Höhe einer Zeile in der Download-Liste
   list.header	Höhe der Spaltenüberschriften der Download-Liste
   tooltip.width	Wo der Text eines Tooltips umbricht
   tooltip.margin-x	Linker und rechter Abstand eines Tooltips
   tooltip.margin-top	Oberer Abstand eines Tooltips
   tooltip.margin-bottom	Unterer Abstand eines Tooltips

   Jeder Steuerelement-Stil (7)

   Schlüssel	Stile
   field-focus	Linie, Rahmen, Ring
   check	Fluent, Quadrat, Adwaita, Breeze, Luna, Aero, Aqua
   button	Fluent, Breeze, Luna, Aero, Aqua
   progress	Linie, Balken, Blöcke, Glanz
   scroll	Overlay, Klassisch
   caption	System, Metro, Adwaita, Breeze, Luna, Aero, Aqua
   focus	Gepunktet, Ring, Rahmen

   Oder lassen Sie es von einem KI-Assistenten schreiben

   Kopieren Sie diese Anweisung in Ihren KI-Assistenten und beschreiben Sie am Ende das gewünschte Aussehen. Sie gibt dem Assistenten das Format, die Schlüssel und die Regeln vor: lesbarer Text und ein sichtbarer Fokus auf beiden Seiten, und nichts, was von der Arbeit anderer kopiert wurde. Prüfen Sie beide Seiten selbst, bevor Sie das Ergebnis teilen.

   You are making a theme file for Mister Download Manager (MDM), a free, open-source download manager. Write one TOML file, named after the theme in lower case with dashes (for example harbour.toml). Reply with the file only, in one code block, then one line on how to install it.
   
   THE FORMAT
   A theme names only what it changes; everything else comes from the theme it inherits.
   - name = "Display name"
   - inherits = "classic" (the default), "high-contrast", "metro", "adwaita", "breeze", "luna", "aero" or "aqua"
   - icons = "color" | "mono" | "accent"
   - contrast = "high" (optional: strengthens every edge and text colour)
   - [seeds] a few colours MDM spreads over every control: background, surface, header, text, accent, selection, error, warning, success. Use [seeds.light] and [seeds.dark] to give each side its own.
   - [colors] single colour roles for both sides; [light] and [dark] for one side only. Role names are dotted and must be quoted when they contain a dot, e.g. "button.hot" = "#e5f1fb". Useful roles: window, text, text.muted, link, accent, focus.ring, selection, selection.text, field, field.border, button, button.hot, button.pressed, button.border, button.text, check.on, check.mark, progress.bar, list, header, menubar, menu, menu.hot, menu.text, toolbar.hot, tree, caption, caption.text, scroll.thumb, gloss (the shine glossy parts blend toward), button.glow. "segments.done" takes one colour or a list of 13 (top to bottom).
   - [sizes] in pixels, 0 to 400: radius, radius.button, radius.check, radius.menu-item, radius.popup, border, focus-line, list.row, list.header, font.ui, font.dialog.
   - [controls] shapes: field-focus = line | border | ring; check = fluent | square | adwaita | breeze | luna | aero | aqua; button = fluent | breeze | luna | aero | aqua; progress = line | bar | blocks | gloss; scroll = overlay | classic; focus = dotted | ring | frame; caption = system | metro | adwaita | breeze | luna | aero | aqua.
   - Colours are "#rrggbb" or "#rrggbbaa". Unknown keys are skipped, so only use the names above.
   
   THE RULES
   1. Make both a light and a dark side: give [seeds.light] and [seeds.dark] (or [light] and [dark]) their own colours, and check each side on its own.
   2. Text must be easy to read: at least 4.5:1 contrast for text against its background (text on window and field, button.text on button, menu.text on menu, selection.text on selection, caption.text on caption), in both sides.
   3. The keyboard focus must be easy to see: accent and focus.ring at least 3:1 against what they sit on.
   4. Disabled text stays readable but clearly dimmer than normal text.
   5. Clean room: no artwork, icons, logos, fonts or text copied from any other program or company. If the theme needs icons, describe original ones to draw, never copy existing ones, and note their source and licence in a SOURCES.txt.
   6. Keep the layout: a theme changes colours, sizes and control shapes only.
   
   After the file, list each text and background pair you checked with its contrast ratio, for both sides.
   
   THE LOOK I WANT:

2. Ausprobieren, ohne MDM zu erstellen

   Legen Sie die Datei in MDMs Themenordner ab. Ansicht → Design → Themenordner öffnen öffnet ihn und erstellt ihn beim ersten Mal. Er befindet sich im MDM-Datenordner:

   Windows

   %APPDATA%\misterdownloadmanager\themes

   Linux

   ~/.local/share/misterdownloadmanager/themes

   macOS

   ~/Library/Application Support/misterdownloadmanager/themes

   Portable Kopie

   data\themesneben dem Programm

   Innerhalb von zwei Sekunden wird es in Ansicht → Design unter den integrierten Designs angezeigt, mit dem name, das es sich selbst gibt. Wählen Sie es aus, und das gesamte Fenster ändert sich sofort. Nachdem Sie die Datei bearbeitet haben, wählen Sie sie erneut in Ansicht → Design aus, um die Änderung zu sehen. Ansicht → Dark Mode-Unterstützung und Immer dunkel wechseln zwischen der hellen und dunklen Seite.

   Ansicht → Design → Designdatei hinzufügen… erledigt das für Sie: Wählen Sie die Datei aus, und MDM kopiert sie in den Designordner und wendet sie sofort an.

   Haben Sie bereits ein Base16- oder pywal-Schema?

   Es ist bereits ein Design. Ein Base16- oder Base24-Schema (.yaml) oder pywals colors.json, auf die gleiche Weise hinzugefügt, ändert nur die Farben von MDM: die Schema-Hintergründe hinter der Liste und den Fenstern, der Text bleibt lesbar (4,5:1 oder mehr), das Blau für den Fokus, die Auswahl und den Fortschrittsbalken. Sobald wal ausgeführt wurde, listet Ansicht → Design pywal auf, gelesen aus ~/.cache/wal/colors.json (%USERPROFILE%\.cache\wal\colors.jsonunter Windows), und MDM folgt den Farben jedes neuen Hintergrundbilds innerhalb von zwei Sekunden. Die Anleitung zeigt, welche Farbe wohin gehört.

3. Teilen

   Haben Sie etwas erstellt, das anderen gefallen könnte? Erstellen Sie einen Pull Request auf GitHub, der es zu crates/app/assets/themes hinzufügt, mit:

   • der .toml-Datei und dem zugehörigen Icon-Ordner, falls vorhanden;
   • Screenshots des Hauptfensters in seiner hellen und dunklen Ansicht;
   • ein SOURCES.txt neben allen Icons, mit Angabe des Zeichners und der Lizenz. Icons müssen selbst erstellt sein oder unter einer Lizenz stehen, die MDM die Weitergabe erlaubt (GPL-3.0), niemals von einem anderen Programm kopiert.

   Noch unsicher? Zeigen Sie es zuerst in den Diskussionen. Der Beitrag-Leitfaden erklärt, wie Pull-Requests hier funktionieren.