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。