QtVSCodeStyle

VS Code Style for PySide and PyQt.

QtVSCodeStyle enables to use VS Code themes in pyqt and pyside. The default and extension themes of VS Code can be used.

SCREENSHOTS

Dark (Visual Studio)	Light (Visual Studio)	Dark High Contrast
Night Owl	One Dark Pro	Ayu Light

etc...

Requirements

• Python 3.7+
• PySide6, PyQt6, PyQt5 or PySide2

Not tested on linux.

Installation Method

• Last released version

  pip install qtvscodestyle
  

• Latest development version

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

Usage

Use default theme

To apply VS Code's default theme, run:

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()

⚠ The image quality may be lower on Qt5(PyQt5, PySide2) due to the use of svg. You can add the following attribute to improve the quality of images.

app.setAttribute(Qt.ApplicationAttribute.AA_UseHighDpiPixmaps)

Available Themes

To check available themes, run:

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

Use extension themes

If you want to use a third party theme, you will need to download the theme file from the repository and load theme by using load_stylesheet().

Simple example using One Dark Pro. One Dark Pro is one of the most used themes for VS Code.

1. First of all, download or copy and paste the theme file from the repository.
2. Then load the stylesheet using the saved file.

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

Color customization

The configuration method is the same as workbench.colorCustomizations of VSCode. About color code format, see 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)

To check available color id, run:

qtvsc.list_color_id()

Color ids is almost the same as VS Code's theme color document. Some own color ids like disabled attribute are available.

SVG and Font QIcon for VS Code style

You can also use various icon fonts and svg as QIcon.

QtVSCodeStyle identifies icons by symbolic and icon name. The following symbolic are currently available to use:

• Font Awesome Free(5.15.4) - Font Icon
  • FaRegular: Regular style
  • FaSolid : Solid style
  • FaBrands: Brands style
• vscode-codicons
  • Vsc: VS Code style - SVG Icon

You can use icon browser that displays all the available icons.

python -m qtvscodestyle.examples.icon_browser

Two functions, theme_icon() and icon() are available. theme_icon() create QIcon will automatically switch the color based on the set color-id when you call 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() create QIcon with static color.

# 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)

Create new theme

You can create your own theme. The configuration method is the same as theme extension of VS Code. The only properties to set are the theme type and colors.

Dictionary, json file(json with comment), and string formats are supported.

• Dictionary

  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)

• String(Json with comment text)

  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 with comment

  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)

If you customize using json files, you can use json schema. Copy json schema from qvscodestyle/validate_colors.json Using schema example for VS Code: https://code.visualstudio.com/docs/languages/json#_json-schemas-and-settings

Check common widgets

To check common widgets, run:

python -m qtvscodestyle.examples.widget_gallery

Custom properties

This module provides several custom properties for applying VS Code's style.

For example, if you set the activitybar to type custom property of QToolbar, the style of the activitybar will be applied.

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

Widget	Property	Property value	Command for demo
QToolBar	type	activitybar	python -m qtvscodestyle.examples.activitybar
QPushButton	type	secondary	python -m qtvscodestyle.examples.pushbutton
QLineEdit	state	warning, error	python -m qtvscodestyle.examples.lineedit
QFrame	type	h_line, v_line	python -m qtvscodestyle.examples.line

Build resources

QtVSCodeStyle creates and deletes icon files dynamically using temporary folder. The style sheet you created will no longer be available after you exit the program. Therefore, QtVSCodeStyle provides the tool to build style sheets with resources that can be used after you exit the program.

In order to build style sheets, run:

python -m qtvscodestyle.resource_builder --theme dark_vs

It is also possible to apply custom colors.

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

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

In order check details of the command, run:

python -m qtvscodestyle.resource_builder --help

⚠ Resource files and svg folders should always be in the same directory.

⚠ Not support on PyQt6. PyQt6 removed Qt’s resource system.

How to use in Qt Designer

1. Run the qtvscodestyle.resource_builder command and generate resources.
2. Copy the stylesheet text from stylesheet.qss.
3. Paste the copied stylesheet into stylesheet property of the top-level widget.
4. Register the resource.qrc in generated folder to the resource browser. If you use Qt Creator, add resource.qrc and svg folder to your project.

License

MIT, see LICENSE.txt. QtVSCodeStyle incorporates image assets from external sources. The icons for the QtVSCodeStyle are derived from:

• Font Awesome Free 5.15.4 (Font Awesome; SIL OFL 1.1)
• Material design icons (Google; Apache License Version 2.0)
• vscode-codicons (Microsoft Corporation; CC-BY-SA-4.0 License)

See NOTICE.md for full license information.

Acknowledgements

This package has been created with reference to the following repositories.

• QDarkStyleSheet
• BreezeStyleSheets
• qt-material
• vscode
• QtAwesome
• Napari