Docker 擴充套件的 UI 樣式概述
目錄
我們的設計系統是一套不斷發展的規範，旨在確保 Docker 產品之間的視覺一致性，並滿足 AA 級無障礙標準。我們向擴充套件作者開放了部分設計系統，記錄了基本樣式（顏色、排版）和元件。請參閱：Docker 擴充套件樣式指南。
我們要求擴充套件在一定程度上與更廣泛的 Docker Desktop UI 相匹配，並保留在將來使此要求更嚴格的權利。
要開始使用您的 UI，請按照以下步驟操作。
第一步：選擇您的框架
推薦：使用 React+MUI，使用我們的主題
Docker Desktop 的 UI 使用 React 和 MUI（使用 Material UI 到特定位置）。這是構建擴充套件的唯一官方支援的框架，也是我們的 init 命令為您自動配置的框架。使用它會給作者帶來顯著的好處
- 您可以使用我們的 Material UI 主題 自動複製 Docker Desktop 的外觀和感覺。
- 將來，我們將釋出專門針對此組合的實用程式和元件（例如，自定義 MUI 元件或與 Docker 互動的 React 掛鉤）。
閱讀我們的 MUI 最佳實踐 指南，瞭解使用 MUI 與 Docker Desktop 的未來證明方法。
不推薦：其他框架
您可能更喜歡使用其他框架，也許是因為您或您的團隊更熟悉它，或者是因為您有想要重用的現有資產。這是可能的，但強烈不建議這樣做。這意味著
- 您需要手動複製 Docker Desktop 的外觀和感覺。這需要花費大量精力，如果您與我們的主題匹配不夠緊密，使用者會發現您的擴充套件令人反感，我們可能會要求您在審查過程中進行更改。
- 您的維護負擔會更高。每當 Docker Desktop 的主題發生更改時（這可能會在任何版本中發生），您都需要手動更改您的擴充套件以使其匹配。
- 如果您的擴充套件是開源的，刻意避免使用通用約定將使社群更難為其做出貢獻。
第二步：遵循以下建議
遵循我們的 MUI 最佳實踐（如果適用）
請參閱我們的 MUI 最佳實踐 文章。
僅使用我們調色盤中的顏色
除了少數例外情況，例如顯示您的徽標，您應該只使用我們調色盤中的顏色。這些顏色可以在我們的 樣式指南文件 中找到，並且很快也將透過我們的 MUI 主題和 CSS 變數提供。
在亮模式/暗模式下使用對應顏色
我們選擇的顏色確保調色盤每個變體的對應顏色應該具有相同的本質特徵。在亮模式中使用 red-300 的任何地方，您也應該在暗模式中使用 red-300。