up

src/app/app.module.ts

@@ -13,6 +13,8 @@ import { OutputComponent } from './output/output.component';
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+
 
 
 @NgModule({
@@ -31,7 +33,8 @@ import { MatButtonModule } from '@angular/material/button';
     MatSelectModule,
     FormsModule,
     MatIconModule,
-    MatButtonModule
+    MatButtonModule,
+    MatSlideToggleModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/header/header.component.html

@@ -1,3 +1,7 @@
-<div class="header">
+<div [ngClass]="[mode]" class="header">
+    <div>
         <h1>Ipv4 Converter</h1>
+        <mat-slide-toggle class="toggle" (toggleChange)="stylemode()">{{toggleText}} </mat-slide-toggle>
+    </div>
+
 </div>

src/app/header/header.component.scss

@@ -1,10 +1,34 @@
 .header {
     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.10);
     font-size: 30px;
+    display: flex;
+    flex-direction: column;
 
 }
 
+.toggle {
+    margin-bottom: 15px;
+}
+
 .logo {
     height: 70px;
     margin-left: 20px;
 }
+
+.body {
+    margin: 0;
+    font-family: Roboto, "Helvetica Neue", sans-serif;
+    background-color: white;
+
+}
+
+.bodydark {
+
+    background-color: gray;
+
+    h1 {
+        color: white;
+    }
+
+
+}

src/app/header/header.component.ts

@@ -3,14 +3,29 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
+  styleUrls: ['./header.component.scss', '../../styles.scss']
 })
 export class HeaderComponent implements OnInit {
-
+  toggle = false;
+  toggleText = "Daymode"
+  mode = 'body'
   constructor() {
 
 
 
+  }
+  stylemode() {
+    switch (this.toggle) {
+      case true:
+        this.toggle = false;
+        this.toggleText = "Daymode"
+        this.mode = "body"
+        break;
+      case false:
+        this.toggle = true;
+        this.toggleText = "Darkmode"
+        this.mode = 'bodydark'
+    }
   }
 
   ngOnInit(): void {

src/app/input/input.component.html

@@ -1,9 +1,8 @@
-<div class="input">
+<div class="flexcontainer">
     <mat-form-field class="input_field" appearance="fill">
         <mat-label>IPv4</mat-label>
         <input matInput [(ngModel)]="ipv4_eingabe">
     </mat-form-field>
-
     <mat-form-field class="select" appearance="fill">
         <mat-label>Prefix</mat-label>
         <mat-select [(ngModel)]="prefix_selection">

src/app/input/input.component.scss

@@ -1,12 +1,12 @@
 .input_field {
 
     height: 58px;
-    min-width: 300px;
+    min-width: 50px;
     max-width: 1000px;
     width: auto;
-    margin-top: 15px;
-    margin-right: 12px;
+
     margin-left: 5px;
+    margin-right: 15px;
     border: 1px solid rgba(0, 0, 0, 0.30);
     border-radius: 10px;
 
@@ -15,11 +15,20 @@
 .select {
     min-width: 50px;
     max-width: 100px;
+    margin-top: 20px;
+    margin-right: 15px;
     width: auto;
-    margin-top: 15px;
-    margin-right: 12px;
+
+
 }
 
 .button {
     padding-top: 10px;
 }
+
+.flexcontainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+}

src/app/output/output.component.scss

@@ -1,7 +1,6 @@
 .card {
     min-height: 40px;
     max-height: 250px;
-    background-color: white;
     min-width: 300px;
     max-width: auto;
     width: auto;
@@ -13,6 +12,7 @@
     padding-top: 0px;
     margin-bottom: 10px;
     margin-left: 5px;
+    margin-right: 5px;
 
 }
 
@@ -26,3 +26,7 @@
     width: 20px;
     margin-right: 100px;
 }
+
+body {
+    background-color: black;
+}

src/styles.scss

@@ -38,4 +38,5 @@ body {
 body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
+
 }