support add customize theme file

COMTool/assets/qss/style-dark.qss

@@ -76,75 +76,60 @@ QWidget {
 .TitleBar .close:hover {
     background-color: #df2f25;
 }
-#menuItem {
+.menuItem {
     min-height:27px;
     height:27px;
     min-width:27px;
     width:27px;
     border-radius: 5px;
-    background-color: #212121;
+    background-color: transparent;
 }
-.menuItem1 {
-    min-height:27px;
-    height:27px;
-    min-width:27px;
-    width:27px;
-    border-radius: 5px;
+.menuItem:hover {
+    background-color: transparent;
+}
+#menuItem1 {
     margin-right:10px;
     border-image: url("$DataPath/assets/arrow-left.png")
 }
-.menuItem1:hover {
+#menuItem1:hover {
     border-image: url("$DataPath/assets/arrow-left-white.png")
 }
-.menuItem2 {
+#menuItem2 {
+    margin-right:10px;
     min-height:27px;
-    height:27px;
     min-width:27px;
-    width:27px;
-    border-radius: 5px;
-    margin-right:10px;
     border-image: url("$DataPath/assets/skin.png")
 }
-.menuItem2:hover {
+#menuItem2:hover {
     border-image: url("$DataPath/assets/skin-white.png")
 }
-.menuItem3 {
+#menuItem3 {
     min-height:27px;
-    height:27px;
     min-width:27px;
-    width:27px;
-    border-radius: 5px;
-    margin-right:10px;
     border-image: url("$DataPath/assets/help.png")
 }
-.menuItem3:hover {
+#menuItem3:hover {
     border-image: url("$DataPath/assets/help-white.png")
 }
-.menuItem4 {
+#menuItemLang {
+    margin-right:10px;
     min-height:27px;
-    height:27px;
     min-width:27px;
-    width:27px;
-    border-radius: 5px;
-    margin-right:0px;
-    border-image: url("$DataPath/assets/arrow-right.png")
+    border-image: url("$DataPath/assets/language.png")
 }
-.menuItem4:hover {
-    margin-right:0px;
-    border-image: url("$DataPath/assets/arrow-right-white.png")
+#menuItemLang:hover {
+    border-image: url("$DataPath/assets/language-white.png")
 }
-.menuItem5 {
+#menuItem4 {
     min-height:27px;
-    height:27px;
     min-width:27px;
-    width:27px;
-    border-radius: 5px;
-    margin-right:10px;
-    border-image: url("$DataPath/assets/wave.png")
+    margin-right:0px;
+    border-image: url("$DataPath/assets/arrow-right.png")
 }
-.menuItem5:hover {
-    border-image: url("$DataPath/assets/wave-white.png")
+#menuItem4:hover {
+    border-image: url("$DataPath/assets/arrow-right-white.png")
 }
+
 .settingWidget QComboBox{
     width:60px;
     min-width:60px;

COMTool/assets/qss/style.qss → COMTool/assets/qss/style-light.qss

@@ -81,21 +81,23 @@ QMessageBox {
 .TitleBar .close:hover {
     background-color: #df2f25;
 }
-#menuItem {
+.menuItem {
     min-height:27px;
     height:27px;
     min-width:27px;
     width:27px;
     border-radius: 5px;
+    background-color: transparent;
 }
-#menuItem:hover {
+.menuItem:hover {
     min-height:27px;
     height:27px;
     min-width:27px;
     width:27px;
     border-radius: 5px;
+    background-color: transparent;
 }
-.menuItem1 {
+#menuItem1 {
     min-height:27px;
     height:27px;
     min-width:27px;
@@ -105,10 +107,10 @@ QMessageBox {
     background-color: #f5f5f5;
     border-image: url("$DataPath/assets/arrow-left.png")
 }
-.menuItem1:hover {
+#menuItem1:hover {
     border-image: url("$DataPath/assets/arrow-left-white.png")
 }
-.menuItem2 {
+#menuItem2 {
     min-height:27px;
     height:27px;
     min-width:27px;
@@ -118,11 +120,20 @@ QMessageBox {
     background-color: #0b1722;
     border-image: url("$DataPath/assets/skin.png")
 }
-.menuItem2:hover {
+#menuItem2:hover {
     background-color: #0b1722;
     border-image: url("$DataPath/assets/skin-white.png")
 }
-.menuItem3 {
+#menuItemLang {
+    margin-right:10px;
+    min-height:27px;
+    min-width:27px;
+    border-image: url("$DataPath/assets/language.png")
+}
+#menuItemLang:hover {
+    border-image: url("$DataPath/assets/language-white.png")
+}
+#menuItem3 {
     min-height:27px;
     height:27px;
     min-width:27px;
@@ -132,11 +143,11 @@ QMessageBox {
     background-color: #0b1722;
     border-image: url("$DataPath/assets/help.png")
 }
-.menuItem3:hover {
+#menuItem3:hover {
     background-color: #0b1722;
     border-image: url("$DataPath/assets/help-white.png")
 }
-.menuItem4 {
+#menuItem4 {
     min-height:27px;
     height:27px;
     min-width:27px;
@@ -146,10 +157,11 @@ QMessageBox {
     background-color: #f5f5f5;
     border-image: url("$DataPath/assets/arrow-right.png")
 }
-.menuItem4:hover {
+#menuItem4:hover {
     margin-right:0px;
     border-image: url("$DataPath/assets/arrow-right-white.png")
 }
+
 .settingWidget QComboBox{
     width:60px;
     min-width:60px;

COMTool/main2.py

@@ -308,25 +308,25 @@ def initWindow(self):
         utils_ui.setSkin(self.config["skin"])
         # menu layout
         self.settingsButton = QPushButton()
-        self.skinButton = QPushButton("")
-        self.languageCombobox = ButtonCombbox(icon="fa.language", btnClass="smallBtn2")
+        self.skinButton = ButtonCombbox(icon=None, btnClass="menuItem", btnId="menuItem2")
+        self.languageCombobox = ButtonCombbox(icon=None, btnClass="menuItem", btnId="menuItemLang")
         self.languages = i18n.get_languages()
         for locale in self.languages:
             self.languageCombobox.addItem(self.languages[locale])
+        for skin_name in utils_ui.get_skins():
+            self.skinButton.addItem(_(skin_name))
         self.aboutButton = QPushButton()
         self.functionalButton = QPushButton()
         self.encodingCombobox = ComboBox()
         self.supportedEncoding = parameters.encodings
         for encoding in self.supportedEncoding:
             self.encodingCombobox.addItem(encoding)
-        self.settingsButton.setProperty("class", "menuItem1")
-        self.skinButton.setProperty("class", "menuItem2")
-        self.aboutButton.setProperty("class", "menuItem3")
-        self.functionalButton.setProperty("class", "menuItem4")
-        self.settingsButton.setObjectName("menuItem")
-        self.skinButton.setObjectName("menuItem")
-        self.aboutButton.setObjectName("menuItem")
-        self.functionalButton.setObjectName("menuItem")
+        self.settingsButton.setProperty("class", "menuItem")
+        self.aboutButton.setProperty("class", "menuItem")
+        self.functionalButton.setProperty("class", "menuItem")
+        self.settingsButton.setObjectName("menuItem1")
+        self.aboutButton.setObjectName("menuItem3")
+        self.functionalButton.setObjectName("menuItem4")
         # plugins slector
         self.pluginsSelector = ButtonCombbox(icon="fa.plus", btnClass="smallBtn2")
         self.pluginsSelector.addItem(self.loadPluginStr)
@@ -336,7 +336,7 @@ def initWindow(self):
         title = parameters.appName+" v"+version.__version__
         iconPath = self.DataPath+"/"+parameters.appIcon
         log.i("icon path: " + iconPath)
-        self.titleBar = TitleBar(self, icon=iconPath, title=title, brothers=[], widgets=[[self.skinButton, self.aboutButton], []])
+        self.titleBar = TitleBar(self, icon=iconPath, title=title, brothers=[], widgets=[[self.skinButton, self.languageCombobox, self.aboutButton], []])
         CustomTitleBarWindowMixin.__init__(self, titleBar=self.titleBar, init = True)
 
         # root layout
@@ -361,7 +361,6 @@ def initWindow(self):
         tabConerLayoutRight.setContentsMargins(0, 0, 0, 0)
         tabConerWidgetRight.setLayout(tabConerLayoutRight)
         tabConerLayoutRight.addWidget(self.pluginsSelector)
-        tabConerLayoutRight.addWidget(self.languageCombobox)
         tabConerLayoutRight.addWidget(self.encodingCombobox)
         tabConerLayoutRight.addWidget(self.functionalButton)
         self.tabWidget.setCornerWidget(tabConerWidget, Qt.TopLeftCorner)
@@ -397,7 +396,7 @@ def initEvent(self):
         self.languageCombobox.currentIndexChanged.connect(self.onLanguageChanged)
         self.encodingCombobox.currentIndexChanged.connect(lambda: self.bindVar(self.encodingCombobox, self.config, "encoding"))
         self.functionalButton.clicked.connect(self.toggleFunctional)
-        self.skinButton.clicked.connect(self.skinChange)
+        self.skinButton.currentIndexChanged.connect(self.skinChange)
         self.aboutButton.clicked.connect(self.showAbout)
         # main
         self.tabWidget.currentChanged.connect(self.onSwitchTab)
@@ -584,6 +583,12 @@ def uiLoadConfigs(self):
         except Exception:
             idx = 0
         self.languageCombobox.setCurrentIndex(idx)
+        # skin
+        try:
+            idx = utils_ui.get_skins().index(self.config["skin"])
+        except Exception:
+            idx = 0
+        self.skinButton.setCurrentIndex(idx)
         # encoding
         self.encodingCombobox.setCurrentIndex(self.supportedEncoding.index(self.config["encoding"]))
 
@@ -648,14 +653,12 @@ def hideFunctional(self):
             parameters.strStyleShowHideButtonLeft.replace("$DataPath", self.DataPath))
 
     def skinChange(self):
-        if self.config["skin"] == "light": # light
-            file = open(self.DataPath + '/assets/qss/style-dark.qss', "r", encoding="utf-8")
-            self.config["skin"] = "dark"
-        else: # elif self.config["skin"] == 2: # dark
-            file = open(self.DataPath + '/assets/qss/style.qss', "r", encoding="utf-8")
-            self.config["skin"] = "light"
+        idx = self.skinButton.currentIndex()
+        skin = utils_ui.get_skins()[idx]
+        file = open(self.DataPath + '/assets/qss/style-{}.qss'.format(skin), "r", encoding="utf-8")
         self.app.setStyleSheet(file.read().replace("$DataPath", self.DataPath))
-        utils_ui.setSkin(self.config["skin"])
+        utils_ui.setSkin(skin)
+        self.config["skin"] = skin
 
     def showAbout(self):
         help = helpAbout.HelpInfo()
@@ -756,10 +759,7 @@ def main():
         # path = os.path.join(mainWindow.DataPath, "assets", "fonts", "JosefinSans-Regular.ttf")
         # load_fonts([path])
         log.i("data path:"+mainWindow.DataPath)
-        if(mainWindow.config["skin"] == "light") :# light skin
-            file = open(mainWindow.DataPath+'/assets/qss/style.qss',"r", encoding="utf-8")
-        else: #elif mainWindow.config == "dark": # dark skin
-            file = open(mainWindow.DataPath + '/assets/qss/style-dark.qss', "r", encoding="utf-8")
+        file = open(mainWindow.DataPath+'/assets/qss/style-{}.qss'.format(mainWindow.config["skin"]),"r", encoding="utf-8")
         qss = file.read().replace("$DataPath",mainWindow.DataPath)
         app.setStyleSheet(qss)
         t = threading.Thread(target=mainWindow.autoUpdateDetect)

COMTool/utils_ui.py

@@ -2,18 +2,30 @@
     from Combobox import ComboBox
     from i18n import _
     import utils, parameters
+    from parameters import dataPath
 except ImportError:
     from COMTool import utils, parameters
     from COMTool.i18n import _
     from COMTool.Combobox import ComboBox
+    from COMTool.parameters import dataPath
 
 from PyQt5.QtWidgets import QWidget
 from PyQt5.QtGui import QIcon
 import qtawesome as qta # https://github.com/spyder-ide/qtawesome
+import os
 
 _buttonIcons = {}
 _skin = "light"
 
+def get_skins():
+    qss_path = os.path.join(dataPath, "assets", "qss")
+    names = os.listdir(qss_path)
+    styles = []
+    for name in names:
+        if name.startswith("style-"):
+            styles.append(name[6:-4])
+    return styles
+
 def setSkin(skin):
     global _skin, _buttonIcons
 

COMTool/widgets.py

@@ -490,13 +490,16 @@ def mousePressEvent(self, QMouseEvent):
 class ButtonCombbox(QWidget):
     activated = pyqtSignal(int)
     currentIndexChanged = pyqtSignal()
-    def __init__(self, text="", icon = None, btnClass="smallBtn") -> None:
+    def __init__(self, text="", icon = None, btnClass="smallBtn", btnId=None) -> None:
         super().__init__()
         layout = QHBoxLayout()
         layout.setContentsMargins(2,2,2,2)
         self.setLayout(layout)
         self.button = QPushButton(text)
-        self.button.setProperty("class", btnClass)
+        if btnClass:
+            self.button.setProperty("class", btnClass)
+        if btnId:
+            self.button.setObjectName(btnId)
         if icon:
             utils_ui.setButtonIcon(self.button, icon)
         self.list = _Combobox()

README.MD

@@ -35,7 +35,7 @@ A cross platform serial debug tools written by python
 - [x] multiple language support
 - [x] configs save and auto load(auto save settings when exit)
 - [x] multiple character encode support(`ASII,GBK(Chinese),UTF-8,UTF-16` etc.)
-- [x] night theme and White theme(can create more theme if you want)
+- [x] multiple language support
 - [x] multiple connection type support, and support add connection plugin
   - [x] serial port
     - [x] serial auto detect, and remember last selected support
@@ -345,7 +345,12 @@ Run application, you will see the new translation
 
 Create a PR to merge your changes to [this repo](https://github.com/Neutree/COMTool)
 
+## Customize theme
 
+In the `assets/qss` directory under the source code or binary program directory, copy a file from `style-dark.qss` or `style-light.qss`, the file name is `style-xxx.qss`, here `xxx ` is the name of the theme, so that the software can detect the theme.
+Then modify the `qss` file according to your preferences. The syntax of `qss` is similar to `css`, but the support is not complete. Whether the `css` syntax can be used depends on the actual effect, haha.
+Add theme code is welcome!(PR)
+> In addition, the software has not been deliberately optimized for the theme, and the class and id may have been written casually, so there is no guarantee that future codes will be fully compatible with current qss.
 
 
 ## Issue and improvement

README_ZH.MD

@@ -29,7 +29,7 @@ COMTool
 - [x] 跨平台 (Windows, Linux, macOS, Raspberry Pi)(使用 python 编写，只要你的平台支持 python)
 - [x] 可靠，界面不会卡死
 - [x] 多语言支持
-- [x] 白色主题和黑色主题切换
+- [x] 多主题支持，支持自定义主题
 - [x] 多种字符编码格式支持，比如 `ASII,GBK(Chinese),UTF-8,UTF-16` 等
 - [x] 自动保存设置（退出保存）
 - [x] 多种连接方式支持，同时支持编写连接插件
@@ -341,6 +341,13 @@ python i18n.py finish
 
 创建 PR 以将你的更改合并到 [comtool 仓库](https://github.com/Neutree/COMTool)
 
+## 自定义主题
+
+在源码或者二进制程序目录下的`assets/qss`目录中，从`style-dark.qss`或者`style-light.qss`复制一个文件，文件名为`style-xxx.qss`，这里`xxx`就是主题的名字，这样软件里就能检测到这个主题了。
+然后根据你的喜好修改`qss`文件即可， `qss`和`css`语法类似，不过支持得不是很完全，`css`语法能不能用以实际效果为准哈哈。
+欢迎提交主题代码（PR）
+> 另外软件没有为主题刻意优化过，class 和 id 可能都是随手写的，所以不保证未来的代码能完全兼容现在的 qss。
+
 
 ## 问题和意见