Docker 扩展的 UI 样式概述
目录
我们的设计系统是一套持续演进的规范集合，旨在确保Docker各产品之间的视觉一致性，并满足 WCAG 2.1 级别AA无障碍访问标准。我们已向扩展作者开放了部分设计系统内容，包括基础样式（颜色、字体）和组件的文档说明。详情请参见： Docker 扩展样式指南。
我们要求扩展程序在一定程度上与更广泛的 Docker Desktop 用户界面保持一致，并保留未来进一步收紧此要求的权利。
要开始使用您的用户界面，请按照以下步骤操作。
第一步：选择您的框架
推荐：React+MUI，使用我们的主题
Docker Desktop 的用户界面采用 React 编写，并通过
MUI（特指使用 Material UI）。这是构建扩展时唯一官方支持的框架，也是我们的 init 命令会自动为您配置的框架。使用它可为开发者带来显著优势：
- 您可以使用我们的 Material UI 主题，自动复现 Docker Desktop 的外观与风格。
- 未来，我们将发布专门针对此组合的工具和组件（例如自定义 MUI 组件，或用于与 Docker 交互的 React Hooks）。
阅读我们的 MUI 最佳实践指南，了解如何以面向未来的方式在 Docker Desktop 中使用 MUI。
不推荐：某些其他框架
您可能更倾向于使用其他框架，原因可能是您或您的团队对其更为熟悉，或者您希望复用现有的资产。这是可行的，但强烈不建议这样做，因为这意味着：
- 您需要手动复现 Docker Desktop 的外观与操作体验。这需要投入大量工作；如果您未能充分匹配我们的主题风格，用户将感觉您的扩展与整体界面格格不入，我们可能在审核过程中要求您进行相应调整。
- 您将面临更高的维护成本。每当 Docker Desktop 的主题发生变化（这可能在任何版本更新中发生），您都需要手动调整您的扩展以匹配新主题。
- 如果您的扩展是开源的，刻意避开通用约定将使社区成员更难为其做出贡献。
步骤二：请遵循以下建议
遵循我们的 MUI 最佳实践（如适用）
请参阅我们的 MUI 最佳实践 文章。
仅使用我们调色板中的颜色
除少数例外情况（例如展示您的徽标）外，您应仅使用我们调色板中的颜色。这些颜色可在我们的 样式指南文档中找到，且很快也将提供于我们的 MUI 主题及通过 CSS 变量方式使用。
在亮色/暗色模式下使用对应的颜色
我们的配色方案经过精心选择，以确保每种变体调色板中的对应颜色具有相同的基本特性。在浅色模式下使用 red-300 的地方，在深色模式下也应使用 red-300。