Toggle Between Dark-Theme and Light-Theme

abhishekmj303 · Dec 19, 2023 · 93f10ca · 93f10ca
1 parent 60f6f85
commit 93f10ca
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
 # Hardening Hub <!-- omit from toc --> 
 Hardening for ubuntu Using UI:
-![Alt text](static/image.png)
+![Alt text](static/preview.png)
 Hardening Hub for Ubuntu.
diff --git a/main.py b/main.py
@@ -1,13 +1,14 @@
 from PyQt6.QtWidgets import QApplication, QMainWindow \
     , QHBoxLayout, QWidget, QScrollArea
-from PyQt6.QtCore import Qt
+from PyQt6.QtCore import Qt, pyqtSignal
 from ui.sidebar import Sidebar
 from ui.page import Pages
 from ui.toolbar import ToolBar
 from harden import config_file, tooltip_file
 import sys
 
 class MainWindow(QMainWindow):
+    theme_signal = pyqtSignal(bool)
     def __init__(self):
         super().__init__()
         self.config = config_file.init()
@@ -44,9 +45,12 @@ def init_ui(self):
 
     def change_theme(self, theme):
         self.setStyleSheet(open(f"ui/qss/{theme}.qss", "r").read())
-
-
-
+        if theme:
+            self.sidebar.bg = "#E6C7A9"
+            self.sidebar.active = "#382F27"
+        else:
+            self.sidebar.bg = "#E6C7A9"
+            self.sidebar.active = "#382F27"
 
 def main():
     app = QApplication(sys.argv)

diff --git a/static/preview.png b/static/preview.png
diff --git a/ui/qss/dark.qss b/ui/qss/dark.qss
@@ -3,7 +3,7 @@ QMainWindow {
 }
 
 #page {	
-	background-color: #1e1e2e;
+	background-color: rgb(40, 40, 56);
 	padding: 0px 0px 0px 20px;
 }
 
@@ -44,6 +44,7 @@ QMainWindow {
 	background-color: #181825;
 	border-radius: 15px;
 	margin-left: 15px;
+	border: none;
 }
 
 .btn {
@@ -89,6 +90,7 @@ QCheckBox {
 	margin-bottom: 10px;
 	font: 15px;
 	font-weight: 500;
+	color: rgb(221, 221, 221);
 }
 QCheckBox::indicator {
     width: 13px;
@@ -152,18 +154,31 @@ QLineEdit:focus {
 
 QScrollArea QStackedWidget {
 	border: none;
-	background-color: #1e1e2e;
+	background-color: rgb(40, 40, 56);
 }
 
 .in-checkbox {
 	margin-left: 30px;
 }
 
 QToolTip {
-	background-color: transparent;
-	color: white;
-	border: 1px solid #45475a;
+	background-color: #6c7086;
+	color: rgb(221, 221, 221);
+	border: 1.5px solid #45475a;
 	border-radius: 10px;
 	font: 15px;
 	padding: 2px 5px;
+}
+
+QComboBox {
+	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;
+}
+
+.theme-btn {
+	margin-right: 20px;
 }
diff --git a/ui/qss/light.qss b/ui/qss/light.qss
@@ -1,112 +1,116 @@
 QMainWindow {
-	background-color: #FFF6ED;
+	background-color: #FFEDDB;
 }
 
 #page {	
-	background-color: #1e1e2e;
+	background-color: #FFF6ED;
 	padding: 0px 0px 0px 20px;
 }
 
 #sidebarBg {
-	background-color: rgb(33, 37, 43);
+	background-color: #FFEDDB;
 }
 
 #sidebarBg QLabel {
-	background-color: #181825;
+	background-color: #FFEDDB;
 	qproperty-alignment: AlignVCenter;
 	text-align: left;
 	padding-left: 15px;
-	color: rgb(221, 221, 221);
+	color: #382F27;
 	font: 17px;
 	font-weight: 400;
 }
 #sidebarBg QLabel:hover {
-	background-color: rgb(39, 40, 58);
+	background-color: #E2BF9C;
 }
 
 #component-title {
-	color: rgb(221, 221, 221);
+	color: #382F27;
 	font: 25px;
 	font-weight: 600;
 	padding: 5px;
 	margin-top: 10px;
 }
 
 #sub-component-title {
-	color: #B6BBC4;
+	color: #55473A;
 	font: 18px;
 	font-weight: 500;
 	margin-top: 10px;
 	margin-bottom: 5px;
 }
 
 #container-widget {
-	background-color: #181825;
+	background-color: #FFF1E4;
 	border-radius: 15px;
 	margin-left: 15px;
