seti-ui：实践指南

团队讨论seti-ui时，我会先把用途说清楚：Atom 的微妙深色 UI 主题。对界面与前端开发任务来说，视觉还原、交互状态和响应式细节容易遗漏往往决定它能否落地，不能只用安装成功来判断。先选一个包含多状态的真实组件完成实现更稳妥；过程中要观察尺寸、状态、可访问性、资源和不同视口表现，失败也应能解释原因。我会把它列入愿意逐状态验收界面质量的前端团队的候选清单，而不是仅凭项目介绍直接纳入生产。

塞蒂 UI

Seti-UI 主题和 VS 代码图标包

此存储库包含 Seti UI 主题的最新版本。它包含 VS 代码 中使用的默认图标。

该主题是最初为Atom制作的深色界面主题，具有微妙的颜色，旨在让眼睛舒服。它包括自定义文件图标和新的用户可配置设置。

添加文件图标

鉴于对此存储库的更改包含在 VS 代码中，我们在添加新文件图标方面有些保守，因为它会影响每个人的性能。这意味着我们仅接受 PRs 作为流行语言或工具集的文件图标。例如，您的 language/tool 是否有数万用户的软件包下载或 vscode 扩展？如果不是，那么我们可能会拒绝您的拉取请求。

添加图标需要安装 节点 和 gulp。

一旦有了这些，您将需要打开一个终端窗口，导航到 seti-ui 文件夹并运行 npm install （请注意，您只需执行一次）。

图标风格：

• 使用单一颜色，发货时颜色将被覆盖为以下 9 种颜色之一
• 您想要的目标是 32x32 的框架，图标以 为中心，大小约为 18 x 18。 这个存储库 中有一个包含示例的草图文件。

一切设置完毕后，每当您想要添加新图标时，请按照以下步骤操作：

1. 创建一个带有语言名称的SVG图标，并将其保存到icons文件夹_（不要使用任何空格或特殊字符）_

2. 打开 styles/components/icons/mapping.less 并为刚刚使用 .icon-set mixin 添加的图标创建链接。假设您要为 Sass 添加一个图标，它可能看起来像这样：“.icon-set('.scss', 'sass', @pink)”

第一个参数 '.scss' 是您要定位的文件扩展名，第二个参数 'sass' 是您刚刚创建的图标的名称，不带扩展名（sass.svg），最后一个参数 @pink 指示图标应该是什么颜色。

目前支持 9 种图标颜色： - @blue - @grey - @green - @orange - @pink - @purple - @red - @white - @yellow

虽然您_可以_向 styles/ui-variables.less 添加其他颜色，但请不要这样做，除非您认为_绝对_必要。如果您确实添加了其他颜色，请确保与其他颜色的总体感觉相匹配。如果你添加一些非常亮或非常淡的东西，你的拉取请求可能会被拒绝。

您需要为您想要定位的每个扩展执行一次此操作。例如，如果您想要同时定位 .sass 和 .scss 扩展名，您可以添加以下内容：

.icon-set('.sass', 'sass', @pink);
.icon-set('.scss', 'sass', @pink);

3. 运行 gulp svg 以最小化 svg 文件。

在 VS 代码中预览

这需要一些工作，但步骤如下：

1. 进行更改并运行 gulp icon
2. 克隆 VS 代码，并确保它与 seti-ui 具有相同的父级
3. 按照 VS 代码说明 设置本地开发副本
4. 确认后，您需要更新图标。 cd 到 extensions/theme-seti 并运行 node build/update-icon-theme.js
5. 确保内部 extensions/theme-seti/build/update-icon-theme.js - let FROM_DISK 设置为 true

然后，您可以对 SVG 进行更改，重新运行 gulp icon、node build/update-icon-theme.js 并重新启动 VS 代码的开发副本。

请不要在您的拉取请求中包含构建的文件，因为它可能会导致 PRs 之间发生冲突，否则我们只需要在部署期间执行此操作。

请注意： 这是仅适用于 VS 代码 的 Seti 界面主题

如果这些不是您正在寻找的机器人，我可以为您指出这些伟大端口的方向：

• 超级
• Emacs
• iTerm
• JetBrains
• Sublime Text 3
• Vim
• Visual Studio代码 - 但是，PRs仍然在这里提交

虫子

如果您发现错误，请执行 添加错误报告。但是，首先请确保它适用于 VS 代码中的 Seti UI。我仅支持 VS 代码版本，请检查上面的链接以报告其他平台上的错误。

安装

Seti 已预装在 VS 代码中，因此无需安装。

部署

运行npm publish

当前图标

自定义应用程序图标

如果您想要一个新的应用程序图标来匹配 Seti 的外观和感觉，请随意使用以下之一：