Cùng một cửa sổ, theo cách của bạn

Tự tạo chủ đề của riêng bạn

Một chủ đề là một tệp văn bản nhỏ, ở định dạng TOML (hoặc JSON). Nó chỉ đặt tên cho những gì nó thay đổi; mọi thứ khác đến từ chủ đề mà nó dựa vào. Bạn không cần phải xây dựng MDM hoặc biết cách lập trình.

1. Tạo chủ đề

   Bắt đầu với một vài màu, sau đó thêm nhiều hơn khi bạn thực hiện:

   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"

   • inheritslà chủ đề mà chủ đề của bạn bắt đầu từ: classic (mặc định), high-contrast, metro, adwaita, breeze, luna, aero, aqua, hoặc một tệp chủ đề khác trong cùng thư mục.
   • [seeds]là một vài màu (background, surface, header, text, accent, selection, error, warning, success) mà MDM trải rộng trên mọi điều khiển. [seeds.light] và [seeds.dark] cung cấp cho mỗi bên một màu riêng.
   • [colors]đặt các vai trò màu đơn ở cả hai bên, [light] và [dark] chỉ ở một bên: #rrggbb, hoặc #rrggbbaa với độ trong suốt.
   • [sizes]là bán kính góc, độ rộng đường viền, kích thước phông chữ và chiều cao hàng, tính bằng pixel. [controls] chọn hình dạng của hộp văn bản, hộp kiểm, nút, thanh tiến trình, thanh cuộn, dấu lấy nét và thanh tiêu đề.
   • iconslà color, mono hoặc accent. Một giao diện trong thư mục riêng (my-theme/theme.toml) có thể có các biểu tượng trong icons/16 và icons/24, mỗi biểu tượng được đặt tên theo nội dung hiển thị (tb-add-url.svg, cat-music.png); các biểu tượng -symbolic sẽ lấy màu chữ của giao diện.
   • contrast = "high"làm nổi bật mọi đường viền và màu chữ phía trên.

   Một khóa mà MDM không biết, hoặc một giá trị không thể đọc được, sẽ bị bỏ qua và ghi vào nhật ký của MDM (thư mục logs bên cạnh thư mục giao diện), để một tệp được tạo cho MDM mới hơn vẫn có thể tải. Các giao diện tích hợp sẵn cũng được viết theo cách tương tự: đọc chúng trên GitHub.

   Mọi vai trò màu sắc (156)

   Khóa	Màu sắc cho
   window	Nền của Windows và hộp thoại
   text	Chữ và biểu tượng
   text.disabled	Chữ bị vô hiệu hóa, màu xám duy nhất của mọi điều khiển và nhãn bị làm mờ
   text.muted	Chữ phụ: ghi chú, kích thước, phiên bản
   link	Chữ mở một cái gì đó
   error	Chữ báo lỗi
   error.strong	Thông báo kiểm tra không thành công trong Tùy chọn (kiểm tra kết nối, trình duyệt và trình hỗ trợ)
   warning	Chữ cảnh báo
   success	Chữ thành công (tổng kiểm tra khớp)
   reach.near	Máy chủ tải xuống gần theo thời gian khứ hồi (dưới 60 ms), trong Thuộc tính
   reach.medium	Máy chủ có thời gian khứ hồi trung bình (60 đến 150 ms)
   reach.far	Máy chủ xa theo thời gian khứ hồi (trên 150 ms)
   flag.edge	Đường viền mỏng quanh lá cờ quốc gia
   accent	Điểm nhấn: đường lấy nét, điều khiển mở và mặc định, bộ lọc, lấy nét liên kết
   focus.ring	Hình chữ nhật lấy nét bàn phím chấm chấm
   selection	Màu nền của lựa chọn: hàng, ngày đã chọn, văn bản đã chọn
   selection.text	Chữ trên vùng chọn
   selection.muted	Chữ phụ trên vùng chọn
   selection.inactive	Một hàng đã chọn trong danh sách không có tiêu điểm
   selection.focus	Đường viền chấm chấm của hàng được lấy nét trên một hàng đã chọn
   group.line	Khung của hộp nhóm
   etch.shadow	Đường bóng của bộ phân tách khắc
   etch.light	Đường nổi bật của bộ phân tách khắc
   tab.page	Nội dung của trang tab
   tab	Một thẻ chưa chọn và bóng của trang
   tab.hot	Một thẻ dưới con trỏ
   chevron	Mũi tên của hộp thả xuống hoặc hộp xoay
   chevron.disabled	Một mũi tên bị làm mờ
   subtle.hot	Một phần không có mặt riêng (mũi tên, tiêu đề cột) dưới con trỏ
   subtle.pressed	Một phần như vậy được nhấn hoặc mở
   highlight.hot	Một ngày hoặc mũi tên của lịch dưới con trỏ, một vùng thả
   highlight.pressed	Một ngày hoặc mũi tên của lịch được nhấn
   field	Bên trong hộp văn bản hoặc danh sách
   field.border	Viền của hộp văn bản
   field.bottom	Dòng dưới cùng của hộp văn bản khi có thể nhập liệu
   field.disabled	Bên trong hộp văn bản bị làm mờ
   field.disabled.border	Viền của hộp văn bản bị làm mờ
   field.readonly	Bên trong hộp văn bản chỉ đọc
   field.readonly.border	Viền của hộp văn bản chỉ đọc
   combo.chevron	Dấu mũi tên của hộp thả xuống
   combo.arrow.hot	Vùng mũi tên của hộp thả xuống có thể chỉnh sửa dưới con trỏ
   combo.arrow.pressed	Vùng mũi tên của hộp thả xuống có thể chỉnh sửa được nhấn hoặc mở
   button	Mặt của nút
   button.hot	Mặt của nút dưới con trỏ
   button.pressed	Mặt của nút được nhấn
   button.border	Viền của nút
   button.bottom	Cạnh dưới của nút
   button.text	Văn bản của nút
   button.text.pressed	Văn bản của nút được nhấn
   button.default.border	Viền của nút mặc định
   button.default.bottom	Cạnh dưới của nút mặc định
   button.disabled	Mặt của nút bị làm mờ
   button.disabled.border	Viền của nút bị làm mờ
   button.accent	Mặt của nút nhấn mạnh
   button.accent.hot	Mặt nút nhấn nổi bật khi con trỏ ở trên
   button.accent.pressed	Mặt nút nhấn nổi bật khi được nhấn
   button.accent.bottom	Cạnh dưới của nút nhấn nổi bật
   button.accent.text	Chữ trên nút nhấn nổi bật
   button.accent.text.pressed	Chữ trên nút nhấn nổi bật khi được nhấn
   button.glow	Ánh sáng bên trong nút khi con trỏ ở trên, nơi kiểu vẽ (Luna; trong suốt: không có)
   gloss	Độ bóng mà các phần bóng bẩy hòa vào ở phía trên: nút, hộp, thanh và thanh tiêu đề (Luna, Aero, Aqua)
   check	Bên trong hộp kiểm hoặc nút radio chưa chọn
   check.hot	Bên trong khi con trỏ ở trên
   check.pressed	Bên trong khi được nhấn
   check.border	Viền của hộp kiểm hoặc nút radio chưa chọn
   check.border.hot	Viền khi con trỏ ở trên
   check.border.pressed	Viền khi được nhấn
   check.border.disabled	Viền của hộp kiểm chưa chọn bị làm mờ
   check.on	Điểm nhấn của hộp kiểm hoặc nút radio đã chọn
   check.on.hot	Điểm nhấn đã chọn khi con trỏ ở trên
   check.on.pressed	Điểm nhấn đã chọn khi được nhấn
   check.on.disabled	Màu nền của hộp kiểm đã chọn bị làm mờ
   check.mark	Dấu tích hoặc chấm trên điểm nhấn đã chọn
   progress.track	Đường ray của thanh tiến trình
   progress.bar	Màu nền của thanh tiến trình
   meter.track	Đường ray của đồng hồ đo (phần đã hoàn thành của một lượt tải xuống)
   meter.edge	Cạnh của đồng hồ đo
   meter.fill	Màu nền của đồng hồ đo
   list	Nền của danh sách tải xuống
   list.frame	Đường viền của danh sách, bảng hoặc hộp
   grid	Đường lưới giữa các hàng của danh sách trong hộp thoại
   list.grid	Đường lưới của danh sách tải xuống
   header	Tiêu đề cột của mọi danh sách và bảng
   header.line	Đường dưới cùng của tiêu đề trong danh sách hộp thoại
   header.sep	Đường phân cách giữa các tiêu đề cột
   table.line	Đường phân cách trong bảng của trình lấy liên kết và Thêm torrent
   header.sorted	Tiêu đề cột đã sắp xếp
   header.sort-arrow	Mũi tên sắp xếp
   row.pressed	Một hàng danh sách được nhấn
   chip.web	Chip Web của danh sách tải xuống
   chip.torrent	Chip Torrent của danh sách tải xuống
   chip.text	Văn bản trên chip
   list.drag-ghost	Một tiêu đề cột đang được kéo
   list.marquee	Dải cao su chọn hàng
   list.marquee.border	Cạnh của dải cao su
   scroll.track	Rãnh của thanh cuộn
   scroll.corner	Nơi hai thanh cuộn gặp nhau
   scroll.thumb	Nút kéo và mũi tên của thanh cuộn
   scroll.thumb.hot	Nút kéo hoặc mũi tên dưới con trỏ
   scroll.thumb.pressed	Nút kéo hoặc mũi tên được nhấn hoặc kéo
   menubar	Thanh menu
   menubar.bottom	Hàng cuối cùng của thanh menu
   menubar.line	Đường kẻ dưới thanh menu
   menubar.hot	Tiêu đề menu dưới con trỏ
   menubar.open	Tiêu đề của menu đang mở
   menu	Nền của menu
   menu.item	Mục menu
   menu.hot	Mục menu dưới con trỏ
   menu.border	Khung của menu và cửa sổ bật lên
   menu.sep	Đường phân cách của menu
   menu.text	Văn bản của menu
   menu.glyph	Dấu đầu dòng, dấu tích và mũi tên menu con
   menu.text.disabled	Mục menu bị làm mờ
   toolbar.line	Đường trên cùng của thanh công cụ
   toolbar.line.light	Điểm nổi bật bên dưới
   toolbar.hot	Nút thanh công cụ dưới con trỏ
   toolbar.hot.faint	Phần khác của nút tách khi một phần đang dưới con trỏ
   toolbar.pressed	Nút thanh công cụ đã nhấn
   toolbar.hot.edge	Cạnh của nút thanh công cụ đang hoạt động
   toolbar.hot.border	Viền của nút thanh công cụ đang hoạt động (trong suốt: không có)
   toolbar.split.shadow	Bóng của vạch chia nút tách khi không hoạt động
   toolbar.split.light	Điểm nổi bật của vạch chia
   toolbar.text.disabled	Nhãn thanh công cụ bị làm mờ
   toolbar.arrow	Mũi tên của nút thả xuống
   icon.disabled	Màu mực của biểu tượng bị làm mờ (điểm bắt đầu)
   icon.disabled.end	Màu mực của biểu tượng bị làm mờ (điểm kết thúc)
   tree	Nền của cây danh mục
   tree.lines	Các đường nối chấm của cây
   tree.expander	Dấu ngoặc nhọn của cây, nơi biến thể vẽ chúng
   tree.frame	Khung của ngăn danh mục
   progress.status	Giá trị Trạng thái của cửa sổ tiến trình
   progress.label.disabled	Nhãn bị làm mờ trong cửa sổ tiến trình
   segments.border	Khung của thanh phân đoạn
   segments.corner	Các pixel góc của thanh phân đoạn
   pieces.have	Một phần torrent có ở đây
   pieces.partial	Một ô vuông đại diện cho các phần có một phần ở đây
   pieces.missing	Một phần chưa có ở đây
   caption	Thanh tiêu đề do MDM tự vẽ
   caption.text	Tiêu đề và biểu tượng của nó
   caption.text.inactive	Tiêu đề và biểu tượng của nó khi cửa sổ không phải là cửa sổ đang hoạt động, và của một nút bị làm mờ
   caption.hot	Nút chú thích dưới con trỏ (một màu phủ lên thanh)
   caption.pressed	Nút chú thích đã nhấn (một màu phủ lên thanh)
   caption.button	Nút chú thích khi không hoạt động, nơi kiểu hiển thị một nút (một màu phủ lên thanh; trong suốt: không có)
   caption.close	Đóng dưới con trỏ
   caption.close.text	Biểu tượng của nút Đóng khi con trỏ ở trên
   caption.inactive	Thanh tiêu đề do MDM vẽ, khi cửa sổ không hoạt động (trong suốt: như khi hoạt động)
   drop-target.edge	Cạnh vùng thả khi không hoạt động
   egui.panel	Nền bảng điều khiển của egui
   egui.window	Nền của chú giải công cụ
   egui.window.border	Viền của chú giải công cụ
   egui.text	Văn bản của chú giải công cụ
   egui.selection.text	Màu chữ của văn bản được chọn trong hộp của egui
   egui.extreme	Nền tối nhất (hoặc sáng nhất) của egui
   egui.faint	Nền mờ của egui
   egui.widget	Các tiện ích của egui khi không hoạt động
   egui.widget.border	Viền của chúng (trong suốt: không có)

   Mọi kích thước (26)

   Khóa	Nó thiết lập gì
   radius	Bán kính góc của nút, hộp văn bản và danh sách thả xuống
   radius.button	Bán kính góc của nút nhấn bóng (Luna, Aero; Aqua có góc tròn ở các đầu)
   radius.part	Bán kính góc của phần được tô màu (vùng mũi tên, nút xoay)
   radius.check	Bán kính góc của hộp kiểm
   radius.flyout	Bán kính góc của cửa sổ bật lên trong một cửa sổ (lịch, hộp lọc)
   radius.menu-item	Bán kính góc của mục menu khi con trỏ ở trên
   radius.egui	Bán kính góc của các tiện ích riêng của egui
   radius.popup	Bán kính góc của chú giải công cụ
   border	Độ rộng viền của một điều khiển
   focus-line	Chiều cao của đường nhấn của hộp văn bản được lấy nét
   chevron.width	Độ dày nét của dấu chevron của danh sách thả xuống
   font.dialog	Văn bản hộp thoại (Tahoma trong hộp thoại của IDM)
   font.dialog.bold	Tiêu đề trang Tùy chọn
   font.title	Tiêu đề cửa sổ (Tahoma Bold): của tiện ích mở rộng trình duyệt, của các công cụ hỗ trợ
   font.code	Mã đăng nhập để nhập vào trang của dịch vụ
   font.ui	Văn bản menu và cửa sổ chính (Segoe UI)
   font.ui.bold	Các tiêu đề in đậm trong cửa sổ chính
   font.small	Văn bản nhỏ của egui
   font.body	Văn bản chính của egui: chú giải công cụ, hộp nhiều dòng
   font.heading	Tiêu đề của egui
   list.row	Chiều cao của một hàng trong danh sách tải xuống
   list.header	Chiều cao của tiêu đề cột trong danh sách tải xuống
   tooltip.width	Vị trí ngắt dòng của văn bản chú giải công cụ
   tooltip.margin-x	Khoảng đệm trái và phải của chú giải công cụ
   tooltip.margin-top	Khoảng đệm trên của chú giải công cụ
   tooltip.margin-bottom	Khoảng đệm dưới của chú giải công cụ

   Mọi kiểu điều khiển (7)

   Khóa	Các kiểu của nó
   field-focus	đường, viền, vòng
   check	fluent, square, adwaita, breeze, luna, aero, aqua
   button	fluent, breeze, luna, aero, aqua
   progress	đường, thanh, khối, bóng
   scroll	lớp phủ, cổ điển
   caption	system, metro, adwaita, breeze, luna, aero, aqua
   focus	chấm, vòng, khung

   Hoặc để trợ lý AI viết

   Sao chép lời nhắc này vào trợ lý AI của bạn và mô tả giao diện bạn muốn ở cuối. Nó cung cấp cho trợ lý định dạng, các khóa và quy tắc: văn bản dễ đọc và tiêu điểm rõ ràng ở cả hai mặt, và không sao chép từ tác phẩm nghệ thuật của bất kỳ ai khác. Tự mình xem xét cả hai mặt trước khi bạn chia sẻ kết quả.

   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. Thử nghiệm, không cần xây dựng MDM

   Đặt tệp vào thư mục chủ đề của MDM. Xem → Chủ đề → Mở thư mục chủ đề sẽ mở nó, và làm cho nó lần đầu tiên. Nó nằm trong thư mục dữ liệu của MDM:

   Windows

   %APPDATA%\misterdownloadmanager\themes

   Linux

   ~/.local/share/misterdownloadmanager/themes

   macOS

   ~/Library/Application Support/misterdownloadmanager/themes

   Bản sao di động

   data\themesbên cạnh chương trình

   Trong vòng hai giây, nó sẽ hiển thị trong Xem → Chủ đề, bên dưới các chủ đề tích hợp, bằng name mà nó tự đặt. Chọn nó và toàn bộ cửa sổ sẽ thay đổi ngay lập tức. Sau khi bạn chỉnh sửa tệp, hãy chọn lại nó trong Xem → Chủ đề để xem thay đổi. Xem → Hỗ trợ Chế độ tối và Luôn tối chuyển đổi giữa mặt sáng và mặt tối của nó.

   Xem → Chủ đề → Thêm tệp chủ đề… sẽ làm điều đó cho bạn: chọn tệp ở bất cứ đâu, và MDM sẽ sao chép nó vào thư mục chủ đề và áp dụng ngay lập tức.

   Bạn đã có bảng màu Base16 hoặc pywal?

   Đó đã là một chủ đề. Một bảng màu Base16 hoặc Base24 (.yaml) hoặc colors.json của pywal, được thêm vào cùng một cách, sẽ thay đổi màu sắc của MDM mà không thay đổi gì khác: nền của bảng màu phía sau danh sách và các cửa sổ, văn bản vẫn dễ đọc (tỷ lệ tương phản 4.5:1 trở lên), màu xanh lam trên vùng tiêu điểm, vùng chọn và thanh tiến trình. Sau khi wal đã chạy, Xem → Chủ đề sẽ liệt kê pywal, được đọc từ ~/.cache/wal/colors.json (%USERPROFILE%\.cache\wal\colors.jsontrên Windows), và MDM sẽ theo màu của mỗi hình nền mới trong vòng hai giây. Hướng dẫn cho biết màu nào sẽ ở đâu.

3. Chia sẻ

   Đã tạo thứ gì đó mà người khác sẽ thích? Mở một yêu cầu kéo trên GitHub để thêm nó vào crates/app/assets/themes, với:

   • tệp .toml, và thư mục biểu tượng của nó nếu có;
   • ảnh chụp màn hình cửa sổ chính ở mặt sáng và mặt tối của nó;
   • một SOURCES.txt bên cạnh bất kỳ biểu tượng nào, ghi rõ ai đã vẽ chúng và theo giấy phép nào. Các biểu tượng phải là của riêng bạn hoặc theo giấy phép cho phép MDM chia sẻ chúng (GPL-3.0), không bao giờ được sao chép từ chương trình khác.

   Chưa chắc chắn? Hãy trình bày trong phần thảo luận trước. Hướng dẫn đóng góp giải thích cách thức hoạt động của các yêu cầu kéo tại đây.