添加更换主题色的组件 `CustomColorSettingCard`

examples/settings/resource/i18n/qfluentwidgets_zh.ts

@@ -85,6 +85,21 @@
         <translation>开</translation>
     </message>
 </context>
+<context>
+    <name>CustomColorSettingCard</name>
+    <message>
+        <source>Custom color</source>
+        <translation>自定义颜色</translation>
+    </message>
+    <message>
+        <source>Default color</source>
+        <translation>默认颜色</translation>
+    </message>
+    <message>
+        <source>Choose color</source>
+        <translation>选择颜色</translation>
+    </message>
+</context>
 <context>
     <name>ColorPickerButton</name>
     <message>
@@ -155,6 +170,14 @@
         <source>Application theme</source>
         <translation>应用主题</translation>
     </message>
+    <message>
+        <source>Theme color</source>
+        <translation>主题色</translation>
+    </message>
+    <message>
+        <source>Change the theme color of you application</source>
+        <translation>调整你的应用主题颜色</translation>
+    </message>
     <message>
         <source>Change the appearance of your application</source>
         <translation>调整你的应用外观</translation>

examples/settings/setting_interface.py

@@ -3,7 +3,8 @@ from config import cfg, HELP_URL, FEEDBACK_URL, AUTHOR, VERSION, YEAR
 from qfluentwidgets import (SettingCardGroup, SwitchSettingCard, FolderListSettingCard,
                             OptionsSettingCard, RangeSettingCard, PushSettingCard,
                             ColorSettingCard, HyperlinkCard, PrimaryPushSettingCard, ScrollArea,
-                            ComboBoxSettingCard, ExpandLayout, Theme, ToastToolTip, setTheme, setThemeColor)
+                            ComboBoxSettingCard, ExpandLayout, Theme, ToastToolTip, CustomColorSettingCard,
+                            setTheme, setThemeColor)
 from qfluentwidgets import FluentIcon as FIF
 from PyQt5.QtCore import Qt, pyqtSignal, QUrl, QStandardPaths
 from PyQt5.QtGui import QDesktopServices
@@ -64,6 +65,13 @@ class SettingInterface(ScrollArea):
             ],
             parent=self.personalGroup
         )
