La misma ventana, a tu manera

Crear tu propio tema

Un tema es un pequeño archivo de texto, en TOML (o JSON). Solo nombra lo que cambia; todo lo demás proviene del tema en el que se basa. No necesitas compilar MDM ni saber programar.

1. Crearlo

   Empieza con unos pocos colores y luego añade más a medida que avanzas:

   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"

   • inheritses el tema del que parte el tuyo: classic (el predeterminado), high-contrast, metro, adwaita, breeze, luna, aero, aqua, u otro archivo de tema en la misma carpeta.
   • [seeds]son un puñado de colores (background, surface, header, text, accent, selection, error, warning, success) que MDM extiende sobre cada control. [seeds.light] y [seeds.dark] dan a cada lado el suyo propio.
   • [colors]establece roles de un solo color en ambos lados, [light] y [dark] en un solo lado: #rrggbb, o #rrggbbaa con transparencia.
   • [sizes]son radios de esquina, anchos de borde, tamaños de fuente y alturas de fila, en píxeles. [controls] elige la forma de los cuadros de texto, casillas de verificación, botones, barras de progreso, barras de desplazamiento, la marca de enfoque y la barra de título.
   • iconses color, mono o accent. Un tema en su propia carpeta (my-theme/theme.toml) puede traer sus iconos en icons/16 y icons/24, cada uno nombrado por lo que muestra (tb-add-url.svg, cat-music.png); los -symbolic toman el color de texto del tema.
   • contrast = "high"refuerza cada borde y el color del texto superior.

   Una clave que MDM no conoce, o un valor que no puede leer, se omite y se escribe en el registro de MDM (la carpeta logs junto a la carpeta de temas), de modo que un archivo hecho para un MDM más reciente aún se carga. Los temas integrados se escriben de la misma manera: léelos en GitHub.

   Cada función de color (156)

   Clave	Qué colorea
   window	Fondo de Windows y de los diálogos
   text	Texto y glifos
   text.disabled	Texto deshabilitado, el único gris de cada control y etiqueta atenuados
   text.muted	Texto secundario: notas, tamaños, versiones
   link	Texto que abre algo
   error	Texto de error
   error.strong	Mensaje de un error de comprobación en Opciones (pruebas de conexión, navegador y ayudante)
   warning	Texto de advertencia
   success	Texto de éxito (una suma de comprobación coincidente)
   reach.near	Servidor de una descarga cercano por su tiempo de ida y vuelta (menos de 60 ms), en Propiedades
   reach.medium	Un servidor con un tiempo de ida y vuelta medio (de 60 a 150 ms)
   reach.far	Un servidor lejano por su tiempo de ida y vuelta (más de 150 ms)
   flag.edge	El borde fino alrededor de la bandera de un país
   accent	El acento: líneas de enfoque, controles abiertos y predeterminados, filtros, enfoque de enlaces
   focus.ring	El rectángulo de enfoque de teclado punteado
   selection	Relleno de una selección: filas, un día elegido, texto seleccionado
   selection.text	Texto sobre la selección
   selection.muted	Texto secundario sobre la selección
   selection.inactive	Una fila seleccionada en una lista sin el enfoque
   selection.focus	El contorno punteado de la fila enfocada en una fila seleccionada
   group.line	Marco de un cuadro de grupo
   etch.shadow	Línea de sombra de un separador grabado
   etch.light	Línea de resaltado de un separador grabado
   tab.page	Cuerpo de una página de pestañas
   tab	Una pestaña sin seleccionar y la sombra de la página
   tab.hot	Una pestaña bajo el puntero
   chevron	Una flecha de lista desplegable o de cuadro de número
   chevron.disabled	Una flecha atenuada
   subtle.hot	Una parte sin cara propia (una flecha, un encabezado de columna) bajo el puntero
   subtle.pressed	Una parte así pulsada o abierta
   highlight.hot	Un día o una flecha de calendario bajo el puntero, un destino de arrastre
   highlight.pressed	Un día o una flecha de calendario pulsada
   field	El interior de un cuadro de texto o de una lista
   field.border	El borde de un cuadro de texto
   field.bottom	La línea inferior de un cuadro de texto mientras se puede escribir en él
   field.disabled	El interior de un cuadro de texto atenuado
   field.disabled.border	El borde de un cuadro de texto atenuado
   field.readonly	El interior de un cuadro de texto de solo lectura
   field.readonly.border	El borde de un cuadro de texto de solo lectura
   combo.chevron	El icono de lista desplegable
   combo.arrow.hot	La zona de la flecha de una lista desplegable editable bajo el puntero
   combo.arrow.pressed	La zona de la flecha de una lista desplegable editable pulsada o abierta
   button	La cara de un botón
   button.hot	La cara de un botón bajo el puntero
   button.pressed	La cara de un botón pulsada
   button.border	El borde de un botón
   button.bottom	El borde inferior de un botón
   button.text	El texto de un botón
   button.text.pressed	El texto de un botón pulsado
   button.default.border	El borde del botón predeterminado
   button.default.bottom	El borde inferior del botón predeterminado
   button.disabled	La cara de un botón atenuado
   button.disabled.border	El borde de un botón atenuado
   button.accent	La cara de un botón de énfasis
   button.accent.hot	La cara de un botón de acento bajo el puntero
   button.accent.pressed	La cara de un botón de acento pulsado
   button.accent.bottom	El borde inferior de un botón de acento
   button.accent.text	El texto de un botón de acento
   button.accent.text.pressed	El texto de un botón de acento pulsado
   button.glow	El brillo interior de un botón bajo el puntero, si el estilo lo dibuja (Luna; transparente: ninguno)
   gloss	El brillo al que se difuminan las partes brillantes en su parte superior: botones, cuadros, barras y barras de título (Luna, Aero, Aqua)
   check	El interior de una casilla o botón de radio sin marcar
   check.hot	Su interior bajo el puntero
   check.pressed	Su interior pulsado
   check.border	El borde de una casilla o botón de radio sin marcar
   check.border.hot	Su borde bajo el puntero
   check.border.pressed	Su borde pulsado
   check.border.disabled	El borde de una casilla sin marcar atenuada
   check.on	El acento de una casilla o botón de radio marcado
   check.on.hot	El acento marcado bajo el puntero
   check.on.pressed	El acento marcado pulsado
   check.on.disabled	El relleno de una casilla marcada atenuada
   check.mark	La marca o punto en el acento marcado
   progress.track	La pista de una barra de progreso
   progress.bar	El relleno de una barra de progreso
   meter.track	La pista de un medidor (parte completada de una descarga)
   meter.edge	El borde de un medidor
   meter.fill	El relleno de un medidor
   list	El fondo de la lista de descargas
   list.frame	El contorno de una lista, una tabla o un cuadro
   grid	Las líneas de cuadrícula entre las filas de una lista en los diálogos
   list.grid	Las líneas de cuadrícula de la lista de descargas
   header	Los encabezados de columna de todas las listas y tablas
   header.line	La línea inferior de un encabezado en las listas de los diálogos
   header.sep	Los divisores entre los encabezados de columna
   table.line	Los divisores en las tablas del capturador de enlaces y de Añadir torrent
   header.sorted	El encabezado de la columna ordenada
   header.sort-arrow	El icono de ordenación
   row.pressed	Una fila de la lista pulsada
   chip.web	El chip de Web de la lista de descargas
   chip.torrent	El chip de Torrent de la lista de descargas
   chip.text	Texto en un chip
   list.drag-ghost	Un encabezado de columna arrastrado
   list.marquee	La banda elástica que selecciona filas
   list.marquee.border	El borde de la banda elástica
   scroll.track	La pista de una barra de desplazamiento
   scroll.corner	Donde se unen dos barras de desplazamiento
   scroll.thumb	El control deslizante y las flechas de una barra de desplazamiento
   scroll.thumb.hot	El control deslizante o una flecha bajo el puntero
   scroll.thumb.pressed	El control deslizante o una flecha pulsada o arrastrada
   menubar	La barra de menú
   menubar.bottom	La última fila de la barra de menú
   menubar.line	La línea debajo de la barra de menú
   menubar.hot	Un título de menú bajo el puntero
   menubar.open	El título del menú abierto
   menu	El fondo de un menú
   menu.item	Un elemento de menú
   menu.hot	Un elemento de menú bajo el puntero
   menu.border	El marco de un menú y de un elemento emergente
   menu.sep	Los separadores de un menú
   menu.text	El texto de un menú
   menu.glyph	Viñetas, marcas y flechas de submenú
   menu.text.disabled	Un elemento de menú atenuado
   toolbar.line	La línea superior de la barra de herramientas
   toolbar.line.light	El resaltado debajo
   toolbar.hot	Un botón de la barra de herramientas bajo el puntero
   toolbar.hot.faint	La otra parte de un botón dividido mientras una está bajo el puntero
   toolbar.pressed	Un botón de la barra de herramientas pulsado
   toolbar.hot.edge	El borde de un botón activo de la barra de herramientas
   toolbar.hot.border	El borde de un botón activo de la barra de herramientas (transparente: ninguno)
   toolbar.split.shadow	La sombra del divisor de un botón dividido en reposo
   toolbar.split.light	El resaltado del divisor
   toolbar.text.disabled	Una etiqueta atenuada de la barra de herramientas
   toolbar.arrow	La flecha de un botón desplegable
   icon.disabled	La tinta de un icono atenuado (su inicio)
   icon.disabled.end	La tinta de un icono atenuado (su final)
   tree	El fondo del árbol de categorías
   tree.lines	Los conectores punteados del árbol
   tree.expander	Los corchetes angulares del árbol, donde la variante los dibuja
   tree.frame	El marco del panel de categorías
   progress.status	El valor de Estado de la ventana de progreso
   progress.label.disabled	Una etiqueta atenuada en la ventana de progreso
   segments.border	El marco de la barra de segmentos
   segments.corner	Los píxeles de las esquinas de la barra de segmentos
   pieces.have	Una parte de torrent que está aquí
   pieces.partial	Un cuadrado que representa partes parcialmente aquí
   pieces.missing	Una parte que aún no está aquí
   caption	Una barra de título que MDM dibuja
   caption.text	Su título y glifos
   caption.text.inactive	Su título y glifos cuando la ventana no está activa, y los de un botón atenuado
   caption.hot	Un botón de título bajo el puntero (un tinte sobre la barra)
   caption.pressed	Un botón de título pulsado (un tinte sobre la barra)
   caption.button	Un botón de título en reposo, donde el estilo muestra uno (un tinte sobre la barra; transparente: ninguno)
   caption.close	Cerrar bajo el puntero
   caption.close.text	Glifo de Cerrar bajo el puntero
   caption.inactive	Barra de título dibujada por MDM, cuando su ventana no está activa (transparente: como cuando está activa)
   drop-target.edge	Borde del destino de arrastre en reposo
   egui.panel	Fondo del panel de egui
   egui.window	Fondo de las descripciones emergentes
   egui.window.border	Borde de las descripciones emergentes
   egui.text	Texto de las descripciones emergentes
   egui.selection.text	Color del texto seleccionado en los cuadros de egui
   egui.extreme	Fondo más oscuro (o más claro) de egui
   egui.faint	Fondo tenue de egui
   egui.widget	Widgets de egui en reposo
   egui.widget.border	Su borde (transparente: ninguno)

   Todos los tamaños (26)

   Clave	Lo que establece
   radius	Radio de las esquinas de botones, cuadros de texto y desplegables
   radius.button	Radio de las esquinas de un botón pulsador brillante (Luna, Aero; los de Aqua son redondos en los extremos)
   radius.part	Radio de las esquinas de una parte tintada (una zona de flecha, un botón de incremento)
   radius.check	Radio de las esquinas de una casilla de verificación
   radius.flyout	Radio de las esquinas de una ventana emergente (un calendario, un cuadro de filtro)
   radius.menu-item	Radio de las esquinas de un elemento de menú bajo el puntero
   radius.egui	Radio de las esquinas de los propios widgets de egui
   radius.popup	Radio de las esquinas de las descripciones emergentes
   border	Ancho del borde de un control
   focus-line	Altura de la línea de acento de un cuadro de texto enfocado
   chevron.width	Ancho del trazo del chevron de un desplegable
   font.dialog	Texto de diálogo (Tahoma en los diálogos de IDM)
   font.dialog.bold	Títulos de las páginas de Opciones
   font.title	Título de una ventana (Tahoma Negrita): el de la extensión del navegador, el de los ayudantes
   font.code	Un código de inicio de sesión para escribir en la página de un servicio
   font.ui	Menús y texto de la ventana principal (Segoe UI)
   font.ui.bold	Encabezados en negrita en la ventana principal
   font.small	Texto pequeño de egui
   font.body	Texto principal de egui: información sobre herramientas, cuadros de varias líneas
   font.heading	Encabezados de egui
   list.row	Altura de una fila en la lista de descargas
   list.header	Altura de los encabezados de columna de la lista de descargas
   tooltip.width	Dónde se ajusta el texto de una información sobre herramientas
   tooltip.margin-x	Relleno izquierdo y derecho de una información sobre herramientas
   tooltip.margin-top	Relleno superior de una información sobre herramientas
   tooltip.margin-bottom	Relleno inferior de una información sobre herramientas

   Estilo de cada control (7)

   Clave	Sus estilos
   field-focus	línea, borde, anillo
   check	Fluent, Square, Adwaita, Breeze, Luna, Aero, Aqua
   button	Fluent, Breeze, Luna, Aero, Aqua
   progress	línea, barra, bloques, brillo
   scroll	superposición, clásico
   caption	sistema, metro, adwaita, breeze, luna, aero, aqua
   focus	punteado, anillo, marco

   O deja que un asistente de IA lo escriba

   Copia este mensaje en tu asistente de IA y describe el aspecto que quieres al final. Le da al asistente el formato, las claves y las reglas: texto legible y un enfoque visible en ambos lados, y nada copiado de obras de arte de otros. Mira ambos lados tú mismo antes de compartir el resultado.

   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. Pruébalo, sin compilar MDM

   Pon el archivo en la carpeta de temas de MDM. Ver → Tema → Abrir carpeta de temas la abre y la crea la primera vez. Está en la carpeta de datos de MDM:

   Windows

   %APPDATA%\misterdownloadmanager\themes

   Linux

   ~/.local/share/misterdownloadmanager/themes

   macOS

   ~/Library/Application Support/misterdownloadmanager/themes

   Copia portable

   data\themesjunto al programa

   En dos segundos aparece en Ver → Tema, debajo de los temas integrados, con el name que se da a sí mismo. Elígelo y toda la ventana cambia al instante. Después de editar el archivo, vuelve a elegirlo en Ver → Tema para ver el cambio. Ver → Compatibilidad con el modo oscuro y Siempre oscuro cambian entre su lado claro y oscuro.

   Ver → Tema → Añadir un archivo de tema… lo hace por ti: selecciona el archivo en cualquier lugar y MDM lo copia en la carpeta de temas y lo usa al instante.

   ¿Ya tienes un esquema Base16 o pywal?

   Ya es un tema. Un esquema Base16 o Base24 (.yaml) o colors.json de pywal, añadido de la misma manera, cambia los colores de MDM y nada más: los fondos del esquema detrás de la lista y las ventanas, su texto se mantiene legible (4,5:1 o más), su azul en el foco, la selección y la barra de progreso. Una vez que wal se ha ejecutado, Ver → Tema lista pywal, leído de ~/.cache/wal/colors.json (%USERPROFILE%\.cache\wal\colors.jsonen Windows), y MDM sigue los colores de cada nuevo fondo de pantalla en dos segundos. La guía muestra qué color va en cada sitio.

3. Compártelo

   ¿Has creado algo que les gustaría a otros? Abre una solicitud de extracción en GitHub que lo añada a crates/app/assets/themes, con:

   • el archivo .toml y su carpeta de iconos si tiene una;
   • capturas de pantalla de la ventana principal en su lado claro y oscuro;
   • un SOURCES.txt junto a los iconos, indicando quién los dibujó y bajo qué licencia. Los iconos deben ser propios o tener una licencia que permita a MDM compartirlos (GPL-3.0); nunca copiados de otro programa.

   ¿Aún no lo tienes claro? Muéstralo primero en los debates. La guía de contribución explica cómo funcionan las solicitudes de extracción aquí.