+	border: 1px solid #AA8F75;
+	color: #382F27;
 }
 
 .btn {
-	background-color: #7B66FF;
+	background-color: #AA8F75;
 	padding: 4px 13px;
 	border-radius: 5px;
-	color: rgb(221, 221, 221);
+	border: 1px solid #382F27;
+	color: #382F27;
 	font: 15px;
 	font-weight: 500;
 	margin-left: 20px;
 	margin-top: 10px;
 }
 .btn:hover {
-	background-color: #6B56FF;
+	background-color: #8D7761;
 }
 
 .add-btn {
-	background-color: #7B66FF;
+	background-color: #AA8F75;
 	padding: 2.5px 10px;
 	border-radius: 5px;
-	color: rgb(221, 221, 221);
+	color: #382F27;
 	font: 15px;
 	font-weight: 500;
 }
 .add-btn:hover {
-	background-color: #6B56FF;
+	background-color: #8D7761;
 }
 
 .remove-btn {
-	background-color: #7B66FF;
+	background-color: #AA8F75;
 	padding: 1.5px 5px;
 	border-radius: 5px;
-	color: rgb(221, 221, 221);
+	color: #382F27;
 	font: 15px;
 	font-weight: 500;
 }
 .remove-btn:hover {
-	background-color: #6B56FF;
+	background-color: #8D7761;
 }
 
 QCheckBox {
     spacing: 10px;
 	margin-bottom: 10px;
 	font: 15px;
 	font-weight: 500;
+	color: #382F27;
 }
 QCheckBox::indicator {
     width: 13px;
     height: 13px;
 	border-radius: 6px;
-	border: 1.5px solid #B6BBC4;
+	border: 1.5px solid #55473A;
 }
 QCheckBox::indicator:checked {
-    background-color: #6B56FF;
+    background-color: #8D7761;
 }
 QCheckBox::indicator:unchecked {
-    background-color: #ddd;
+    background-color: #FFF6ED;
 }
 QCheckBox::indicator:checked:hover {
-    background-color: #7B66FF;
+    background-color: #AA8F75;
 }
 QCheckBox::indicator:unchecked:hover {
-    background-color: #ccc;
+    background-color: #E2BF9C;
 }
 
 .file-systems QCheckBox {
@@ -116,13 +120,13 @@ QCheckBox::indicator:unchecked:hover {
 	margin: 5px 5px 15px 30px;
 	font: 15px;
 	font-weight: 500;
-	color: rgb(221, 221, 221);
+	color: #382F27;
 }
 .normal-label-for {
 	margin: 5px 5px 10px 0px;
 	font: 15px;
 	font-weight: 500;
-	color: rgb(221, 221, 221);
+	color: #382F27;
 }
 
 .checkbox {
@@ -134,23 +138,48 @@ QCheckBox::indicator:unchecked:hover {
 }
 
 QToolBar {
-	background: #11111b;
+	background: #ffffff;
 	border: none;
 }
 
 QLineEdit {
    border-radius: 4px;
    padding: 2px 5px;
-   color: rgb(221, 221, 221);
-   background-color: rgb(39, 40, 58);
+   color: #382F27;
+   background-color: #FFF6ED;
    margin: 0px 15px 5px 0px;
-   selection-background-color: #BFDFFF;
+   selection-background-color: #AA8F75;
 }
 QLineEdit:focus {
-   border: 1px solid #7B66FF;
+   border: 1px solid #AA8F75;
 }
 
 QScrollArea QStackedWidget {
 	border: none;
-	background-color: #1e1e2e;
+	background-color: #FFF6ED;
+}
+
+.in-checkbox {
+	margin-left: 30px;
+}
+
+QToolTip {
+	background-color: transparent;
+	color: #382F27;
+	border: 1px solid #45475a;
+	font: 15px;
+	padding: 2px 5px;
+}
+
+QComboBox {
+	border-radius: 4px;
+	padding: 2px 5px;
+	color: #382F27;
+	background-color: #FFF6ED;
+	margin: 0px 15px 5px 0px;
+	selection-background-color: #AA8F75;
+}
+
+.theme-btn {
+	margin-right: 20px;
 }
diff --git a/ui/sidebar.py b/ui/sidebar.py
@@ -15,6 +15,9 @@ class Sidebar(QWidget):
 
     def __init__(self):
         super().__init__()
+        self.bg = "#E6C7A9"
+        self.active = "#382F27"
+        self.index = None
         self.init_ui()
 
     def init_ui(self):
@@ -38,7 +41,9 @@ def init_ui(self):
         self.layout.addWidget(self.networking_label)
 
     def set_active(self, index):
+        self.index = index
         self.change_page_signal.emit(index)
         for i in range(self.layout.count()):
             self.layout.itemAt(i).widget().setStyleSheet("")
-        self.layout.itemAt(index - 1).widget().setStyleSheet("background-color: #313244; border-left: 4px solid #cba6f7;")
+        print(f'bg: {self.bg}, active: {self.active}')
+        self.layout.itemAt(index - 1).widget().setStyleSheet(f"background-color: {self.bg}; border-left: 4px solid {self.active};")
diff --git a/ui/toolbar.py b/ui/toolbar.py
@@ -34,6 +34,7 @@ def init_ui(self):
         self.theme_checkbox = QCheckBox("Dark Mode")
         self.theme_checkbox.setChecked(False)
         self.theme_checkbox.stateChanged.connect(self.theme_checkbox_clicked)
+        self.theme_checkbox.setProperty('class', 'theme-btn')
         self.addWidget(self.theme_checkbox)