added expertimental theme toggler in sidebar

public/css/modules/sidebar.css

@@ -16,6 +16,17 @@
 	width: 200px;
 }
 
+#sidebar .main_tablinks:not(#theme_selector) {
+	display: flex;
+	align-items: center;
+	margin-top: 5px;
+	cursor: pointer;
+}
+
+#sidebar .main_tablinks:not(#theme_selector):hover {
+	background-color: #3e3e3e;
+}
+
 #sidebar .main_tablinks_text {
 	display: none;
 	display: inline-block;
@@ -31,17 +42,6 @@
 	visibility: visible;
 }
 
-#sidebar .main_tablinks:not(#theme_selector) {
-	display: flex;
-	align-items: center;
-	margin-top: 5px;
-	cursor: pointer;
-}
-
-#sidebar .main_tablinks:not(#theme_selector):hover {
-	background-color: #3e3e3e;
-}
-
 #sidebar .side_icon {
 	font-size: 30px;
 	padding: 9px;
@@ -53,27 +53,45 @@
 
 /* Theme selector */
 #theme_selector {
+	margin-top: 20px;
 	display: flex;
 	height: 50px;
 }
 
 #theme_togglers {
-	width: 100%;
 	display: flex;
+	opacity: 0;
+	visibility: hidden;
+	width: 100%;
+	justify-content: space-evenly;
+	align-items: center;
+	transition: all 50ms ease-in-out 200ms;
+}
+
+#sidebar:hover #theme_togglers {
+	position: relative;
+	opacity: 1;
+	visibility: visible;
 }
 
 #theme_togglers .theme_toggler {
-	width: 40px;
-	height: 40px;
+	width: 30px;
+	height: 30px;
 	border-radius: 1000px;
 	border: 1px solid var(--accent-color);
+	cursor: pointer;
+	transition: border 200ms ease-in-out;
 }
 
-#theme_togglers .theme_toggler.light {
+#theme_togglers .theme_toggler.active {
+	border-width: 3px;
+}
+
+#theme_togglers .theme_toggler#light {
 	background: white;
 }
 
-#theme_togglers .theme_toggler.dark {
+#theme_togglers .theme_toggler#dark {
 	background: #141414;
 }
 

public/index.html

@@ -56,13 +56,13 @@
 				<i class="material-icons side_icon">info</i>
 				<span class="main_tablinks_text">Info</span>
 			</span>
-			<!-- <span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
+			<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
 				<i class="material-icons side_icon theme_selector_icon">brightness_3</i>
 				<div id="theme_togglers">
-					<div class="theme_toggler dark"></div>
-					<div class="theme_toggler light"></div>
+					<div id="dark" class="theme_toggler"></div>
+					<div id="light" class="theme_toggler active"></div>
 				</div>
-			</span> -->
+			</span>
 		</aside>
 		<main id="main_content">
 			<div id="middle_section">
@@ -564,10 +564,10 @@
 							</div>
 
 							<div class="settings_group">
-								<label class="with_checkbox">
+								<!-- <label class="with_checkbox">
 									<input type="checkbox" v-model="changeDarkMode">
 									<span class="checkbox_text">Dark Mode</span>
-								</label>
+								</label> -->
 								<label class="with_checkbox">
 									<input type="checkbox" v-model="changeSlimDownloads">
 									<span class="checkbox_text">Slim download tab</span>