THIS is the real dark mode.

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

@@ -1,9 +1,9 @@
-<div [ngClass]="{selectwrapper: true, error: step.error}">
+<div [ngClass]="{select_wrapper: true, error: step.error}">
   <div class="arrow_box">
-    <select class="select" (change)="convert($event)">
+    <select (change)="convert($event)">
       <option id="undefined">Select conversion ...</option>
       @for (c of converters; track c.getId()) {
-        <option class="option" id="{{c.getId()}}">{{ c.getDisplayname() }}</option>
+        <option id="{{c.getId()}}">{{ c.getDisplayname() }}</option>
       }
     </select>
   </div>

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

@@ -1,74 +1,84 @@
-.selectwrapper {
+.select_wrapper {
   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;
+select {
+  background-color: #222;
   border: none;
-  color: #000;
+  color: #eee;
   font-family: "ABeeZee", sans-serif;
   margin: 0;
   padding: 0.5em;
+  transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
+
+  &:focus, &:hover {
+    background-color: #333;
+    color: #fff;
+  }
 }
 
 .arrow_box {
+  border: 1px solid #888;
   position: relative;
-  background: #fff;
-  border: 1px solid #aaa;
-  &:focus {
-    border-color: #888;
-  }
-  &:hover {
-    border-color: #333;
-  }
+  transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
+
   &:after, &:before {
-    top: 100%;
-    left: 50%;
     border: solid transparent;
     content: " ";
     height: 0;
-    width: 0;
-    position: absolute;
+    left: 50%;
     pointer-events: none;
+    position: absolute;
+    top: 100%;
+    transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
+    width: 0;
   }
+
   &:after {
     border-color: rgba(255, 255, 255, 0);
-    border-top-color: #fff;
+    border-top-color: #222;
     border-width: 1em;
     margin-left: -1em;
   }
+
   &:before {
-    border-color: rgba(170, 170, 170, 0);
-    border-top-color: #aaa;
+    border-top-color: #888;
     border-width: calc(1em + 1px);
     margin-left: calc(-1em - 1px);
   }
-  &:focus:before {
-    border-color: rgba(136, 136, 136, 0);
-    border-top-color: #888;
+
+  &:has(>select:focus, >select:hover) {
+    &:after {
+      border-top-color: #333;
+    }
+
+    &:before {
+      border-top-color: #bbb;
+    }
   }
-  &:hover:before {
-    border-color: rgba(51, 51, 51, 0);
-    border-top-color: #333;
+
+  &:hover {
+    border-color: #bbb;
   }
-  .selectwrapper > & {
+
+  .select_wrapper > & {
     display: inline-block;
   }
 }
-
-.option {
-  /*    font-family: "ABeeZee", sans-serif;*/
-}

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

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;