[TASK] support dark mode first draft

frontend/scss/components/_btns.scss

@@ -6,11 +6,11 @@
   }
 
   &-dark {
-    @apply bg-primary-900 hover:bg-primary-950 focus-visible:outline-primary-950;
+    @apply bg-primary-900 hover:bg-primary-950 dark:bg-primary-950 focus-visible:outline-primary-950;
   }
 
   &-gray {
-    @apply bg-gray-400 hover:bg-gray-500 focus-visible:outline-primary-500;
+    @apply bg-gray-400 hover:bg-gray-500 dark:bg-primary-600 focus-visible:outline-primary-500;
   }
 
   &-attention {

frontend/scss/components/_headlines.scss

@@ -1,7 +1,7 @@
 .h1 {
-  @apply text-center text-3xl uppercase tracking-wide font-bold text-primary-900;
+  @apply text-center text-3xl uppercase tracking-wide font-bold text-primary-900 dark:text-white;
 }
 
 .h2 {
-  @apply font-bold uppercase tracking-wide text-center rounded-t-md text-primary-950 bg-gray-200 bg-opacity-80 text-lg px-3 py-3;
+  @apply font-bold uppercase tracking-wide text-center rounded-t-md text-primary-950 dark:text-white bg-gray-200 dark:bg-primary-950 bg-opacity-80 text-lg px-3 py-3;
 }

frontend/scss/components/_input.scss

@@ -1,5 +1,5 @@
 .input {
-  @apply relative block w-full border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
+  @apply relative block w-full bg-white dark:bg-black border-0 py-1.5 px-2 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-black placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
 }
 
 select {
@@ -7,7 +7,7 @@ select {
   background-repeat: no-repeat;
   background-position: right .75rem center;
   background-size: 16px 12px;
-  background-color: white;
+  @apply bg-white dark:bg-black;
   -webkit-appearance: none; 
   appearance: none;
 }
@@ -32,7 +32,7 @@ select {
 }
 .choices.is-disabled .choices__inner,
 .choices.is-disabled .choices__input {
-  background-color: #eaeaea;
+  @apply bg-white dark:bg-black;
   cursor: not-allowed;
   -webkit-user-select: none;
           user-select: none;
@@ -52,8 +52,7 @@ select {
   display: block;
   width: 100%;
   padding: 10px;
-  @apply border-0 ring-1 ring-inset ring-gray-300;
-  background-color: #fff;
+  @apply bg-white dark:bg-black border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
   margin: 0;
 }
 .choices[data-type*=select-one] .choices__button {
@@ -93,7 +92,7 @@ select {
   pointer-events: none;
 }
 .choices[data-type*=select-one].is-open::after {
-  @apply border-0 ring-1 ring-inset ring-gray-300;
+  @apply border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
   margin-top: -7.5px;
 }
 .choices[data-type*=select-one][dir=rtl]::after {
@@ -135,10 +134,10 @@ select {
 }
 
 .choices__inner {
-  @apply input rounded-md bg-white;
+  @apply input rounded-md bg-white dark:bg-black;
 }
 .is-focused .choices__inner, .is-open .choices__inner {
-  @apply border-0 ring-1 ring-inset ring-gray-300;
+  @apply border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
 }
 .is-open .choices__inner {
   border-radius: 0;
@@ -190,7 +189,7 @@ select {
   @apply bg-primary-900;
 }
 .is-disabled .choices__list--multiple .choices__item {
-  @apply bg-gray-600;
+  @apply bg-gray-600 dark:bg-primary-900;
 }
 
 .choices__list--dropdown, .choices__list[aria-expanded] {
@@ -198,8 +197,7 @@ select {
   z-index: 1;
   position: absolute;
   width: 100%;
-  background-color: #fff;
-  @apply border;
+  @apply border bg-white dark:bg-black dark:text-white;
   top: 100%;
   margin-top: -1px;
   border-bottom-left-radius: 2.5px;
@@ -212,7 +210,7 @@ select {
   visibility: visible;
 }
 .is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
-  @apply border-0 ring-1 ring-inset ring-gray-300;
+  @apply border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
 }
 .is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
   top: auto;

frontend/scss/components/_sidebar.scss

@@ -3,14 +3,12 @@
   position: fixed;
   overflow-y: scroll;
   top: 0;
-  background: white;
   z-index: 2000;
   width: 0;
   max-width: 0;
   box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
 
   &.open {
-      background-color: rgba(255, 255, 255, 100%);
       display: block;
       height: 100vh;
       right: 0;