Package: qtvscodestyle
QtVSCodeStyleVS 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.SCREENSHOTSDark (Visual Studio)Light (Visual Studio)Dark High ContrastNight OwlOne Dark ProAyu Lightetc...RequirementsPython 3.7+PySide6, PyQt6, PyQt5 or PySide2Not tested on linux.Installation MethodLast released versionpip install qtvscodestyleLatest development versionpip install git+https://github.com/5yutan5/QtVSCodeStyleUsageUse default themeTo apply VS Code's default theme, run:importsysfromPySide6.QtWidgetsimportQApplication,QMainWindow,QPushButtonimportqtvscodestyleasqtvscapp=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 followingattributeto improve the quality of images.app.setAttribute(Qt.ApplicationAttribute.AA_UseHighDpiPixmaps)Available ThemesTo 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_CONTRASTUse extension themesIf you want to use a third party theme, you will need to download the theme file from the repository and load theme by usingload_stylesheet().Simple example usingOne Dark Pro.One Dark Pro is one of the most used themes for VS Code.First of all, download or copy and pastethe theme file from the repository.Then load the stylesheet using the saved file.theme_file=r"OneDark-Pro.json"stylesheet=qtvsc.load_stylesheet(theme_file)app.setStyleSheet(stylesheet)Color customizationThe configuration method is the same asworkbench.colorCustomizationsof VSCode.About color code format, seehttps://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 asVS Code's theme color document. Some own color ids like disabled attribute are available.SVG and Font QIcon for VS Code styleYou 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 IconFaRegular: Regular styleFaSolid: Solid styleFaBrands: Brands stylevscode-codiconsVsc: VS Code style - SVG IconYou can use icon browser that displays all the available icons.python -m qtvscodestyle.examples.icon_browserTwo functions,theme_icon()andicon()are available.theme_icon()create QIcon will automatically switch the color based on the set color-id when you callload_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 redstar_icon=qtvsc.icon(qtvsc.Vsc.STAR_FULL,"#FF0000")button=QToolButton()button.setIcon(star_icon)# Keep red.qtvsc.load_stylesheet(qtvsc.Theme.MONOKAI)Create new themeYou 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.Dictionarycustom_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_stylesheetstylesheet=qtvsc.loads_stylesheet(custom_theme)Json with commentcustom_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 fromqvscodestyle/validate_colors.jsonUsing schema example for VS Code:https://code.visualstudio.com/docs/languages/json#_json-schemas-and-settingsCheck common widgetsTo check common widgets, run:python -m qtvscodestyle.examples.widget_galleryCustom propertiesThis module provides several custom properties for applying VS Code's style.For example, if you set theactivitybartotypecustom property of QToolbar, the style of the activitybar will be applied.activitybar=QToolBar()activitybar.setProperty("type","activitybar")WidgetPropertyProperty valueCommand for demoQToolBartypeactivitybarpython -m qtvscodestyle.examples.activitybarQPushButtontypesecondarypython -m qtvscodestyle.examples.pushbuttonQLineEditstatewarning, errorpython -m qtvscodestyle.examples.lineeditQFrametypeh_line, v_linepython -m qtvscodestyle.examples.lineBuild resourcesQtVSCodeStyle 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_vsIt 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 DesignerRun theqtvscodestyle.resource_buildercommand and generate resources.Copy the stylesheet text fromstylesheet.qss.Paste the copied stylesheet into stylesheet property of the top-level widget.Register theresource.qrcin generated folder to the resource browser. If you use Qt Creator, addresource.qrcand svg folder to your project.LicenseMIT, seeLICENSE.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)SeeNOTICE.mdfor full license information.AcknowledgementsThis package has been created with reference to the following repositories.QDarkStyleSheetBreezeStyleSheetsqt-materialvscodeQtAwesomeNapari