QtVSCodeStyle

PySide 和 PyQt 的 VS 代码样式。

QtVSCodeStyle 允许在 pyqt 和 pyside 中使用 VS Code 主题。可以使用 VS Code 的默认主题和扩展主题。

截图

黑暗（Visual Studio）	光（Visual Studio）	深色高对比度
夜猫子	一个黑暗专业	香鱼灯

ETC...

要求

• Python 3.7+
• PySide6、PyQt6、PyQt5 或 PySide2

没有在linux上测试过。

安装方法

• 最后发布的版本

  pip install qtvscodestyle
  

• 最新开发版本

  pip install git+https://github.com/5yutan5/QtVSCodeStyle
  

用法

使用默认主题

要应用 VS Code 的默认主题，请运行：

import sys

from PySide6.QtWidgets import QApplication, QMainWindow, QPushButton

import qtvscodestyle as qtvsc

app = QApplication(sys.argv)
main_win = QMainWindow()
push_button = QPushButton("QtVSCodeStyle!!")
main_win.setCentralWidget(push_button)

stylesheet = qtvsc.load_stylesheet(qtvsc.Theme.DARK_VS)
# stylesheet = load_stylesheet(qtvsc.Theme.LIGHT_VS)
app.setStyleSheet(stylesheet)

main_win.show()

app.exec()

⚠ 由于使用 svg，Qt5(PyQt5, PySide2) 上的图像质量可能较低。您可以添加以下属性来提高图像质量。

app.setAttribute(Qt.ApplicationAttribute.AA_UseHighDpiPixmaps)

可用主题

要检查可用的主题，请运行：

qtvsc.list_themes()

Theme name             Symbol
___________            ______

Light (Visual Studio): LIGHT_VS
Quiet Light          : QUIET_LIGHT
Solarized Light      : SOLARIZED_LIGHT
Abyss                : ABYSS
Dark (Visual Studio) : DARK_VS
Kimbie Dark          : KIMBIE_DARK
Monokai              : MONOKAI
Monokai Dimmed       : MONOKAI_DIMMED
Red                  : RED
Solarized Dark       : SOLARIZED_DARK
Tomorrow Night Blue  : TOMORROW_NIGHT_BLUE
Dark High Contrast   : DARK_HIGH_CONTRAST

使用扩展主题

如果要使用第三方主题，则需要从存储库下载主题文件并使用load_stylesheet().

使用One Dark Pro的简单示例。
One Dark Pro 是 VS Code 最常用的主题之一。

1. 首先，从存储库下载或复制并粘贴主题文件。
2. 然后使用保存的文件加载样式表。

   theme_file = r"OneDark-Pro.json"
   stylesheet = qtvsc.load_stylesheet(theme_file)
   app.setStyleSheet(stylesheet)
   

颜色定制

配置方法同VSCode的workbench.colorCustomizations。
关于颜色代码格式，请参阅https://code.visualstudio.com/api/references/theme-color#color-formats。

# Set the button text color to red.
custom_colors = {"button.foreground": "#ff0000"}
stylesheet = qtvsc.load_stylesheet(qtvsc.Theme.DARK_VS, custom_colors)

要检查可用的颜色 ID，请运行：

qtvsc.list_color_id()

Color ids 与VS Code 的主题颜色文档几乎相同。可以使用一些自己的颜色 ID，例如禁用属性。

用于 VS Code 样式的 SVG 和字体 QIcon

您还可以使用各种图标字体和 svg 作为 QIcon。

QtVSCodeStyle 通过符号和图标名称来识别图标。
当前可以使用以下符号：

• Font Awesome Free(5.15.4) - 字体图标
  • FaRegular: 常规风格
  • FaSolid: 纯色风格
  • FaBrands: 品牌风格
• vscode-codecons
  • Vsc: VS Code 风格 - SVG 图标

您可以使用显示所有可用图标的图标浏览器。

python -m qtvscodestyle.examples.icon_browser

两个功能，theme_icon()并且icon()是可用的。
theme_icon()create QIcon 调用时会根据设置的 color-id 自动切换颜色load_stylesheet(Another Theme)。

star_icon = qtvsc.theme_icon(qtvsc.Vsc.STAR_FULL, "icon.foreground")
button = QToolButton()
button.setIcon(star_icon)

