added themes

styles/main_style.css

@@ -12,15 +12,13 @@
     --margin-main-content: 100px;
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --bg: #5E4C93;
-        --bg2: #1b162a;
-        --text: #FFFFFF;
-        --surface: #3e3261;
-        --muted: #C5C1D1;
-        --border: #20192a;
-    }
+.dark {
+    --bg: #130e21;
+    --bg2: #090710;
+    --text: #FFFFFF;
+    --surface: #3e3261;
+    --muted: #C5C1D1;
+    --border: #20192a;
 }
 
 html {
@@ -51,6 +49,65 @@ a {
     box-sizing: border-box;
 }
 
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 52px;
+    height: 28px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--surface);
+    border-radius: 26px;
+    border: 1px solid var(--border);
+}
+
+.slider:hover {
+    border: 1px solid var(--text);
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 20px;
+    width: 20px;
+    left: 3px;
+    bottom: 3px;
+    background-color: var(--muted);
+    transition: 0.4s;
+    border-radius: 50%;
+}
+
+input:checked+.slider:before {
+    background-color: var(--bg);
+}
+
+input:checked+.slider {
+    background-color: var(--surface);
+}
+
+input:checked+.slider:before {
+    transform: translateX(24px);
+}
+
+.website-config {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .sidebar {
     background-color: var(--bg);
     margin-top: 0;