+        self.themeColorCard=CustomColorSettingCard(
+            cfg.themeColor,
+            FIF.PALETTE,
+            self.tr('Theme color'),
+            self.tr('Change the theme color of you application'),
+            self.personalGroup
+        )
         self.zoomCard = OptionsSettingCard(
             cfg.dpiScale,
             FIF.ZOOM,
@@ -221,6 +229,7 @@ class SettingInterface(ScrollArea):
 
         self.personalGroup.addSettingCard(self.enableAcrylicCard)
         self.personalGroup.addSettingCard(self.themeCard)
+        self.personalGroup.addSettingCard(self.themeColorCard)
         self.personalGroup.addSettingCard(self.zoomCard)
         self.personalGroup.addSettingCard(self.languageCard)
 
@@ -309,6 +318,7 @@ class SettingInterface(ScrollArea):
         # personalization
         self.enableAcrylicCard.checkedChanged.connect(
             self.acrylicEnableChanged)
+        self.themeColorCard.colorChanged.connect(setThemeColor)
 
         # playing interface
         self.deskLyricFontCard.clicked.connect(self.__onDeskLyricFontCardClicked)

qfluentwidgets/_rc/qss/dark/expand_setting_card.qss

@@ -63,6 +63,12 @@ QPushButton:pressed {
     color: rgba(255, 255, 255, 0.63);
 }
 
+QPushButton:disabled {
+    color: rgb(102, 102, 102);
+    background: rgb(59, 59, 59);
+    border: 1px solid rgb(80, 80, 80);
+}
+
 
 /* Tool button */
 ToolButton {
@@ -149,4 +155,8 @@ QRadioButton:disabled {
 QRadioButton::indicator:disabled {
     border: 2px solid #646464;
     background-color: transparent;
+}
+
+#chooseColorButton {
+    padding: 5px 17px 5px 17px;
 }
\ No newline at end of file

qfluentwidgets/_rc/qss/light/expand_setting_card.qss

@@ -63,6 +63,12 @@ QPushButton:pressed {
     color: rgba(0, 0, 0, 0.63);
 }
 
+QPushButton:disabled {
+    color: rgb(162, 162, 162);
+    background: rgb(252, 252, 252);
+    border: 1px solid rgb(223, 223, 223);
+}
+
 
 /* Tool button */
 ToolButton {
@@ -150,3 +156,7 @@ QRadioButton::indicator:disabled {
     border: 2px solid #bbbbbb;
     background-color: rgba(0, 0, 0, 0);
 }
+
+#chooseColorButton {
+    padding: 5px 17px 5px 17px;
+}

qfluentwidgets/common/config.py

@@ -187,6 +187,7 @@ class ConfigItem:
         self.__value = default
         self.value = default
         self.restart = restart
+        self.defaultValue = self.validator.correct(default)
 
     @property
     def value(self):

qfluentwidgets/components/settings/__init__.py

 from .setting_card import (SettingCard, SwitchSettingCard, RangeSettingCard,
                            PushSettingCard, ColorSettingCard, HyperlinkCard,
                            PrimaryPushSettingCard, ColorPickerButton, ComboBoxSettingCard)
-from .expand_setting_card import ExpandSettingCard
+from .expand_setting_card import ExpandSettingCard, ExpandGroupSettingCard
 from .folder_list_setting_card import FolderListSettingCard
 from .options_setting_card import OptionsSettingCard
+from .custom_color_setting_card import CustomColorSettingCard
 from .setting_card_group import SettingCardGroup
\ No newline at end of file

qfluentwidgets/components/settings/custom_color_setting_card.py

+# coding:utf-8
+from typing import Union
+from PyQt5.QtCore import Qt, pyqtSignal
+from PyQt5.QtGui import QIcon, QColor
+from PyQt5.QtWidgets import (QWidget, QRadioButton, QLabel, QButtonGroup,
+                             QVBoxLayout, QPushButton, QHBoxLayout)
+
+from ..dialog_box import ColorDialog
+from .expand_setting_card import ExpandGroupSettingCard
+from ...common.config import qconfig, ColorConfigItem
+from ...common.icon import FluentIconBase
+
+
+class CustomColorSettingCard(ExpandGroupSettingCard):
+    """ Custom color setting card """
+
+    colorChanged = pyqtSignal(QColor)
+
+    def __init__(self, configItem: ColorConfigItem, icon: Union[str, QIcon, FluentIconBase], title: str,
+                 content=None, parent=None):
+        """
+        Parameters
+        ----------
+        configItem: ColorConfigItem
+            options config item
+
+        icon: str | QIcon | FluentIconBase
+            the icon to be drawn
+
+        title: str
+            the title of setting card
+
+        content: str
+            the content of setting card
+
+        parent: QWidget
+            parent window
+        """
+        super().__init__(icon, title, content, parent=parent)
+        self.configItem = configItem
+        self.defaultColor = QColor(configItem.defaultValue)
+        self.customColor = QColor(qconfig.get(configItem))
+
+        self.choiceLabel = QLabel(self)
+
+        self.radioWidget = QWidget(self.view)
+        self.radioLayout = QVBoxLayout(self.radioWidget)
+        self.defaultRadioButton = QRadioButton(
+            self.tr('Default color'), self.radioWidget)
+        self.customRadioButton = QRadioButton(
+            self.tr('Custom color'), self.radioWidget)
+        self.buttonGroup = QButtonGroup(self)
+
+        self.customColorWidget = QWidget(self.view)
+        self.customColorLayout = QHBoxLayout(self.customColorWidget)
+        self.customLabel = QLabel(
+            self.tr('Custom color'), self.customColorWidget)
+        self.chooseColorButton = QPushButton(
+            self.tr('Choose color'), self.customColorWidget)
+
+        self.__initWidget()
+
+    def __initWidget(self):
+        self.__initLayout()
+
+        if self.defaultColor != self.customColor:
+            self.customRadioButton.setChecked(True)
+            self.chooseColorButton.setEnabled(True)
+        else:
+            self.defaultRadioButton.setChecked(True)
+            self.chooseColorButton.setEnabled(False)
+
+        self.choiceLabel.setText(self.buttonGroup.checkedButton().text())
+        self.choiceLabel.adjustSize()
+
+        self.chooseColorButton.setObjectName('chooseColorButton')
+
+        self.buttonGroup.buttonClicked.connect(self.__onRadioButtonClicked)
+        self.chooseColorButton.clicked.connect(self.__showColorDialog)
+
+    def __initLayout(self):
+        self.addWidget(self.choiceLabel)
+
+        self.radioLayout.setSpacing(19)
+        self.radioLayout.setAlignment(Qt.AlignTop)
+        self.radioLayout.setContentsMargins(48, 18, 0, 18)
+        self.buttonGroup.addButton(self.customRadioButton)
+        self.buttonGroup.addButton(self.defaultRadioButton)
+        self.radioLayout.addWidget(self.customRadioButton)
+        self.radioLayout.addWidget(self.defaultRadioButton)
+        self.radioLayout.setSizeConstraint(QVBoxLayout.SetMinimumSize)
+
+        self.customColorLayout.setContentsMargins(48, 18, 44, 18)
+        self.customColorLayout.addWidget(self.customLabel, 0, Qt.AlignLeft)
+        self.customColorLayout.addWidget(self.chooseColorButton, 0, Qt.AlignRight)
+        self.customColorLayout.setSizeConstraint(QHBoxLayout.SetMinimumSize)
+
+        self.viewLayout.setSpacing(0)
+        self.viewLayout.setContentsMargins(0, 0, 0, 0)
+        self.addGroupWidget(self.radioWidget)
+        self.addGroupWidget(self.customColorWidget)
+
+        self._adjustViewSize()
+
+    def __onRadioButtonClicked(self, button: QRadioButton):
+        """ radio button clicked slot """
+        if button.text() == self.choiceLabel.text():
+            return
+
+        self.choiceLabel.setText(button.text())
+        self.choiceLabel.adjustSize()
+
+        if button is self.defaultRadioButton:
+            self.chooseColorButton.setDisabled(True)
+            qconfig.set(self.configItem, self.defaultColor)
+            if self.defaultColor != self.customColor:
+                self.colorChanged.emit(self.defaultColor)
+        else:
+            self.chooseColorButton.setDisabled(False)
+            qconfig.set(self.configItem, self.customColor)
+            if self.defaultColor != self.customColor:
+                self.colorChanged.emit(self.customColor)
+
+    def __showColorDialog(self):
+        """ show color dialog """
+        w = ColorDialog(qconfig.get(self.configItem),
+                        self.tr('Choose color'), self.window())
+        w.updateStyle()
+        w.colorChanged.connect(self.__onCustomColorChanged)
+        w.exec()
+
+    def __onCustomColorChanged(self, color):
+        """ custom color changed slot """
+        qconfig.set(self.configItem, color)
+        self.customColor = QColor(color)
+        self.colorChanged.emit(color)

qfluentwidgets/components/settings/expand_setting_card.py

@@ -198,3 +198,34 @@ class ExpandSettingCard(QFrame):
 
         if self.view.isVisible():
             self.resize(self.width(), h + self.card.height())
+
+
+
+class GroupSeparator(QWidget):
+    """ group separator """
+
+    def __init__(self, parent=None):
+        super().__init__(parent=parent)
+        self.setFixedHeight(3)
+
+    def paintEvent(self, e):
+        painter = QPainter(self)
+        c = 35 if isDarkTheme() else 230
+        painter.setPen(QColor(c, c, c))
+        painter.drawLine(0, 1, self.width(), 1)
+
+
+class ExpandGroupSettingCard(ExpandSettingCard):
+    """ Expand group setting card """
+
+    def addGroupWidget(self, widget: QWidget):
+        """ add widget to group """
+        if widget in self.viewLayout.widgets:
+            return
+
+        # add separator
+        if self.viewLayout.count() >= 1:
+            self.viewLayout.addWidget(GroupSeparator(self.view))
+
+        widget.setParent(self.view)
+        self.viewLayout.addWidget(widget)