Modifies the position & style of the switch site theme button

client/css/style.css

@@ -14,3 +14,4 @@
 @import "./field.css";
 @import "./select.css";
 @import "./options.css";
+@import "./theme-toggler.css";

client/css/theme-toggler.css

@@ -0,0 +1,33 @@
+.theme-toggler-container {
+    margin: 24px 0px 8px 0px;
+    justify-content: center;
+}
+
+.theme-toggler-container.checkbox input + label,
+.theme-toggler-container.checkbox input:checked + label:after {
+	background: var(--colour-1);
+}
+
+.theme-toggler-container.checkbox input + label:after,
+.theme-toggler-container.checkbox input:checked + label {
+	background: var(--colour-3);
+}
+
+.theme-toggler-container.checkbox span {
+    font-size: 0.75rem;
+}
+
+.theme-toggler-container.checkbox label {
+    width: 24px;
+    height: 16px;
+}
+
+.theme-toggler-container.checkbox label:after {
+    left: 2px;
+    width: 10px;
+    height: 10px;
+}
+
+.theme-toggler-container.checkbox input:checked + label:after {
+    left: calc(100% - 2px - 10px);
+}

client/html/index.html

@@ -37,11 +37,15 @@
 						<i class="fa-regular fa-trash"></i>
 						<span>Clear Conversations</span>
 					</button>
+					<div class="field checkbox theme-toggler-container">
+						<input type="checkbox" id="theme-toggler" />
+						<label for="theme-toggler"></label>
+						<span>Dark Mode</span>
+					</div>
 					<a class="info" href="https://github.com/ramonvc/gptfree-jailbreak-webui" target="_blank">
 						<i class="fa-brands fa-github"></i>
 						<span class="conversation-title">
-							Author: @ramonvc<br />
-							Version: 0.0.9-Alpha<br />
+							Version: 0.0.9-Alpha
 						</span>
 					</a>
 				</div>
@@ -74,7 +78,9 @@
 									<option value="gpt-3.5-turbo">GPT-3.5</option>
 									<option value="gpt-3.5-turbo-0613">GPT-3.5-0613</option>
 									<option value="gpt-3.5-turbo-16k">GPT-3.5-turbo-16k</option>
-									<option value="gpt-3.5-turbo-16k-0613" selected>GPT-3.5-turbo-16k-0613</option>
+									<option value="gpt-3.5-turbo-16k-0613" selected>
+										GPT-3.5-turbo-16k-0613
+									</option>
 									<option value="gpt-4" disabled>GPT-4 (offline)</option>
 								</select>
 							</div>
@@ -91,11 +97,6 @@
 							<label for="switch"></label>
 							<span>Web Access</span>
 						</div>
-						<div class="field checkbox">
-							<input type="checkbox" id="theme-toggler" />
-							<label for="theme-toggler"></label>
-							<span>Light Mode</span>
-						</div>	
 					</div>
 				</div>
 			</div>

client/js/theme-toggler.js

@@ -12,11 +12,11 @@ function toggleTheme() {
 	var newTheme = currentTheme === "theme-dark" ? "theme-light" : "theme-dark";
 
 	setTheme(newTheme);
-	switch_theme_toggler.checked = newTheme === "theme-light";
+	switch_theme_toggler.checked = newTheme === "theme-dark";
 }
 
 (function () {
 	var currentTheme = localStorage.getItem("theme") || "theme-dark";
 	setTheme(currentTheme);
-	switch_theme_toggler.checked = currentTheme === "theme-light";
+	switch_theme_toggler.checked = currentTheme === "theme-dark";
 })();