Docker 擴充功能的 UI 樣式概觀

我們的設計系統是一組不斷發展的規範，旨在確保 Docker 產品之間的視覺一致性，並符合 AA 級無障礙標準

建議：React+MUI，使用我們的主題

Docker Desktop 的 UI 是使用 React 和 MUI指南，以瞭解如何在 Docker Desktop 中使用 MUI 的永續方法。

不建議：其他框架

您可能偏好使用其他框架，可能是因為您或您的團隊更熟悉它，或者因為您想要重複使用現有的資產。這是可行的，但強烈不建議。這表示

• 您需要手動複製 Docker Desktop 的外觀和風格。這需要付出很多努力，如果您沒有與我們的主題充分匹配，使用者會覺得您的擴充功能不協調，我們可能會要求您在審查過程中進行變更。
• 您將承擔更高的維護負擔。每當 Docker Desktop 的主題變更時（這可能在任何版本中發生），您都需要手動變更您的擴充功能以符合它。
• 如果您的擴充功能是開放原始碼，刻意避免使用通用慣例會讓社群更難做出貢獻。

步驟二：遵循以下建議

遵循我們的 MUI 最佳實務 (如果適用)

請參閱我們的 MUI 最佳實務文章。

僅使用我們調色盤中的顏色

除了少數例外情況（例如顯示您的標誌）之外，您應該只使用我們調色盤中的顏色。這些顏色可以在我們的 樣式指南文件

我們的顏色經過精心挑選，確保在各種佈景主題下，對應的顏色都具有相同的本質特性。在淺色模式中使用 red-300 的任何地方，在深色模式中也應該使用 red-300。

後續步驟？

• 參考我們的 MUI 最佳實務。
• 瞭解如何 發佈您的擴充功能。