La stessa finestra, a modo tuo

Crea il tuo tema

Un tema è un piccolo file di testo, in TOML (o JSON). Nomina solo ciò che cambia; tutto il resto proviene dal tema su cui si basa. Non è necessario compilare MDM o sapere come programmare.

1. Crealo

   Inizia con alcuni colori, poi aggiungine altri man mano:

   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"

   • inheritsè il tema da cui parte il tuo: classic (il predefinito), high-contrast, metro, adwaita, breeze, luna, aero, aqua, o un altro file di tema nella stessa cartella.
   • [seeds]sono una manciata di colori (background, surface, header, text, accent, selection, error, warning, success) che MDM distribuisce su ogni controllo. [seeds.light] e [seeds.dark] danno a ogni lato il suo.
   • [colors]imposta ruoli di colore singolo su entrambi i lati, [light] e [dark] solo su un lato: #rrggbb, o #rrggbbaa con trasparenza.
   • [sizes]sono raggi degli angoli, larghezze dei bordi, dimensioni dei caratteri e altezze delle righe, in pixel. [controls] sceglie la forma di caselle di testo, caselle di controllo, pulsanti, barre di avanzamento, barre di scorrimento, il segno di messa a fuoco e la barra del titolo.
   • iconsè color, mono o accent. Un tema in una propria cartella (my-theme/theme.toml) può portare le sue icone in icons/16 e icons/24, ciascuna nominata per ciò che mostra (tb-add-url.svg, cat-music.png); quelle -symbolic prendono il colore del testo del tema.
   • contrast = "high"rafforza ogni bordo e il colore del testo in primo piano.

   Una chiave che MDM non conosce, o un valore che non può leggere, viene saltato e scritto nel registro di MDM (la cartella logs accanto alla cartella dei temi), in modo che un file creato per un MDM più recente si carichi comunque. I temi integrati sono scritti allo stesso modo: leggili su GitHub.

   Ogni ruolo di colore (156)

   Chiave	Cosa colora
   window	Sfondo di Windows e delle finestre
   text	Testo e glifi
   text.disabled	Testo disabilitato, l'unico grigio di ogni controllo ed etichetta disabilitati
   text.muted	Testo secondario: note, dimensioni, versioni
   link	Testo che apre qualcosa
   error	Testo di errore
   error.strong	Messaggio di un controllo fallito in Opzioni (test di connessione, browser e helper)
   warning	Testo di avviso
   success	Testo di successo (un checksum corrispondente)
   reach.near	Il server di un download vicino per il suo round trip (meno di 60 ms), in Proprietà
   reach.medium	Un server con un round trip medio (da 60 a 150 ms)
   reach.far	Un server lontano per il suo round trip (oltre 150 ms)
   flag.edge	Il bordo sottile intorno alla bandiera di un paese
   accent	L'accento: linee di messa a fuoco, controlli aperti e predefiniti, filtri, messa a fuoco dei collegamenti
   focus.ring	Il rettangolo di messa a fuoco della tastiera punteggiato
   selection	Il riempimento di una selezione: righe, un giorno scelto, testo selezionato
   selection.text	Testo sulla selezione
   selection.muted	Testo secondario sulla selezione
   selection.inactive	Una riga selezionata in un elenco senza il focus
   selection.focus	Il contorno punteggiato della riga focalizzata su una riga selezionata
   group.line	La cornice di un gruppo
   etch.shadow	La linea d'ombra di un separatore inciso
   etch.light	La linea di evidenziazione di un separatore inciso
   tab.page	Il corpo di una pagina a schede
   tab	Una scheda non selezionata e l'ombra della pagina
   tab.hot	Una scheda sotto il puntatore
   chevron	La freccia di un menu a discesa o di una casella di selezione
   chevron.disabled	Una freccia disattivata
   subtle.hot	Una parte senza una propria faccia (una freccia, un'intestazione di colonna) sotto il puntatore
   subtle.pressed	Una parte così, premuta o aperta
   highlight.hot	Il giorno o la freccia di un calendario sotto il puntatore, un'area di rilascio
   highlight.pressed	Il giorno o la freccia di un calendario premuta
   field	L'interno di una casella di testo o di un elenco
   field.border	Il bordo di una casella di testo
   field.bottom	La riga inferiore di una casella di testo mentre è possibile digitare
   field.disabled	L'interno di una casella di testo disattivata
   field.disabled.border	Il bordo di una casella di testo disattivata
   field.readonly	L'interno di una casella di testo di sola lettura
   field.readonly.border	Il bordo di una casella di testo di sola lettura
   combo.chevron	Il simbolo di un menu a discesa
   combo.arrow.hot	La zona della freccia di un menu a discesa modificabile sotto il puntatore
   combo.arrow.pressed	La zona della freccia di un menu a discesa modificabile premuta o aperta
   button	La faccia di un pulsante
   button.hot	La faccia di un pulsante sotto il puntatore
   button.pressed	La faccia di un pulsante premuta
   button.border	Il bordo di un pulsante
   button.bottom	Il bordo inferiore di un pulsante
   button.text	Il testo di un pulsante
   button.text.pressed	Il testo di un pulsante premuto
   button.default.border	Il bordo del pulsante predefinito
   button.default.bottom	Il bordo inferiore del pulsante predefinito
   button.disabled	La faccia di un pulsante disattivato
   button.disabled.border	Il bordo di un pulsante disattivato
   button.accent	La faccia di un pulsante in evidenza
   button.accent.hot	La faccia di un pulsante accentato sotto il puntatore
   button.accent.pressed	La faccia di un pulsante accentato premuto
   button.accent.bottom	Il bordo inferiore di un pulsante accentato
   button.accent.text	Il testo di un pulsante accentato
   button.accent.text.pressed	Il testo di un pulsante accentato premuto
   button.glow	Il bagliore all'interno di un pulsante sotto il puntatore, se lo stile lo prevede (Luna; trasparente: nessuno)
   gloss	La lucentezza verso cui sfumano le parti lucide in alto: pulsanti, caselle, barre e barre del titolo (Luna, Aero, Aqua)
   check	L'interno di una casella o di un pulsante di opzione non selezionato
   check.hot	Il suo interno sotto il puntatore
   check.pressed	Il suo interno premuto
   check.border	Il bordo di una casella o di un pulsante di opzione non selezionato
   check.border.hot	Il suo bordo sotto il puntatore
   check.border.pressed	Il suo bordo premuto
   check.border.disabled	Il bordo di una casella non selezionata e disattivata
   check.on	L'accento di una casella o di un pulsante di opzione selezionato
   check.on.hot	L'accento selezionato sotto il puntatore
   check.on.pressed	L'accento selezionato premuto
   check.on.disabled	Il riempimento di una casella selezionata e disattivata
   check.mark	Il segno di spunta o il punto sull'accento selezionato
   progress.track	La traccia di una barra di avanzamento
   progress.bar	Il riempimento di una barra di avanzamento
   meter.track	La traccia di un indicatore (la parte completata di un download)
   meter.edge	Il bordo di un indicatore
   meter.fill	Il riempimento di un indicatore
   list	Lo sfondo dell'elenco dei download
   list.frame	Il contorno di un elenco, di una tabella o di una casella
   grid	Le linee della griglia tra le righe di un elenco nelle finestre
   list.grid	Le linee della griglia dell'elenco dei download
   header	Le intestazioni di colonna di ogni elenco e tabella
   header.line	La linea inferiore di un'intestazione negli elenchi delle finestre
   header.sep	I divisori tra le intestazioni di colonna
   table.line	I divisori nelle tabelle del Link grabber e di Aggiungi torrent
   header.sorted	L'intestazione della colonna ordinata
   header.sort-arrow	Il simbolo di ordinamento
   row.pressed	Una riga dell'elenco premuta
   chip.web	Il chip Web dell'elenco dei download
   chip.torrent	Il chip Torrent dell'elenco dei download
   chip.text	Il testo su un chip
   list.drag-ghost	Un'intestazione di colonna trascinata
   list.marquee	La selezione a riquadro che seleziona le righe
   list.marquee.border	Il bordo della selezione a riquadro
   scroll.track	La traccia di una barra di scorrimento
   scroll.corner	Dove si incontrano due barre di scorrimento
   scroll.thumb	Il cursore e le frecce di una barra di scorrimento
   scroll.thumb.hot	Il cursore o una freccia sotto il puntatore
   scroll.thumb.pressed	Il cursore o una freccia premuta o trascinata
   menubar	La barra dei menu
   menubar.bottom	L'ultima riga della barra dei menu
   menubar.line	La linea sotto la barra dei menu
   menubar.hot	Il titolo di un menu sotto il puntatore
   menubar.open	Il titolo del menu aperto
   menu	Lo sfondo di un menu
   menu.item	Una voce di menu
   menu.hot	Una voce di menu sotto il puntatore
   menu.border	Il frame di un menu e di un popup
   menu.sep	I separatori di un menu
   menu.text	Il testo di un menu
   menu.glyph	Punti elenco, segni di spunta e frecce dei sottomenu
   menu.text.disabled	Una voce di menu disattivata
   toolbar.line	La linea superiore della barra degli strumenti
   toolbar.line.light	L'evidenziazione sotto di esso
   toolbar.hot	Un pulsante della barra degli strumenti sotto il puntatore
   toolbar.hot.faint	L'altra parte di un pulsante diviso mentre una è sotto il puntatore
   toolbar.pressed	Un pulsante della barra degli strumenti premuto
   toolbar.hot.edge	Il bordo di un pulsante attivo della barra degli strumenti
   toolbar.hot.border	Il bordo di un pulsante attivo della barra degli strumenti (trasparente: nessuno)
   toolbar.split.shadow	Il divisore di un pulsante diviso a riposo: la sua ombra
   toolbar.split.light	L'evidenziazione del divisore
   toolbar.text.disabled	Un'etichetta della barra degli strumenti in grigio
   toolbar.arrow	La freccia di un pulsante a discesa
   icon.disabled	L'inchiostro di un'icona in grigio (il suo inizio)
   icon.disabled.end	L'inchiostro di un'icona in grigio (la sua fine)
   tree	Lo sfondo dell'albero delle categorie
   tree.lines	I connettori punteggiati dell'albero
   tree.expander	I chevron dell'albero, dove la variante li disegna
   tree.frame	La cornice del pannello delle categorie
   progress.status	Il valore di Stato della finestra di avanzamento
   progress.label.disabled	Un'etichetta in grigio nella finestra di avanzamento
   segments.border	La cornice della barra dei segmenti
   segments.corner	I pixel d'angolo della barra dei segmenti
   pieces.have	Una parte del torrent che è qui
   pieces.partial	Un quadrato che rappresenta parti parzialmente qui
   pieces.missing	Una parte non ancora qui
   caption	Una barra del titolo disegnata da MDM stesso
   caption.text	Il suo titolo e i glifi
   caption.text.inactive	Il suo titolo e i glifi quando la finestra non è quella attiva, e quelli di un pulsante in grigio
   caption.hot	Un pulsante della didascalia sotto il puntatore (una tinta sopra la barra)
   caption.pressed	Un pulsante della didascalia premuto (una tinta sopra la barra)
   caption.button	Un pulsante della didascalia a riposo, dove lo stile ne mostra uno (una tinta sopra la barra; trasparente: nessuno)
   caption.close	Chiudi sotto il puntatore
   caption.close.text	Glifo del pulsante Chiudi sotto il puntatore
   caption.inactive	Barra del titolo disegnata da MDM, quando la sua finestra non è attiva (trasparente: come quando è attiva)
   drop-target.edge	Bordo dell'area di rilascio a riposo
   egui.panel	Sfondo del pannello di egui
   egui.window	Sfondo dei suggerimenti
   egui.window.border	Bordo dei suggerimenti
   egui.text	Testo dei suggerimenti
   egui.selection.text	Colore del testo selezionato nelle caselle di egui
   egui.extreme	Sfondo più scuro (o più chiaro) di egui
   egui.faint	Sfondo tenue di egui
   egui.widget	Widget di egui a riposo
   egui.widget.border	Il loro bordo (trasparente: nessuno)

   Tutte le dimensioni (26)

   Chiave	Cosa imposta
   radius	Raggio degli angoli di pulsanti, caselle di testo e menu a discesa
   radius.button	Raggio degli angoli di un pulsante lucido (Luna, Aero; quelli di Aqua sono arrotondati alle estremità)
   radius.part	Raggio degli angoli di una parte colorata (una zona freccia, un pulsante spin)
   radius.check	Raggio degli angoli di una casella di selezione
   radius.flyout	Raggio degli angoli di un popup in una finestra (un calendario, una casella filtro)
   radius.menu-item	Raggio degli angoli di una voce di menu sotto il puntatore
   radius.egui	Raggio degli angoli dei widget di egui
   radius.popup	Raggio degli angoli dei suggerimenti
   border	Larghezza del bordo di un controllo
   focus-line	Altezza della linea di accento di una casella di testo selezionata
   chevron.width	Spessore del tratto del chevron di un menu a discesa
   font.dialog	Testo della finestra (Tahoma nelle finestre di IDM)
   font.dialog.bold	Titoli delle pagine delle Opzioni
   font.title	Titolo di una finestra (Tahoma Grassetto): dell'estensione del browser, dei programmi di supporto
   font.code	Un codice di accesso da digitare sulla pagina di un servizio
   font.ui	Testo dei menu e della finestra principale (Segoe UI)
   font.ui.bold	Intestazioni in grassetto nella finestra principale
   font.small	Testo piccolo di egui
   font.body	Testo del corpo di egui: tooltip, caselle multilinea
   font.heading	Intestazioni di egui
   list.row	Altezza di una riga nell'elenco dei download
   list.header	Altezza delle intestazioni di colonna dell'elenco dei download
   tooltip.width	Dove il testo di un tooltip va a capo
   tooltip.margin-x	Spaziatura interna sinistra e destra di un tooltip
   tooltip.margin-top	Spaziatura interna superiore di un tooltip
   tooltip.margin-bottom	Spaziatura interna inferiore di un tooltip

   Stile di ogni controllo (7)

   Chiave	I suoi stili
   field-focus	linea, bordo, anello
   check	Fluent, Square, Adwaita, Breeze, Luna, Aero, Aqua
   button	Fluent, Breeze, Luna, Aero, Aqua
   progress	linea, barra, blocchi, gloss
   scroll	overlay, classic
   caption	sistema, metro, adwaita, breeze, luna, aero, aqua
   focus	punteggiato, anello, fotogramma

   Oppure lascia che lo scriva un assistente AI

   Copia questo prompt nel tuo assistente AI e descrivi l'aspetto che desideri alla fine. Fornisce all'assistente il formato, le chiavi e le regole: testo leggibile e un focus visibile su entrambi i lati, e nulla copiato da opere d'arte altrui. Guarda tu stesso entrambi i lati prima di condividere il risultato.

   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. Provalo, senza compilare MDM

   Metti il file nella cartella dei temi di MDM. Visualizza → Tema → Apri la cartella dei temi la apre, e la crea la prima volta. Si trova nella cartella dei dati di MDM:

   Windows

   %APPDATA%\misterdownloadmanager\themes

   Linux

   ~/.local/share/misterdownloadmanager/themes

   macOS

   ~/Library/Application Support/misterdownloadmanager/themes

   Copia portatile

   data\themesaccanto al programma

   Entro due secondi appare in Visualizza → Tema, sotto i temi predefiniti, con il name che si dà. Selezionalo e l'intera finestra cambia immediatamente. Dopo aver modificato il file, selezionalo di nuovo in Visualizza → Tema per vedere la modifica. Visualizza → Supporto modalità scura e Sempre scuro alternano tra il suo lato chiaro e quello scuro.

   Fai clic su Visualizza → Tema → Aggiungi un file tema…: scegli il file, e MDM lo copierà nella cartella dei temi e lo userà subito.

   Hai già uno schema Base16 o pywal?

   È già un tema. Uno schema Base16 o Base24 (.yaml) o colors.json di pywal, aggiunto allo stesso modo, cambia i colori di MDM e nient'altro: gli sfondi dello schema dietro l'elenco e le finestre, il suo testo resta leggibile (4.5:1 o più), il suo blu sull'elemento attivo, la selezione e la barra di avanzamento. Una volta che wal è stato eseguito, Visualizza → Tema elenca pywal, letto da ~/.cache/wal/colors.json (%USERPROFILE%\.cache\wal\colors.jsonsu Windows), e MDM seguirà i colori di ogni nuovo sfondo entro due secondi. La guida mostra quale colore va dove.

3. Condividilo

   Hai creato qualcosa che potrebbe piacere ad altri? Apri una pull request su GitHub che lo aggiunga a crates/app/assets/themes, con:

   • il file .toml e la sua cartella di icone, se ne ha una;
   • screenshot della finestra principale nel suo lato chiaro e nel suo lato scuro;
   • una SOURCES.txt accanto a ogni icona, che indichi chi l'ha disegnata e con quale licenza. Le icone devono essere tue o sotto una licenza che permetta a MDM di condividerle (GPL-3.0), mai copiate da un altro programma.

   Non sei ancora sicuro? Mostralo prima nelle discussioni. La guida per i contributori spiega come funzionano le pull request qui.