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。