Add toggle to change theme

abhishekmj303 · Dec 19, 2023 · 88ec710 · 88ec710
1 parent 5ef1740
commit 88ec710
Show file tree

Hide file tree

Showing 4 changed files with 185 additions and 3 deletions.
diff --git a/main.py b/main.py
@@ -23,6 +23,8 @@ def init_ui(self):
         self.pages = Pages(self.config)
         self.pages.setObjectName("page")
         self.toolbar.import_signal.connect(self.pages.refresh_config)
+        self.toolbar.theme_changed_signal.connect(self.change_theme)
+
 
         self.sidebar = Sidebar()
         self.sidebar.setFixedWidth(200)
@@ -39,9 +41,15 @@ def init_ui(self):
         self.main_widget.setLayout(self.main_layout)
         self.setCentralWidget(self.main_widget)
 
+    def change_theme(self, theme):
+        self.setStyleSheet(open(f"ui/qss/{theme}.qss", "r").read())
+
+
+
+
 def main():
     app = QApplication(sys.argv)
-    app.setStyleSheet(open("ui/qss/style.qss", "r").read())
+    app.setStyleSheet(open("ui/qss/light.qss", "r").read())
     window = MainWindow()
     window.show()
     app.exec()

diff --git a/ui/qss/style.qss → ui/qss/dark.qss b/ui/qss/style.qss → ui/qss/dark.qss
diff --git a/ui/qss/light.qss b/ui/qss/light.qss
@@ -0,0 +1,156 @@
+QMainWindow {
+	background-color: #FFF6ED;
+}
+
+#page {	
+	background-color: #1e1e2e;
+	padding: 0px 0px 0px 20px;
+}
+
+#sidebarBg {
+	background-color: rgb(33, 37, 43);
+}
+
+#sidebarBg QLabel {
+	background-color: #181825;
+	qproperty-alignment: AlignVCenter;
+	text-align: left;
+	padding-left: 15px;
+	color: rgb(221, 221, 221);
+	font: 17px;
+	font-weight: 400;
+}
+#sidebarBg QLabel:hover {
+	background-color: rgb(39, 40, 58);
+}
+
+#component-title {
+	color: rgb(221, 221, 221);
+	font: 25px;
+	font-weight: 600;
+	padding: 5px;
+	margin-top: 10px;
+}
+
+#sub-component-title {
+	color: #B6BBC4;
+	font: 18px;
+	font-weight: 500;
+	margin-top: 10px;
+	margin-bottom: 5px;
+}
+
+#container-widget {
+	background-color: #181825;
+	border-radius: 15px;
+	margin-left: 15px;
+}
+
+.btn {
+	background-color: #7B66FF;
+	padding: 4px 13px;
+	border-radius: 5px;
+	color: rgb(221, 221, 221);
+	font: 15px;
+	font-weight: 500;
+	margin-left: 20px;
+	margin-top: 10px;
+}
+.btn:hover {
+	background-color: #6B56FF;
+}
+
+.add-btn {
+	background-color: #7B66FF;
+	padding: 2.5px 10px;
+	border-radius: 5px;
+	color: rgb(221, 221, 221);
+	font: 15px;
+	font-weight: 500;
+}
+.add-btn:hover {
+	background-color: #6B56FF;
+}
+
+.remove-btn {
+	background-color: #7B66FF;
+	padding: 1.5px 5px;
+	border-radius: 5px;
+	color: rgb(221, 221, 221);
+	font: 15px;
+	font-weight: 500;
+}
+.remove-btn:hover {
+	background-color: #6B56FF;
+}
+
+QCheckBox {
+    spacing: 10px;
+	margin-bottom: 10px;
+	font: 15px;
+	font-weight: 500;
+}
+QCheckBox::indicator {
+    width: 13px;
+    height: 13px;
+	border-radius: 6px;
+	border: 1.5px solid #B6BBC4;
+}
+QCheckBox::indicator:checked {
+    background-color: #6B56FF;
+}
+QCheckBox::indicator:unchecked {
+    background-color: #ddd;
+}
+QCheckBox::indicator:checked:hover {
+    background-color: #7B66FF;
+}
+QCheckBox::indicator:unchecked:hover {
+    background-color: #ccc;
+}
+
+.file-systems QCheckBox {
+	margin-left: 30px;
+}
+.label-for {
+	margin: 5px 5px 15px 30px;
+	font: 15px;
+	font-weight: 500;
+	color: rgb(221, 221, 221);
+}
+.normal-label-for {
+	margin: 5px 5px 10px 0px;
+	font: 15px;
+	font-weight: 500;
+	color: rgb(221, 221, 221);
+}
+
+.checkbox {
+	margin-left: 20px;
+}
+
+.toolbar-btn {
+	margin-bottom: 10px;
+}
+
+QToolBar {
+	background: #11111b;
+	border: none;
+}
+
+QLineEdit {
+   border-radius: 4px;
+   padding: 2px 5px;
+   color: rgb(221, 221, 221);
+   background-color: rgb(39, 40, 58);
+   margin: 0px 15px 5px 0px;
+   selection-background-color: #BFDFFF;
+}
+QLineEdit:focus {
+   border: 1px solid #7B66FF;
+}
+
+QScrollArea QStackedWidget {
+	border: none;
+	background-color: #1e1e2e;
+}
diff --git a/ui/toolbar.py b/ui/toolbar.py
@@ -1,11 +1,13 @@
 from PyQt6.QtWidgets import QToolBar, QPushButton, QFileDialog \
-    , QMessageBox
+    , QMessageBox, QCheckBox, QWidget, QSizePolicy
 from PyQt6.QtCore import pyqtSignal
 from tomlkit import TOMLDocument
 from harden import config_file
 
 class ToolBar(QToolBar):
     import_signal = pyqtSignal(TOMLDocument)
+    theme_changed_signal = pyqtSignal(str)
+
 
     def __init__(self, config):
         super().__init__()
@@ -24,6 +26,16 @@ def init_ui(self):
         self.addWidget(self.save_button)
         self.addWidget(self.script_button)
 
+        spacer = QWidget()
+        spacer.setSizePolicy(QSizePolicy.Policy.Expanding, QSizePolicy.Policy.Expanding)
+        self.addWidget(spacer)
+
+        self.theme_checkbox = QCheckBox("Dark Mode")
+        self.theme_checkbox.setChecked(False)
+        self.theme_checkbox.stateChanged.connect(self.theme_checkbox_clicked)
+        self.addWidget(self.theme_checkbox)
+
+
         self.import_button.setProperty('class', ['btn', 'toolbar-btn'])
         self.export_button.setProperty('class', ['btn', 'toolbar-btn'])
         self.save_button.setProperty('class', ['btn', 'toolbar-btn'])
@@ -64,4 +76,10 @@ def save_button_clicked(self):
 
         if self.message_box.exec() == QMessageBox.StandardButton.Yes:
             config_file.save()
-            print("saved")
+            print("saved")
+
+    def theme_checkbox_clicked(self, state):
+        if state == 2:
+            self.theme_changed_signal.emit("dark")
+        else:
+            self.theme_changed_signal.emit("light")