modernize website

website/css/docs/navstyle.css

@@ -1,5 +1,5 @@
 .nav-container {
-    background-color: blue;
+    background-color: var( --accent-background );
     width: 100%;
     height: 100vh;
 }
@@ -14,7 +14,7 @@
     display: none;
     font-size: 0.8rem;
     height: 100%;
-    background-color: rgb(27, 27, 165);
+    background-color: var( --dropdown-color );
 }
 
 .navitem {
@@ -23,8 +23,9 @@
     color: white;
     padding: 5%;
     width: 90%;
-    background-color: rgb(22, 22, 117);
+    background-color: var( --nav-buttons );
     font-size: 1rem;
+    transition: all 0.5s;
 }
 
 .nav-subitem {
@@ -35,5 +36,14 @@
     width: 70%;
     padding: 5%;
     padding-left: 25%;
-    background-color: rgb(27, 27, 165);
+    background-color: var( --dropdown-color );
+    transition: all 0.5s;
+}
+
+.nav-subitem:hover {
+    background-color: black;
+}
+
+.navitem:hover, .active {
+    background-color: black;
 }

website/css/docs/style.css

@@ -15,9 +15,45 @@ html, body {
     font-family: sans-serif;
 }
 
+:root, :root.light {
+    --primary-color: black;
+    --accent-background: rgb(25, 25, 148);
+    --accent-color: white;
+    --background-color: white;
+    --accent-background-hover: rgb(124, 140, 236);
+    --top-background: rgb(211, 211, 211);
+    --nav-buttons: rgb(1, 1, 109);
+    --dropdown-color: rgb(0, 0, 156);
+}
+
+:root.dark {
+    --primary-color: white;
+    --accent-background: rgb(0, 0, 88);
+    --accent-color: white;
+    --background-color: rgb(32, 32, 32);
+    --accent-background-hover: #4380a8;
+    --top-background: rgb(77, 77, 77);
+    --nav-buttons: rgb(0, 0, 36);
+    --dropdown-color: rgb(0, 0, 116);
+}
+
+@media ( prefers-color-scheme: dark ) {
+    :root {
+        --primary-color: white;
+        --accent-background: rgb(56, 56, 112);
+        --accent-color: white;
+        --background-color: rgb(46, 46, 46);
+        --accent-background-hover: #4380a8;
+        --top-background: rgb(77, 77, 77);
+        --nav-buttons: rgb(0, 0, 41);
+        --dropdown-color: rgb(0, 0, 116);
+    }
+}
+
 .content {
-    background-color: rgb(255, 255, 255);
-    color: black;
+    transition: all 0.5s;
+    background-color: var( --background-color );
+    color: var( --primary-color );
     display: grid;
     grid-template-areas:
         'menu header header header header'
@@ -33,7 +69,7 @@ html, body {
 }
 
 #doc-container a {
-    color: blue;
+    color: var( --primary-color );
 }
 
 .logo {

website/css/docs/topstyle.css

@@ -1,10 +1,11 @@
 .top-container {
-    background-color: rgb(223, 223, 223);
+    background-color: var( --top-background );
     height: 100%;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    transition: all 0.5s;
 }
 
 .top-wrapper {
@@ -19,4 +20,5 @@
     border-style: none;
     font-size: 1.5rem;
     cursor: pointer;
+    color: var( --primary-color );
 }