同じウィンドウを、あなたらしく

独自のテーマを作成

テーマは TOML (または JSON) 形式の小さなテキスト ファイルです。変更する項目のみを記述し、それ以外の項目は基になるテーマから継承されます。MDM をビルドしたり、プログラミングの知識は必要ありません。

1. 作成

   まずいくつかの色から始め、必要に応じて追加していきます。

   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はテーマの基になるテーマです: classic (既定)、high-contrast、metro、adwaita、breeze、luna、aero、aqua、または同じフォルダー内の別のテーマ ファイル。
   • [seeds]は、MDM がすべてのコントロールに適用するいくつかの色 (background、surface、header、text、accent、selection、error、warning、success) です。[seeds.light] と [seeds.dark] は、それぞれのモードに独自の色を与えます。
   • [colors]は両方のモードで単一の色の役割を設定し、[light] と [dark] は片方のモードのみで設定します: #rrggbb、または透明度を持つ #rrggbbaa。
   • [sizes]は、ピクセル単位の角の半径、境界線の幅、フォント サイズ、行の高さです。[controls] は、テキスト ボックス、チェック ボックス、ボタン、プログレス バー、スクロール バー、フォーカス マーク、タイトル バーの形状を選択します。
   • iconscolor、mono、accent のいずれかです。独自のフォルダー (my-theme/theme.toml) にあるテーマは、icons/16 と icons/24 にアイコンを含めることができ、それぞれ表示される内容 (tb-add-url.svg、cat-music.png) に合わせて名前が付けられます。-symbolic のアイコンはテーマのテキストの色を使用します。
   • contrast = "high"すべてのエッジとテキストの色を強調します。

   MDM が認識しないキー、または読み取れない値はスキップされ、MDM のログ (テーマ フォルダーの横にある logs フォルダー) に書き込まれるため、新しい MDM 用に作成されたファイルでもロードされます。組み込みのテーマも同じ方法で記述されています。GitHub で参照してください。

   すべての色の役割 (156)

   キー	色付けの対象
   window	Windows とダイアログの背景
   text	テキストとグリフ
   text.disabled	無効なテキスト、グレー表示されたすべてのコントロールとラベルのグレー
   text.muted	補助テキスト: メモ、サイズ、バージョン
   link	何かを開くテキスト
   error	エラー テキスト
   error.strong	オプションでのチェック失敗メッセージ (接続、ブラウザー、ヘルパーのテスト)
   warning	警告テキスト
   success	成功テキスト (一致するチェックサム)
   reach.near	プロパティで、ラウンドトリップ時間が短い (60 ミリ秒未満) ダウンロード サーバー
   reach.medium	ラウンドトリップ時間が中程度 (60 ～ 150 ミリ秒) のサーバー
   reach.far	ラウンドトリップ時間が長い (150 ミリ秒超) サーバー
   flag.edge	国旗の周りの細い枠線
   accent	アクセント: フォーカス線、開いているコントロールと既定のコントロール、フィルター、リンクのフォーカス
   focus.ring	点線のキーボード フォーカス矩形
   selection	選択範囲の塗りつぶし: 行、選択された日付、選択されたテキスト
   selection.text	選択範囲上のテキスト
   selection.muted	選択範囲上の補助テキスト
   selection.inactive	フォーカスがないリスト内の選択された行
   selection.focus	選択された行上の、フォーカスされた行の点線のアウトライン
   group.line	グループ ボックスのフレーム
   etch.shadow	エッチングされた区切り線の影の線
   etch.light	エッチングされた区切り線のハイライト線
   tab.page	タブ ページの本文
   tab	選択されていないタブとページの影
   tab.hot	ポインターの下にあるタブ
   chevron	ドロップダウンまたはスピン ボックスの矢印
   chevron.disabled	グレー表示された矢印
   subtle.hot	ポインターの下にある、それ自体の表示がない部分 (矢印、列ヘッダー)
   subtle.pressed	押されているか開いている部分
   highlight.hot	ポインターの下にあるカレンダーの日付または矢印、ドロップ ターゲット
   highlight.pressed	押されているカレンダーの日付または矢印
   field	テキスト ボックスまたはリストの内部
   field.border	テキスト ボックスの境界線
   field.bottom	入力可能なテキスト ボックスの下線
   field.disabled	グレー表示されたテキスト ボックスの内部
   field.disabled.border	グレー表示されたテキスト ボックスの境界線
   field.readonly	読み取り専用テキスト ボックスの内部
   field.readonly.border	読み取り専用テキスト ボックスの境界線
   combo.chevron	ドロップダウンの山形記号
   combo.arrow.hot	ポインターの下にある編集可能なドロップダウンの矢印ゾーン
   combo.arrow.pressed	押されているか開いている編集可能なドロップダウンの矢印ゾーン
   button	ボタンの面
   button.hot	ポインターの下にあるボタンの面
   button.pressed	押されているボタンの面
   button.border	ボタンの境界線
   button.bottom	ボタンの下端
   button.text	ボタンのテキスト
   button.text.pressed	押されているボタンのテキスト
   button.default.border	既定のボタンの境界線
   button.default.bottom	既定のボタンの下端
   button.disabled	グレー表示されたボタンの面
   button.disabled.border	グレー表示されたボタンの境界線
   button.accent	アクセント ボタンの面
   button.accent.hot	ポインター下のアクセント ボタンの面
   button.accent.pressed	押されたアクセント ボタンの面
   button.accent.bottom	アクセント ボタンの下端
   button.accent.text	アクセント ボタンのテキスト
   button.accent.text.pressed	押されたアクセント ボタンのテキスト
   button.glow	ポインター下のボタンの内側の光彩 (スタイルで描画される場合: Luna; 透明: なし)
   gloss	ボタン、ボックス、バー、タイトル バーの上部で光沢のある部分がブレンドされる輝き (Luna、Aero、Aqua)
   check	チェックなしのボックスまたはラジオ ボタンの内側
   check.hot	ポインター下の内側
   check.pressed	押された内側
   check.border	チェックなしのボックスまたはラジオ ボタンの境界線
   check.border.hot	ポインター下の境界線
   check.border.pressed	押された境界線
   check.border.disabled	グレー表示されたチェックなしのボックスの境界線
   check.on	チェックされたボックスまたはラジオ ボタンのアクセント
   check.on.hot	ポインター下のチェックされたアクセント
   check.on.pressed	押されたチェックされたアクセント
   check.on.disabled	グレー表示されたチェックされたボックスの塗りつぶし
   check.mark	チェックされたアクセントのチェック マークまたは点
   progress.track	プログレス バーのトラック
   progress.bar	プログレス バーの塗りつぶし
   meter.track	メーターのトラック (ダウンロードの完了部分)
   meter.edge	メーターの端
   meter.fill	メーターの塗りつぶし
   list	ダウンロード リストの背景
   list.frame	リスト、テーブル、またはボックスの輪郭
   grid	ダイアログのリストの行間のグリッド線
   list.grid	ダウンロード リストのグリッド線
   header	すべてのリストとテーブルの列ヘッダー
   header.line	ダイアログのリストのヘッダーの下線
   header.sep	列ヘッダー間の区切り線
   table.line	リンク グラバーとトレント追加のテーブルの区切り線
   header.sorted	ソートされた列のヘッダー
   header.sort-arrow	ソートの山形記号
   row.pressed	リストの行が押された状態
   chip.web	ダウンロード リストの Web チップ
   chip.torrent	ダウンロード リストのトレント チップ
   chip.text	チップ上のテキスト
   list.drag-ghost	ドラッグ中の列ヘッダー
   list.marquee	行を選択するラバーバンド
   list.marquee.border	ラバーバンドの端
   scroll.track	スクロール バーのトラック
   scroll.corner	2 つのスクロール バーが交わる場所
   scroll.thumb	スクロール バーのつまみと矢印
   scroll.thumb.hot	ポインターの下にあるつまみまたは矢印
   scroll.thumb.pressed	押下またはドラッグ中のつまみまたは矢印
   menubar	メニュー バー
   menubar.bottom	メニュー バーの最後の行
   menubar.line	メニュー バーの下の線
   menubar.hot	ポインターの下にあるメニュー タイトル
   menubar.open	開いているメニューのタイトル
   menu	メニューの背景
   menu.item	メニュー項目
   menu.hot	ポインターの下にあるメニュー項目
   menu.border	メニューとポップアップのフレーム
   menu.sep	メニューの区切り線
   menu.text	メニューのテキスト
   menu.glyph	箇条書き、チェック マーク、サブメニューの矢印
   menu.text.disabled	グレー表示されたメニュー項目
   toolbar.line	ツールバーの最上行
   toolbar.line.light	その下のハイライト
   toolbar.hot	ポインターの下にあるツールバー ボタン
   toolbar.hot.faint	分割ボタンの片方がポインターの下にあるときの、もう一方の部分
   toolbar.pressed	押されたツールバー ボタン
   toolbar.hot.edge	ホット ツールバー ボタンの端
   toolbar.hot.border	ホット ツールバー ボタンの境界線 (透明: なし)
   toolbar.split.shadow	分割ボタンの区切り線 (静止時): その影
   toolbar.split.light	区切り線のハイライト
   toolbar.text.disabled	グレー表示されたツールバー ラベル
   toolbar.arrow	ドロップダウン ボタンの矢印
   icon.disabled	グレー表示されたアイコンのインク (開始)
   icon.disabled.end	グレー表示されたアイコンのインク (終了)
   tree	カテゴリ ツリーの背景
   tree.lines	ツリーの点線コネクタ
   tree.expander	ツリーのシェブロン (バリアントが描画する場合)
   tree.frame	カテゴリ ペインのフレーム
   progress.status	進捗状況ウィンドウの「状態」の値
   progress.label.disabled	進捗状況ウィンドウのグレー表示されたラベル
   segments.border	セグメント バーのフレーム
   segments.corner	セグメント バーの角のピクセル
   pieces.have	ここにあるトレント ピース
   pieces.partial	部分的にここにあるピースを表す四角形
   pieces.missing	まだここにはないピース
   caption	MDM が独自に描画するタイトル バー
   caption.text	そのタイトルとグリフ
   caption.text.inactive	ウィンドウがアクティブでないときのタイトルとグリフ、およびグレー表示されたボタンのタイトルとグリフ
   caption.hot	ポインターの下にあるキャプション ボタン (バー上の色合い)
   caption.pressed	押されたキャプション ボタン (バー上の色合い)
   caption.button	静止状態のキャプション ボタン (スタイルが表示する場合) (バー上の色合い; 透明: なし)
   caption.close	ポインターの下にある「閉じる」
   caption.close.text	ポインター下の［閉じる］のグリフ
   caption.inactive	MDM が描画するタイトル バー (ウィンドウがアクティブでない場合) (透明: アクティブな場合と同様)
   drop-target.edge	ドロップ ターゲットの静止時のエッジ
   egui.panel	egui のパネルの背景
   egui.window	ツールヒントの背景
   egui.window.border	ツールヒントの境界線
   egui.text	ツールヒントのテキスト
   egui.selection.text	egui のボックス内の選択されたテキストの色
   egui.extreme	egui の最も暗い (または最も明るい) 背景
   egui.faint	egui の薄い背景
   egui.widget	egui のウィジェット (静止時)
   egui.widget.border	その境界線 (透明: なし)

   すべてのサイズ (26)

   キー	設定内容
   radius	ボタン、テキスト ボックス、ドロップダウンの角の半径
   radius.button	光沢のあるプッシュ ボタンの角の半径 (Luna、Aero; Aqua は端が丸い)
   radius.part	色付き部分 (矢印ゾーン、スピン ボタン) の角の半径
   radius.check	チェック ボックスの角の半径
   radius.flyout	ウィンドウ内のポップアップ (カレンダー、フィルター ボックス) の角の半径
   radius.menu-item	ポインター下のメニュー項目の角の半径
   radius.egui	egui 独自のウィジェットの角の半径
   radius.popup	ツールヒントの角の半径
   border	コントロールの境界線の幅
   focus-line	フォーカスされたテキスト ボックスのアクセント ラインの高さ
   chevron.width	ドロップダウンのシェブロンのストローク幅
   font.dialog	ダイアログ テキスト (IDM のダイアログでは Tahoma)
   font.dialog.bold	オプション ページのタイトル
   font.title	ウィンドウの見出し (Tahoma Bold): ブラウザー拡張機能、ヘルパー
   font.code	サービス ページで入力するサインイン コード
   font.ui	メニューとメイン ウィンドウのテキスト (Segoe UI)
   font.ui.bold	メイン ウィンドウの太字の見出し
   font.small	egui の小さいテキスト
   font.body	egui の本文テキスト: ツールチップ、複数行ボックス
   font.heading	egui の見出し
   list.row	ダウンロード リストの行の高さ
   list.header	ダウンロード リストの列ヘッダーの高さ
   tooltip.width	ツールチップのテキストが折り返される位置
   tooltip.margin-x	ツールチップの左右のパディング
   tooltip.margin-top	ツールチップの上部のパディング
   tooltip.margin-bottom	ツールチップの下部のパディング

   すべてのコントロール スタイル (7)

   キー	そのスタイル
   field-focus	線、境界線、リング
   check	fluent, square, adwaita, breeze, luna, aero, aqua
   button	fluent, breeze, luna, aero, aqua
   progress	線、バー、ブロック、光沢
   scroll	オーバーレイ、クラシック
   caption	システム、metro、adwaita、breeze、luna、aero、aqua
   focus	点線、リング、フレーム

   または AI アシスタントに作成させる

   このプロンプトを AI アシスタントにコピーし、最後に希望する外観を記述してください。アシスタントに形式、キー、ルール (両側で読みやすいテキストと目に見えるフォーカス、他のアートワークからのコピーなし) を伝えます。結果を共有する前に、両側を自分で確認してください。

   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. MDM をビルドせずに試す

   ファイルを MDM のテーマ フォルダーに配置します。表示 → テーマ → テーマ フォルダーを開く で開くことができ、初回は作成されます。MDM のデータ フォルダー内にあります。

   Windows

   %APPDATA%\misterdownloadmanager\themes

   Linux

   ~/.local/share/misterdownloadmanager/themes

   macOS

   ~/Library/Application Support/misterdownloadmanager/themes

   ポータブル コピー

   data\themesプログラムの横

   2 秒以内に、表示 → テーマ に、組み込みテーマの下に、name が自動で付与されて表示されます。それを選択すると、ウィンドウ全体が一度に変わります。ファイルを編集した後、変更を確認するには 表示 → テーマ で再度選択します。表示 → ダーク モードのサポート と 常にダーク で、ライト側とダーク側を切り替えます。

   表示 → テーマ → テーマ ファイルを追加… で、どこからでもファイルを選択すると、MDM がそれをテーマ フォルダーにコピーし、すぐに適用します。

   Base16 または pywal スキームをお持ちですか?

   それはすでにテーマです。Base16 または Base24 スキーム (.yaml) または pywal の colors.json は、同じ方法で追加すると、MDM の色のみを変更します。リストとウィンドウの背景にスキームの背景が適用され、テキストは読みやすい状態 (4.5:1 以上) に保たれ、フォーカス、選択、プログレス バーには青が適用されます。wal の実行後、表示 → テーマ に ~/.cache/wal/colors.json から読み込まれた pywal が表示されます (%USERPROFILE%\.cache\wal\colors.jsonWindows の場合)。MDM は、新しい壁紙の色に 2 秒以内に追従します。ガイドで、どの色がどこに適用されるかを確認できます。

3. 共有する

   他の人が気に入るものを作成しましたか？GitHub でプル リクエスト を開いて、次のものを crates/app/assets/themes に追加してください。

   • .toml ファイルと、アイコン フォルダーがある場合はそのフォルダー。
   • メイン ウィンドウのライト側とダーク側のスクリーンショット。
   • アイコンの横にSOURCES.txtを付けて、作成者とライセンスを明記してください。アイコンはご自身で作成したものか、MDM が共有できるライセンス (GPL-3.0) の下にあるものに限り、他のプログラムからコピーしたものは使用できません。

   まだ迷っていますか？ まずはディスカッションで公開してください。コントリビューション ガイドで、プル リクエストの仕組みを説明しています。