自定义主题

注意

主题示例和集合可以在 Warp 主题仓库 中找到。

Warp 自定义主题仓库

我们有一个 托管在 GitHub 上的主题仓库。

每个主题都在 README 中生成了预览。

“标准 (standard)”主题和 “base16” 主题的主要区别在于，“标准”主题遵循典型的颜色设置，而 “base16” 主题遵循由 @chriskempson 建议的框架。

有 2 种方法可以从该仓库安装主题。

1. 下载单个文件并按照以下章节中的步骤进行操作。
2. 将整个仓库克隆到下方各操作系统对应的路径中

macOS

mkdir -p $HOME/.warp
cd $HOME/.warp/
git clone https://github.com/warpdotdev/themes.git

Windows

New-Item -Path "$env:APPDATA\warp\Warp\data\" -ItemType Directory
Set-Location -Path $env:APPDATA\warp\Warp\data\
git clone https://github.com/warpdotdev/themes.git

Linux

mkdir -p ${XDG_DATA_HOME:-$HOME/.local/share}/warp-terminal
cd ${XDG_DATA_HOME:-$HOME/.local/share}/warp-terminal/
git clone https://github.com/warpdotdev/themes.git

这是一个分步视频，演示了如何为示例主题执行这两个步骤。注意，文件的位置基于 macOS。

如何使用 Warp 的自定义主题？

1. 首先，创建以下目录

macOS

mkdir -p $HOME/.warp/themes/

Windows

New-Item -Path "$env:APPDATA\warp\Warp\data\themes\" -ItemType Directory

Linux

mkdir -p ${XDG_DATA_HOME:-$HOME/.local/share}/warp-terminal/themes/

注意

Warp 初次发现新主题目录可能需要几分钟。您可以等待，也可以重启 Warp。在那之后，对该目录的所有后续更改都会在几秒钟内生效。

2. 将您的新自定义主题 yaml 文件添加到此目录

cp ~/Downloads/my_awesome_theme.yaml {{path_to_your_themes_directory_from_step1}}

现在，您的新主题应该出现在可用主题列表中了。

手动创建自定义主题

Warp 支持使用 .yaml 文件创建自定义主题。

格式可能会有变化，但我们会尽力避免重大变更并保持向前兼容。我们还计划支持直接在 Warp 内分享和创建自定义主题。

Warp 中的自定义主题具有以下 .yaml 结构

name: Custom Theme # Name for the theme
accent: '#268bd2' # Accent color for UI elements
cursor: '#95D886' # Input cursor color (optional; defaults to accent color if omitted)
background: '#002b36' # Terminal background color
foreground: '#839496' # The foreground color
details: darker # Whether the theme is lighter or darker
terminal_colors: # Ansi escape colors
  bright:
    black: '#002b36'
    blue: '#839496'
    cyan: '#93a1a1'
    green: '#586e75'
    magenta: '#6c71c4'
    red: '#cb4b16'
    white: '#fdf6e3'
    yellow: '#657b83'
  normal:
    black: '#073642'
    blue: '#268bd2'
    cyan: '#2aa198'
    green: '#859900'
    magenta: '#d33682'
    red: '#dc322f'
    white: '#eee8d5'
    yellow: '#b58900'

注意

每种颜色都以十六进制表示，并且必须以 # 开头。

• name: 主题名称，将显示在主题选择器中。
• accent: 用于 Warp UI 高亮显示的颜色
• cursor: 输入光标颜色（可选；如果省略，则默认为强调色）
• background: 背景颜色
• foreground: 前景颜色
• details: 用于详细选项的颜色
  • darker: 用于深色主题的颜色
  • lighter: 用于浅色模式主题的颜色
• terminal_colors: 其他终端主题常用的正常和亮色集合（总共 16 种）（ANSI 颜色）

自动创建自定义主题

根据背景图片自动创建新主题。点击主题选择器中的 + 按钮（设置 > 外观 > 主题），或者在 命令面板 中搜索 Open Theme Picker。

浏览主题并使用主题创建器

浏览 Warp 的 主题仓库 获取现成的主题，或使用应用内的主题创建器为您自定义主题生成合适的 RGB 值。一旦创建了 YAML 文件，您可以编辑该文件以添加背景图片或渐变。

背景图片和渐变

要添加背景图片，您可以使用此属性：background_image:，后面跟上您想要用作背景的图片名称。

注意

注意：Warp 目前仅支持 .jpg 文件格式的图片

• .jpeg
• .jpg
• .JPEG

一个 .yaml 配置文件看起来像这样

name: Custom Theme
accent: '#268bd2'
cursor: '#95D886'
background: '#002b36'
details: darker
foreground: '#839496'

############################################################### SEE BELOW
background_image:
  # The path is relative to your platform's themes directory:
  #   macOS:   ~/.warp/themes/
  #   Windows: %APPDATA%\warp\Warp\data\themes\
  #   Linux:   ${XDG_DATA_HOME:-$HOME/.local/share}/warp-terminal/themes/
  # For example, on macOS the full path to the picture below is:
  #   ~/.warp/themes/warp.jpg
  path: warp.jpg
  # the opacity value is required and can range from 0-100
  opacity: 60
############################################################### SEE ABOVE

terminal_colors:
  bright:
    black: '#002b36'
    blue: '#839496'
    cyan: '#93a1a1'
    green: '#586e75'
    magenta: '#6c71c4'
    red: '#cb4b16'
    white: '#fdf6e3'
    yellow: '#657b83'
  normal:
    black: '#073642'
    blue: '#268bd2'
    cyan: '#2aa198'
    green: '#859900'
    magenta: '#d33682'
    red: '#dc322f'
    white: '#eee8d5'
    yellow: '#b58900'

若要设置渐变，请在 accent 下创建一个子级别，包含两个键值对

• “left” 和 “right” 或
• “top” 和 “bottom”。

accent:
  top: '#abcdef'
  bottom: '#fedcba'

accent:
   left: '#abcdef'
   right: '#fedcba'

Warp 还支持为背景设置渐变。

# accent has a gradient
accent:
  left: '#474747'
  right: '#ffffff'
# background has a gradient
background:
  top: '#474747'
  bottom: '#ffffff'

贡献

我们非常感谢您对本仓库的贡献！

1. Fork 该项目
2. 使用 git checkout -b theme/AwesomeTheme 创建您的分支
3. 重新生成缩略图
4. 提交并打开 Pull Request

运行此脚本以生成缩略图。

# Assuming you're adding the theme to the `standard` directory:
python3 ./scripts/gen_theme_previews.py standard

注意

注意：我们无法接受包含自定义背景图片的 Pull Request，原因如下

• 许可限制
• 尽量保持仓库二进制文件尽可能小（仅包含 yaml 文件）

如果您的主题有预期的自定义背景图片，请在 yaml 中包含一条注释，并附上人们下载该图片的链接。

社区

所有其他与 Warp 相关的事情均可讨论，请 联系我们。

开源依赖

我们想特别感谢一些帮助引导 Warp 主题集成的开源主题和仓库

• iTerm colors pencil
• Alacritty-theme
• base16-Alacritty
• base16
• Solarized
• Dracula
• Gruvbox