La même fenêtre, à votre façon

Créer votre propre thème

Un thème est un petit fichier texte, en TOML (ou JSON). Il ne nomme que ce qu’il modifie ; tout le reste provient du thème sur lequel il est basé. Vous n’avez pas besoin de compiler MDM ni de savoir programmer.

1. Le créer

   Commencez avec quelques couleurs, puis ajoutez-en d’autres au fur et à mesure :

   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"

   • inheritsest le thème de départ du vôtre : classic (par défaut), high-contrast, metro, adwaita, breeze, luna, aero, aqua, ou un autre fichier de thème dans le même dossier.
   • [seeds]sont une poignée de couleurs (background, surface, header, text, accent, selection, error, warning, success) que MDM applique à chaque contrôle. [seeds.light] et [seeds.dark] donnent à chaque mode le sien.
   • [colors]définit des rôles de couleur unique des deux côtés, [light] et [dark] d’un seul côté : #rrggbb, ou #rrggbbaa avec transparence.
   • [sizes]sont les rayons des coins, les largeurs des bordures, les tailles de police et les hauteurs de ligne, en pixels. [controls] choisit la forme des zones de texte, des cases à cocher, des boutons, des barres de progression, des barres de défilement, du marqueur de focus et de la barre de titre.
   • iconsest color, mono ou accent. Un thème dans son propre dossier (my-theme/theme.toml) peut apporter ses icônes dans icons/16 et icons/24, chacune nommée pour ce qu'elle représente (tb-add-url.svg, cat-music.png) ; les icônes -symbolic prennent la couleur du texte du thème.
   • contrast = "high"renforce chaque bordure et la couleur du texte par-dessus.

   Une clé que MDM ne connaît pas, ou une valeur qu'il ne peut pas lire, est ignorée et écrite dans le journal de MDM (le dossier logs à côté du dossier des thèmes), de sorte qu'un fichier créé pour un MDM plus récent se charge toujours. Les thèmes intégrés sont écrits de la même manière : lisez-les sur GitHub.

   Chaque rôle de couleur (156)

   Clé	Ce qu'elle colore
   window	Windows' and dialogs' background
   text	Texte et glyphes
   text.disabled	Texte désactivé, le gris unique de chaque contrôle et libellé grisé
   text.muted	Texte secondaire : notes, tailles, versions
   link	Texte qui ouvre quelque chose
   error	Texte d'erreur
   error.strong	Message d'un échec de vérification dans les Options (tests de connexion, de navigateur et d'aide)
   warning	Texte d'avertissement
   success	Texte de succès (une somme de contrôle correspondante)
   reach.near	Le serveur d'un téléchargement proche par son temps d'aller-retour (moins de 60 ms), dans les Propriétés
   reach.medium	Un serveur avec un temps d'aller-retour moyen (60 à 150 ms)
   reach.far	Un serveur éloigné par son temps d'aller-retour (plus de 150 ms)
   flag.edge	Le mince bord autour du drapeau d'un pays
   accent	L'accent : lignes de focus, contrôles ouverts et par défaut, filtres, focus des liens
   focus.ring	Le rectangle de focus clavier en pointillés
   selection	Le remplissage d'une sélection : lignes, un jour choisi, texte sélectionné
   selection.text	Texte sur la sélection
   selection.muted	Texte secondaire sur la sélection
   selection.inactive	Une ligne sélectionnée dans une liste sans le focus
   selection.focus	Le contour en pointillés de la ligne focalisée sur une ligne sélectionnée
   group.line	Le cadre d'un groupe de contrôles
   etch.shadow	La ligne d'ombre d'un séparateur gravé
   etch.light	La ligne de surbrillance d'un séparateur gravé
   tab.page	Le corps d'une page à onglets
   tab	Un onglet non sélectionné et l'ombre de la page
   tab.hot	Un onglet sous le pointeur
   chevron	Une flèche de liste déroulante ou de zone de saisie numérique
   chevron.disabled	Une flèche grisée
   subtle.hot	Une partie sans apparence propre (une flèche, un en-tête de colonne) sous le pointeur
   subtle.pressed	Une telle partie pressée ou ouverte
   highlight.hot	Un jour ou une flèche de calendrier sous le pointeur, une cible de dépôt
   highlight.pressed	Un jour ou une flèche de calendrier pressé
   field	L'intérieur d'une zone de texte ou d'une liste
   field.border	La bordure d'une zone de texte
   field.bottom	La ligne inférieure d'une zone de texte lorsqu'elle est modifiable
   field.disabled	L'intérieur d'une zone de texte grisée
   field.disabled.border	La bordure d'une zone de texte grisée
   field.readonly	L'intérieur d'une zone de texte en lecture seule
   field.readonly.border	La bordure d'une zone de texte en lecture seule
   combo.chevron	Le chevron d'une liste déroulante
   combo.arrow.hot	La zone de flèche d'une liste déroulante modifiable sous le pointeur
   combo.arrow.pressed	La zone de flèche d'une liste déroulante modifiable pressée ou ouverte
   button	La face d'un bouton
   button.hot	La face d'un bouton sous le pointeur
   button.pressed	La face d'un bouton pressée
   button.border	La bordure d'un bouton
   button.bottom	Le bord inférieur d'un bouton
   button.text	Le texte d'un bouton
   button.text.pressed	Le texte d'un bouton pressé
   button.default.border	La bordure du bouton par défaut
   button.default.bottom	Le bord inférieur du bouton par défaut
   button.disabled	La face d'un bouton grisé
   button.disabled.border	La bordure d'un bouton grisé
   button.accent	La face d'un bouton d'accentuation
   button.accent.hot	Face d'un bouton d'accentuation sous le pointeur
   button.accent.pressed	Face d'un bouton d'accentuation pressé
   button.accent.bottom	Bord inférieur d'un bouton d'accentuation
   button.accent.text	Texte d'un bouton d'accentuation
   button.accent.text.pressed	Texte d'un bouton d'accentuation pressé
   button.glow	Lueur interne d'un bouton sous le pointeur, si le style en dessine une (Luna ; transparent : aucune)
   gloss	Brillance vers laquelle les parties brillantes se fondent en haut : boutons, cadres, barres et barres de titre (Luna, Aero, Aqua)
   check	Intérieur d'une case à cocher ou d'un bouton radio non coché
   check.hot	Intérieur sous le pointeur
   check.pressed	Intérieur pressé
   check.border	Bordure d'une case à cocher ou d'un bouton radio non coché
   check.border.hot	Bordure sous le pointeur
   check.border.pressed	Bordure pressée
   check.border.disabled	Bordure d'une case à cocher grisée non cochée
   check.on	Accent d'une case à cocher ou d'un bouton radio coché
   check.on.hot	Accent coché sous le pointeur
   check.on.pressed	Accent coché pressé
   check.on.disabled	Remplissage d'une case à cocher grisée cochée
   check.mark	Coche ou point sur l'accent coché
   progress.track	Piste d'une barre de progression
   progress.bar	Remplissage d'une barre de progression
   meter.track	Piste d'un indicateur (partie d'un téléchargement terminée)
   meter.edge	Bord d'un indicateur
   meter.fill	Remplissage d'un indicateur
   list	Arrière-plan de la liste de téléchargements
   list.frame	Contour d'une liste, d'un tableau ou d'un cadre
   grid	Lignes de grille entre les lignes d'une liste dans les boîtes de dialogue
   list.grid	Lignes de grille de la liste de téléchargements
   header	En-têtes de colonne de chaque liste et tableau
   header.line	Ligne inférieure d'un en-tête dans les listes des boîtes de dialogue
   header.sep	Les séparateurs entre les en-têtes de colonne
   table.line	Les séparateurs dans les tableaux du récupérateur de liens et d'« Ajouter un torrent »
   header.sorted	L'en-tête de la colonne triée
   header.sort-arrow	Le chevron de tri
   row.pressed	Une ligne de liste sélectionnée
   chip.web	La puce « Web » de la liste de téléchargements
   chip.torrent	La puce « Torrent » de la liste de téléchargements
   chip.text	Le texte sur une puce
   list.drag-ghost	Un en-tête de colonne en cours de déplacement
   list.marquee	L'élastique qui sélectionne les lignes
   list.marquee.border	Le bord de l'élastique
   scroll.track	La piste d'une barre de défilement
   scroll.corner	Là où deux barres de défilement se rencontrent
   scroll.thumb	Le curseur et les flèches d'une barre de défilement
   scroll.thumb.hot	Le curseur ou une flèche sous le pointeur
   scroll.thumb.pressed	Le curseur ou une flèche pressée ou déplacée
   menubar	La barre de menus
   menubar.bottom	La dernière ligne de la barre de menus
   menubar.line	La ligne sous la barre de menus
   menubar.hot	Un titre de menu sous le pointeur
   menubar.open	Le titre du menu ouvert
   menu	L'arrière-plan d'un menu
   menu.item	Un élément de menu
   menu.hot	Un élément de menu sous le pointeur
   menu.border	Le cadre d'un menu et d'une fenêtre contextuelle
   menu.sep	Les séparateurs d'un menu
   menu.text	Le texte d'un menu
   menu.glyph	Les puces, les coches et les flèches de sous-menu
   menu.text.disabled	Un élément de menu grisé
   toolbar.line	La ligne supérieure de la barre d'outils
   toolbar.line.light	Le surlignage en dessous
   toolbar.hot	Un bouton de barre d'outils sous le pointeur
   toolbar.hot.faint	L'autre partie d'un bouton partagé quand l'une est sous le pointeur
   toolbar.pressed	Un bouton de barre d'outils pressé
   toolbar.hot.edge	Le bord d'un bouton de barre d'outils actif
   toolbar.hot.border	La bordure d'un bouton de barre d'outils actif (transparent : aucune)
   toolbar.split.shadow	L'ombre du séparateur d'un bouton partagé au repos
   toolbar.split.light	Le surlignage du séparateur
   toolbar.text.disabled	Une étiquette de barre d'outils grisée
   toolbar.arrow	La flèche d'un bouton déroulant
   icon.disabled	L'encre d'une icône grisée (son début)
   icon.disabled.end	L'encre d'une icône grisée (sa fin)
   tree	L'arrière-plan de l'arborescence des catégories
   tree.lines	Les connecteurs en pointillés de l'arborescence
   tree.expander	Les chevrons de l'arborescence, là où la variante les dessine
   tree.frame	Le cadre du volet des catégories
   progress.status	La valeur de l'état dans la fenêtre de progression
   progress.label.disabled	Une étiquette grisée dans la fenêtre de progression
   segments.border	Le cadre de la barre de segments
   segments.corner	Les pixels de coin de la barre de segments
   pieces.have	Un morceau de torrent qui est ici
   pieces.partial	Un carré représentant des morceaux partiellement ici
   pieces.missing	Un morceau pas encore ici
   caption	Une barre de titre dessinée par MDM
   caption.text	Son titre et ses glyphes
   caption.text.inactive	Son titre et ses glyphes lorsque la fenêtre n'est pas active, et ceux d'un bouton grisé
   caption.hot	Un bouton de légende sous le pointeur (une teinte sur la barre)
   caption.pressed	Un bouton de légende pressé (une teinte sur la barre)
   caption.button	Un bouton de légende au repos, là où le style en affiche un (une teinte sur la barre ; transparent : aucun)
   caption.close	Fermer sous le pointeur
   caption.close.text	Glyphe du bouton Fermer sous le pointeur
   caption.inactive	Barre de titre dessinée par MDM, lorsque sa fenêtre n'est pas active (transparente : comme lorsqu'elle est active)
   drop-target.edge	Bord de la zone de dépôt au repos
   egui.panel	Arrière-plan du panneau d'egui
   egui.window	Arrière-plan des info-bulles
   egui.window.border	Bordure des info-bulles
   egui.text	Texte des info-bulles
   egui.selection.text	Encre du texte sélectionné dans les zones d'egui
   egui.extreme	Arrière-plan le plus foncé (ou le plus clair) d'egui
   egui.faint	Arrière-plan pâle d'egui
   egui.widget	Widgets d'egui au repos
   egui.widget.border	Leur bordure (transparente : aucune)

   Toutes les tailles (26)

   Clé	Ce qu'elle définit
   radius	Rayon des coins des boutons, des zones de texte et des listes déroulantes
   radius.button	Rayon des coins d'un bouton poussoir brillant (Luna, Aero ; ceux d'Aqua sont ronds aux extrémités)
   radius.part	Rayon des coins d'une partie teintée (zone de flèche, bouton de sélection)
   radius.check	Rayon des coins d'une case à cocher
   radius.flyout	Rayon des coins d'une fenêtre contextuelle (calendrier, zone de filtre)
   radius.menu-item	Rayon des coins d'un élément de menu sous le pointeur
   radius.egui	Rayon des coins des propres widgets d'egui
   radius.popup	Rayon des coins des info-bulles
   border	Largeur de la bordure d'un contrôle
   focus-line	Hauteur de la ligne d'accentuation d'une zone de texte sélectionnée
   chevron.width	Épaisseur du trait du chevron d'une liste déroulante
   font.dialog	Texte des boîtes de dialogue (Tahoma dans les boîtes de dialogue d'IDM)
   font.dialog.bold	Titres des pages d'options
   font.title	Titre d'une fenêtre (Tahoma Gras) : celui de l'extension de navigateur, des assistants
   font.code	Code de connexion à saisir sur la page d'un service
   font.ui	Menus et texte de la fenêtre principale (Segoe UI)
   font.ui.bold	Titres en gras dans la fenêtre principale
   font.small	Petit texte d'egui
   font.body	Corps de texte d'egui : info-bulles, zones multilignes
   font.heading	Titres d'egui
   list.row	Hauteur d'une ligne dans la liste des téléchargements
   list.header	Hauteur des en-têtes de colonne de la liste des téléchargements
   tooltip.width	Où le texte d'une info-bulle s'enroule
   tooltip.margin-x	Marge intérieure gauche et droite d'une info-bulle
   tooltip.margin-top	Marge intérieure supérieure d'une info-bulle
   tooltip.margin-bottom	Marge intérieure inférieure d'une info-bulle

   Chaque style de contrôle (7)

   Clé	Ses styles
   field-focus	ligne, bordure, anneau
   check	fluent, carré, adwaita, breeze, luna, aero, aqua
   button	Fluent, Breeze, Luna, Aero, Aqua
   progress	ligne, barre, blocs, brillant
   scroll	superposition, classique
   caption	système, metro, adwaita, breeze, luna, aero, aqua
   focus	pointillé, anneau, cadre

   Ou laissez un assistant IA l'écrire

   Copiez cette invite dans votre assistant IA et décrivez l'apparence que vous souhaitez à la fin. Elle donne à l'assistant le format, les clés et les règles : un texte lisible et une mise au point visible des deux côtés, et rien copié d'une autre œuvre. Regardez les deux côtés vous-même avant de partager le résultat.

   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. Essayez-le, sans compiler MDM

   Placez le fichier dans le dossier des thèmes de MDM. Affichage → Thème → Ouvrir le dossier des thèmes l'ouvre et le crée la première fois. Il se trouve dans le dossier de données de MDM :

   Windows

   %APPDATA%\misterdownloadmanager\themes

   Linux

   ~/.local/share/misterdownloadmanager/themes

   macOS

   ~/Library/Application Support/misterdownloadmanager/themes

   Copie portable

   data\themesà côté du programme

   En moins de deux secondes, il apparaît dans Affichage → Thème, sous les thèmes intégrés, par le name qu'il se donne. Choisissez-le et toute la fenêtre change immédiatement. Après avoir modifié le fichier, choisissez-le à nouveau dans Affichage → Thème pour voir le changement. Affichage → Prise en charge du mode sombre et Toujours sombre basculent entre son côté clair et son côté sombre.

   Pour cela, utilisez Affichage → Thème → Ajouter un fichier de thème… : sélectionnez le fichier où qu’il soit, et MDM le copie dans le dossier des thèmes et l’applique aussitôt.

   Vous avez déjà un thème Base16 ou pywal ?

   C’est déjà un thème. Un thème Base16 ou Base24 (.yaml) ou colors.json de pywal, ajouté de la même manière, modifie les couleurs de MDM et rien d’autre : les arrière-plans du thème derrière la liste et les fenêtres, son texte reste lisible (4,5:1 ou plus), son bleu sur le focus, la sélection et la barre de progression. Une fois que wal a été exécuté, Affichage → Thème liste pywal, lu depuis ~/.cache/wal/colors.json (%USERPROFILE%\.cache\wal\colors.jsonsous Windows), et MDM suit les couleurs de chaque nouveau fond d’écran en moins de deux secondes. Le guide indique quelle couleur va où.

3. Partagez-le

   Vous avez créé quelque chose qui plairait à d'autres ? Ouvrez une pull request sur GitHub qui l'ajoute à crates/app/assets/themes, avec :

   • le fichier .toml, et son dossier d'icônes s'il en a un ;
   • des captures d'écran de la fenêtre principale dans son côté clair et son côté sombre ;
   • une SOURCES.txt à côté de chaque icône, indiquant son auteur et sa licence. Les icônes doivent être les vôtres ou sous une licence permettant à MDM de les partager (GPL-3.0), jamais copiées d'un autre programme.

   Vous n'êtes pas encore sûr ? Présentez-le d'abord dans les discussions. Le guide de contribution explique comment fonctionnent les pull requests ici.