Add auto dark mode loader screen

frontend/static/css/index.css

@@ -6,6 +6,24 @@ body {
   font-family: 'Roboto';
 }
 
+@media (prefers-color-scheme: dark) {
+  body {
+    background: rgb(0, 0, 0);
+  }
+  .loaderSpinner {
+    color: #90caf9;
+  }
+  .loaderSpinner:before{
+    background: rgb(0, 0, 0);
+  }
+  .loaderSpinner:after{
+    background: rgb(0, 0, 0);
+  }
+  .slider{
+    color: #fff;
+  }
+}
+
 #main {
   position: fixed;
   width: 100%;

frontend/static/css/loader.css

@@ -11,12 +11,12 @@
     text-align: center;
   }
 
-  .loaderSpinner,
+.loaderSpinner,
-  .loaderSpinner:before,
+.loaderSpinner:before,
-  .loaderSpinner:after {
+.loaderSpinner:after {
   border-radius: 50%;
-  }
+}
-  .loaderSpinner {
+.loaderSpinner {
   color: #1976d2;
   font-size: 11px;
   text-indent: -99999em;
@@ -28,13 +28,13 @@
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
-  }
+}
-  .loaderSpinner:before,
+.loaderSpinner:before,
-  .loaderSpinner:after {
+.loaderSpinner:after {
   position: absolute;
   content: '';
-  }
+}
-  .loaderSpinner:before {
+.loaderSpinner:before {
   width: 5.2em;
   height: 10.2em;
   background: #ffffff;
@@ -45,8 +45,8 @@
   transform-origin: 5.1em 5.1em;
   -webkit-animation: load2 2s infinite ease 1.5s;
   animation: load2 2s infinite ease 1.5s;
-  }
+}
-  .loaderSpinner:after {
+.loaderSpinner:after {
   width: 5.2em;
   height: 10.2em;
   background: #ffffff;
@@ -57,8 +57,8 @@
   transform-origin: 0.1em 5.1em;
   -webkit-animation: load2 2s infinite ease;
   animation: load2 2s infinite ease;
-  }
+}
-  @-webkit-keyframes load2 {
+@-webkit-keyframes load2 {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
@@ -67,8 +67,8 @@
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
-  }
+}
-  @keyframes load2 {
+@keyframes load2 {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
@@ -77,71 +77,71 @@
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
-  }
+}
 
 .content-slider {
   width: 100%;
   height: 180px;
-  }
+}
 
-  .slider {
+.slider {
   height: 140px;
   width: 350px;
   margin: 40px auto 0;
   overflow: visible;
   position: relative;
-  }
+}
 
-  .mask {
+.mask {
   overflow: hidden;
   height: 140px;
-  }
+}
 
-  .slider ul {
+.slider ul {
   margin: 0;
   padding: 0;
   position: relative;
-  }
+}
 
-  .slider li {
+.slider li {
   text-align: center;
   width: 350px;
   height: 140px;
   position: absolute;
   top: -105px;
   list-style: none;
-  }
+}
 
-  .slider .quote {
+.slider .quote {
   text-align: center;
   font-size: 20px;
-  }
+}
 
-  .slider li.anim1 {
+.slider li.anim1 {
   animation: cycle 12s linear infinite;
-  }
+}
 
-  .slider li.anim2 {
+.slider li.anim2 {
   animation: cycle2 12s linear infinite;
-  }
+}
 
-  .slider li.anim3 {
+.slider li.anim3 {
   animation: cycle3 12s linear infinite;
-  }
+}
 
-  .slider li.anim4 {
+.slider li.anim4 {
   animation: cycle4 12s linear infinite;
-  }
+}
 
-  .slider li.anim5 {
+.slider li.anim5 {
   animation: cycle5 12s linear infinite;
-  }
+}
 
-  .slider:hover li {
+.slider:hover li {
   animation-play-state: paused;
-  }
+}
 
-  @keyframes cycle {
+@keyframes cycle {
   0% {
     top: 0px;
   }
@@ -181,9 +181,9 @@
     top: 0px;
     opacity: 1;
   }
-  }
+}
 
-  @keyframes cycle2 {
+@keyframes cycle2 {
   0% {
     top: -105px;
     opacity: 0;
@@ -220,9 +220,9 @@
     opacity: 0;
     z-index: -1;
   }
-  }
+}
 
-  @keyframes cycle3 {
+@keyframes cycle3 {
   0% {
     top: -105px;
     opacity: 0;
@@ -259,9 +259,9 @@
     opacity: 0;
     z-index: -1;
   }
-  }
+}
 
-  @keyframes cycle4 {
+@keyframes cycle4 {
   0% {
     top: -105px;
     opacity: 0;
@@ -298,9 +298,9 @@
     opacity: 0;
     z-index: -1;
   }
-  }
+}
 
-  @keyframes cycle5 {
+@keyframes cycle5 {
   0% {
     top: -105px;
     opacity: 0;
@@ -327,4 +327,4 @@
     opacity: 0;
     z-index: 0;
   }
-  }
+}