# star_icon switch to the MONOKAI's "icon.foreground" color.
qtvsc.load_stylesheet(qtvsc.Theme.MONOKAI)

icon()使用静态颜色创建 QIcon。

# Set red
star_icon = qtvsc.icon(qtvsc.Vsc.STAR_FULL, "#FF0000")
button = QToolButton()
button.setIcon(star_icon)

# Keep red.
qtvsc.load_stylesheet(qtvsc.Theme.MONOKAI)

创建新主题

您可以创建自己的主题。配置方法与 VS Code 的主题扩展相同。唯一要设置的属性是主题类型和颜色。

支持字典、json 文件（带注释的 json）和字符串格式。

• 字典

  custom_theme = {
      "type": "dark",  # dark or light or hc(high contrast)
      "colors": {
          "button.background": "#1e1e1e",
          "foreground": "#d4d4d4",
          "selection.background": "#404040",
      },
  }
  stylesheet = qtvsc.load_stylesheet(custom_theme)
  

• 字符串（带有注释文本的 Json）

  custom_theme = """
  {
     "type": "dark",
     "colors": {
        "button.background": "#1e1e1e",
        "foreground": "#d4d4d4",
        "selection.background": "#404040"
     }
  }
  """
  # You need to use loads_stylesheet
  stylesheet = qtvsc.loads_stylesheet(custom_theme)
  

• 带评论的 Json

  custom_theme_path = r"custom_theme.json"
  # or you can use pathlib.Path object
  # custom_theme_path = pathlib.Path("custom_theme.json")
  stylesheet = qtvsc.load_stylesheet(custom_theme_path)
  

如果您使用 json 文件进行自定义，则可以使用 json 模式。qvscodestyle/validate_colors.json 从使用 VS 代码的架构示例复制 json 架构： https ://code.visualstudio.com/docs/languages/json#_json-schemas-and-settings

检查常用小部件

要检查常见的小部件，请运行：

python -m qtvscodestyle.examples.widget_gallery

自定义属性

这个模块提供了几个自定义属性来应用 VS Code 的样式。

例如，如果您将 QToolbar 的自定义属性设置activitybar为type自定义，则将应用活动栏的样式。

activitybar = QToolBar()
activitybar.setProperty("type", "activitybar")

构建资源

QtVSCodeStyle 使用临时文件夹动态创建和删除图标文件。
退出程序后，您创建的样式表将不再可用。
因此，QtVSCodeStyle 提供了构建样式表的工具，其中包含退出程序后可以使用的资源。

为了构建样式表，运行：

python -m qtvscodestyle.resource_builder --theme dark_vs

也可以应用自定义颜色。

python -m qtvscodestyle.resource_builder -t dark_vs --custom-colors-path custom.json

// custom.json
{
   "focusBorder": "#ff0000",
   "foreground": "#ff00ff"
}

要检查命令的详细信息，请运行：

python -m qtvscodestyle.resource_builder --help

⚠ 资源文件和 svg 文件夹应始终位于同一目录中。

⚠ 不支持 PyQt6。PyQt6 移除了 Qt 的资源系统。

如何在 Qt 设计器中使用

1. 运行qtvscodestyle.resource_builder命令并生成资源。
2. 从 复制样式表文本stylesheet.qss。
3. 将复制的样式表粘贴到顶级小部件的样式表属性中。
4. 将生成的文件夹注册resource.qrc到资源浏览器。如果您使用 Qt Creator，请将resource.qrcsvg 文件夹添加到您的项目中。

执照

麻省理工学院，请参阅LICENSE.txt。
QtVSCodeStyle 合并了来自外部来源的图像资产。QtVSCodeStyle 的图标来源于：

• Font Awesome Free 5.15.4（Font Awesome；SIL OFL 1.1）
• 材料设计图标（谷歌；Apache 许可证版本 2.0）
• vscode-codicons（微软公司；CC-BY-SA-4.0 许可证）

有关完整的许可证信息，请参阅NOTICE.md。

致谢

该软件包是参考以下存储库创建的。

• QDarkStyleSheet
• 微风样式表
• qt-材料
• 代码
• QtAwesome
• 纳帕里