Docker 扩展的 UI 样式概述
目录
我们的设计系统是一套不断发展的规范，旨在确保 Docker 产品之间的视觉一致性，并满足 AA 级可访问性标准。我们已经向扩展作者开放了其中的一部分，记录了基本样式（颜色、排版）和组件。请参阅：Docker 扩展样式指南。
我们要求扩展在一定程度上与更广泛的 Docker Desktop UI 匹配，并保留在将来使其更严格的权利。
要开始使用 UI，请按照以下步骤操作。
第 1 步：选择您的框架
推荐：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 的主题发生变化时（任何版本都可能发生），您需要手动更改扩展以匹配它。
- 如果你的扩展是开源的，则刻意避免使用常见约定将使社区更难为其做出贡献。
第 2 步：遵循以下建议
遵循我们的 MUI 最佳实践（如适用）
请参阅我们的 MUI 最佳实践文章。
仅使用我们调色板中的颜色
除了少数例外，例如显示您的徽标，您应该只使用我们调色板中的颜色。这些可以在我们的样式指南文档中找到，并且很快也会在我们的 MUI 主题和 CSS 变量中提供。
在浅色/深色模式下使用对应的颜色
我们选择了颜色，以便调色板的每个变体中的对应颜色应该具有相同的基本特征。在浅色模式下使用的任何地方，您也应该在深色模式下使用。red-300red-300