Dark mode, work in progress.

src/app/converter-selector/converter-selector.component.scss

@@ -2,38 +2,43 @@
   margin: 0 0 1em 0;
   padding: 0;
   text-align: center;
+
   &.error {
     > .arrow_box {
       border-color: red;
+
       &:before {
         border-top-color: red;
       }
     }
+
     select {
       color: red;
+      transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
     }
   }
 }
 
 .select {
-  background-color: #fff;
+  background-color: #eee;
   border: none;
-  color: #000;
+  color: #111;
   font-family: "ABeeZee", sans-serif;
   margin: 0;
   padding: 0.5em;
+
+  &:focus, &:hover {
+    background-color: #fff;
+    color: #000;
+  }
+
+  transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
 }
 
 .arrow_box {
   position: relative;
-  background: #fff;
-  border: 1px solid #aaa;
-  &:focus {
-    border-color: #888;
-  }
-  &:hover {
-    border-color: #333;
-  }
+  border: 1px solid transparent;
+
   &:after, &:before {
     top: 100%;
     left: 50%;
@@ -43,32 +48,28 @@
     width: 0;
     position: absolute;
     pointer-events: none;
+    transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
   }
+
   &:after {
     border-color: rgba(255, 255, 255, 0);
-    border-top-color: #fff;
+    border-top-color: #eee;
     border-width: 1em;
     margin-left: -1em;
   }
+
   &:before {
-    border-color: rgba(170, 170, 170, 0);
-    border-top-color: #aaa;
     border-width: calc(1em + 1px);
     margin-left: calc(-1em - 1px);
   }
-  &:focus:before {
-    border-color: rgba(136, 136, 136, 0);
-    border-top-color: #888;
-  }
-  &:hover:before {
-    border-color: rgba(51, 51, 51, 0);
-    border-top-color: #333;
+
+  &:has(>.select:focus, >.select:hover):after {
+    border-top-color: #fff;
   }
+
   .selectwrapper > & {
     display: inline-block;
   }
-}
 
-.option {
-  /*    font-family: "ABeeZee", sans-serif;*/
+  transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
 }

src/app/text-input-field/text-input-field.component.html

@@ -1,4 +1,2 @@
-<div class="textwrapper arrow_box">
-    <textarea class="textinput" (keyup)="update(step)" placeholder="Please enter your input ..."
-              [(ngModel)]="step.content">{{step.content}}</textarea>
-</div>
+<textarea (keyup)="update(step)" placeholder="Please enter your input ..."
+          [(ngModel)]="step.content">{{ step.content }}</textarea>

src/app/text-input-field/text-input-field.component.scss

@@ -1,69 +1,44 @@
-.textwrapper {
+:host {
+  display: block;
+  border: none;
   margin: 0 0 1em 0;
   padding: 0 1em 0 0;
-}
-
-.arrow_box {
   position: relative;
-  background: #fff;
-  border: 1px solid #aaa;
-  &:focus {
-    border-color: #888;
-  }
-  &:hover {
-    border-color: #333;
-  }
-  &:after, &:before {
+
+  &:after {
     top: 100%;
     left: 50%;
-    border: solid transparent;
+    border: 1em solid transparent;
+    border-top-color: #eee;
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     pointer-events: none;
-  }
-  &:after {
-    border-color: rgba(255, 255, 255, 0);
-    border-top-color: #fff;
-    border-width: 1em;
     margin-left: -1em;
+    transition: border-top-color ease-in-out 200ms;
   }
-  &:before {
-    border-color: rgba(170, 170, 170, 0);
-    border-top-color: #aaa;
-    border-width: calc(1em + 1px);
-    margin-left: calc(-1em - 1px);
-  }
-  &:focus:before {
-    border-color: rgba(136, 136, 136, 0);
-    border-top-color: #888;
-  }
-  &:hover:before {
-    border-color: rgba(51, 51, 51, 0);
-    border-top-color: #333;
+
+  &:has(>textarea:focus, >textarea:hover):after {
+    border-top-color: #fff;
   }
 }
 
-.textinput {
-  background-color: #fff;
+textarea {
+  background-color: #eee;
   border: none;
-  color: #000;
-  font-family: "Free Monospaced", monospace;
+  color: #111;
+  font-family: "Liberation Mono", monospace;
   height: 10em;
   margin: 0;
   padding: 0.5em;
   resize: vertical;
   width: 100%;
-  &:focus {
-    border-color: #888;
-  }
-  &:hover {
-    border-color: #333;
-  }
-}
 
-.errormessage {
-  color: red;
-  text-align: center;
+  &:focus, &:hover {
+    background-color: #fff;
+    color: #000;
+  }
+
+  transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
 }

src/styles.scss

@@ -21,9 +21,16 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: "Liberation Mono";
+  src: url("assets/fonts/liberationmono-regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
 body {
-  background-color: white;
-  color: black;
+  background-color: #222;
+  color: #eee;
   font-family: "ABeeZee", sans-serif;
   margin: 0;
   padding: 1em 0 0 0;