add dark mode

static/common.css

@@ -1,3 +1,13 @@
+body {
+    min-width: 100vw;
+    min-height: 100vh;
+}
+
+:root{
+    --mdc-theme-primary:#007bff;
+    --mdc-theme-secondary:#007bff;
+}
+
 .nav-menu {
     z-index: 100;
     position: fixed;
@@ -105,14 +115,89 @@
     }
 }
 
-.task_manager #task_head {
+.task_manager {
+    padding: 16px;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex-direction: column;
 }
 
-.new_task .close {
-    position: absolute;
-    right: 10px;
-    top: 10px;
+.task_amounts {
+    display: flex;
+    height: 64px;
 }
+
+.task_amounts > div {
+    flex: auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: aliceblue;
+}
+
+.task_amounts > div:first-child {
+    border-radius: 8px 0 0 8px;
+    background-color: black;
+}
+
+.task_amounts > div:last-child{
+    border-radius: 0 8px 8px 0
+}
+
+.btn-success{
+    background-color:#28a745
+}
+
+.btn-warning{
+    background-color:#ffc107
+}
+
+.btn-danger{
+    background-color:#dc3545
+}
+
+.btn-primary{
+    background-color:#007bff
+}
+
+.dark-scheme { 
+    background: #343a40; 
+    color:  white; 
+}
+
+.dark-scheme .mdc-top-app-bar {
+    background-color: black;
+}
+
+.dark-scheme .mdc-text-field__input{
+    color:white!important;
+}
+
+.dark-scheme .mdc-select__native-control {
+    color:white!important;
+}
+
+.dark-scheme .mdc-text-field__input {
+    color:white!important;
+}
+
+.dark-scheme .mdc-floating-label{
+    color:white!important;
+}
+
+.dark-scheme .mdc-select-item{
+    background-color: black!important;
+}
+
+.dark-scheme .mdc-list{
+    background-color:#272727;
+}
+
+.dark-scheme .mdc-list-item{
+    color: white;
+}
+
+.dark-scheme .mdc-notched-outline__idle{
+    color: white!important;
+}