started theme toggler in sidebar

public/css/modules/sidebar.css

@@ -31,14 +31,14 @@
 	visibility: visible;
 }
 
-#sidebar .main_tablinks {
+#sidebar .main_tablinks:not(#theme_selector) {
 	display: flex;
 	align-items: center;
 	margin-top: 5px;
 	cursor: pointer;
 }
 
-#sidebar .main_tablinks:hover {
+#sidebar .main_tablinks:not(#theme_selector):hover {
 	background-color: #3e3e3e;
 }
 
@@ -50,3 +50,33 @@
 #sidebar .main_tablinks.active .side_icon {
 	color: var(--accent-color);
 }
+
+/* Theme selector */
+#theme_selector {
+	display: flex;
+	height: 50px;
+}
+
+#theme_togglers {
+	width: 100%;
+	display: flex;
+}
+
+#theme_togglers .theme_toggler {
+	width: 40px;
+	height: 40px;
+	border-radius: 1000px;
+	border: 1px solid var(--accent-color);
+}
+
+#theme_togglers .theme_toggler.light {
+	background: white;
+}
+
+#theme_togglers .theme_toggler.dark {
+	background: #141414;
+}
+
+#sidebar .theme_selector_icon {
+	transform: rotate(45deg);
+}