Make nav bar black in dark mode

src/app/app.module.ts

@@ -70,6 +70,7 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
 
 // import logo from 'src/assets/gv-new-logo.svg';
 import logo from '!!raw-loader!./gv-new-logo-white.svg';
+import logo_green from '!!raw-loader!./gv-new-logo.svg';
 
 
 const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
@@ -163,5 +164,7 @@ export class AppModule {
   constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
     iconRegistry.addSvgIconLiteral(
       'logo', sanitizer.bypassSecurityTrustHtml(logo));
+    iconRegistry.addSvgIconLiteral(
+      'logo_green', sanitizer.bypassSecurityTrustHtml(logo_green));
   }
  }

src/app/components/about/about.component.html

@@ -5,7 +5,7 @@
   <br> <br> <br> <br> <br>
   <h1 class="mat-display-3">Keep it clean and green!</h1>
   <button mat-icon-button>
-    <mat-icon class="big-icon">keyboard_arrow_down</mat-icon>
+    <mat-icon class="big-icon" color="primary">keyboard_arrow_down</mat-icon>
   </button>
 </div>
 <div id="text1" style="text-align: center;">
@@ -65,8 +65,8 @@
 <div id="text2" style="text-align: center;">
   <p class="mat-display-1">We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p>
   <p class="mat-display-1">You aren't part of greenvironment yet? - join us now!</p>
-  <a mat-raised-button class="link-button" routerLink="/register" >Register</a>
+  <a mat-stroked-button color="primary" class="link-button" routerLink="/register" >Register</a>
   <br>
-  <a mat-raised-button class="link-button" routerLink="/login">Login</a>
+  <a mat-stroked-button color="primary" class="link-button" routerLink="/login">Login</a>
 </div>
 </div>

src/app/components/about/about.component.sass

@@ -11,7 +11,6 @@
   padding: 2em
   max-width: 100%
   min-height: 50%
-  background-color: mat-color($primary)
 
 #text1
   padding: 2em

src/app/components/feed/postlist/postlist.component.sass

@@ -12,6 +12,8 @@ $mat-card-header-size: 40px !default
         margin-top: 10px
     .mat-card-subtitle 
         display: contents
+    .mat-card-content
+        overflow: auto
     a:hover
         cursor: pointer
     #button-box

src/app/components/imprint/imprint.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar color="primary">Imprint</mat-toolbar>
+<mat-toolbar>Imprint</mat-toolbar>
 <div id="imprint">
   <p>The greenvironment network is being developed by the greenvironment team</p>
   <h2>Contact</h2>

src/app/components/main-navigation/main-navigation.component.html

@@ -7,8 +7,8 @@
       fxShow="true" fxHide.gt-sm="true"
       fixedInViewport="false"
       autoFocus="false">
-    <mat-toolbar *ngIf="!loggedIn">Menu</mat-toolbar>
+    <mat-toolbar class="menu-bar" *ngIf="!loggedIn">Menu</mat-toolbar>
-    <mat-toolbar *ngIf="loggedIn" id="name-bar">
+    <mat-toolbar *ngIf="loggedIn" class="menu-bar">
         <div mat-card-avatar>
           <img class="profile-picture" [src]="user.profilePicture"/>  
         </div>
@@ -32,7 +32,7 @@
 
   <!-- TOOLBAR -->
   <mat-sidenav-content>
-    <mat-toolbar color="primary" class="mat-elevation-z4">
+    <mat-toolbar color="accent" class="mat-elevation-z4">
 
       <!--content on SMALL SCREEN-->
       <button
@@ -43,9 +43,10 @@
         fxShow="true" fxHide.gt-sm="true">
         <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
       </button>
-      <mat-icon svgIcon="logo" style="min-width: 35px;" routerLink="" class="link"></mat-icon>
+      <mat-icon *ngIf="lighttheme" svgIcon="logo" style="min-width: 35px;" routerLink="" class="link"></mat-icon>
+      <mat-icon *ngIf="!lighttheme" svgIcon="logo_green" style="min-width: 35px;" routerLink="" class="link"></mat-icon>
       <span routerLink="" class="link">Greenvironment</span>
-      <nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true" routerLinkActive #rla="">
+      <nav mat-tab-nav-bar backgroundColor="accent" color="accent" fxShow="true" fxHide.lt-md="true" routerLinkActive #rla="">
         <div *ngIf="loggedIn">
           <a mat-tab-link class="link"
           *ngFor="let link of navLinksLoggedIn"

src/app/components/main-navigation/main-navigation.component.sass

@@ -4,8 +4,8 @@
 .sidenav
   width: 200px
 
-#name-bar
+.menu-bar
-  padding: 0 4px
+  position: inherit !important
 .mat-card-avatar
   display: contents
 .profile-picture
@@ -28,7 +28,7 @@
 .sidenav .mat-toolbar
   //background: inherit
 
-.mat-toolbar.mat-primary
+.mat-toolbar
   height: 56px
   position: fixed
   //position: sticky
@@ -41,6 +41,7 @@
   .mat-tab-link
     height: 56px
 
+
 .mat-sidenav-content
   padding-top: 56px
 

src/app/gv-new-logo.svg

@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64px"
+   height="64px"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="SVGRoot"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="gv-new-logo.svg">
+  <defs
+     id="defs3412">
+    <linearGradient
+       id="linearGradient4054"
+       inkscape:collect="always">
+      <stop
+         id="stop4050"
+         offset="0"
+         style="stop-color:#00c088;stop-opacity:1" />
+      <stop
+         id="stop4052"
+         offset="1"
+         style="stop-color:#08ff21;stop-opacity:0.97468352" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4048"
+       inkscape:collect="always">
+      <stop
+         id="stop4044"
+         offset="0"
+         style="stop-color:#00c088;stop-opacity:1" />
+      <stop
+         id="stop4046"
+         offset="1"
+         style="stop-color:#08ff21;stop-opacity:0.97468352" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient4005">
+      <stop
+         style="stop-color:#00c088;stop-opacity:1"
+         offset="0"
+         id="stop4001" />
+      <stop
+         style="stop-color:#08ff21;stop-opacity:0.95358652"
+         offset="1"
+         id="stop4003" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4054"
+       id="linearGradient4007"
+       x1="13.48775"
+       y1="12.73616"
+       x2="52.052452"
+       y2="47.384392"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4048"
+       id="linearGradient4017"
+       x1="14.551315"
+       y1="10.077048"
+       x2="51.051678"
+       y2="51.531181"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4005"
+       id="linearGradient4025"
+       x1="13.637479"
+       y1="15.156103"
+       x2="52.776852"
+       y2="46.975906"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="8"
+     inkscape:cx="-4.045925"
+     inkscape:cy="41.653992"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer2"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1003"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:grid-bbox="true" />
+  <metadata
+     id="metadata3415">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Layer 2"
+     style="display:inline">
+    <path
+       style="fill:none;stroke:url(#linearGradient4007);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 59.638425,10.982918 c -2.598034,1.65974 -5.164767,1.536797 -6.79245,1.598268 -1.627684,0.06147 -7.89147,-0.248912 -10.548644,-0.307359 -2.031158,-0.04467 -10.408921,-0.634292 -18.029729,3.227272 -6.189793,3.136452 -10.030686,7.78418 -11.299883,11.09567 -1.095556,2.858442 -1.721588,5.317315 -1.095556,9.896969 0.334798,2.449172 0.916715,4.631314 0.829032,5.615672 -0.07744,0.869314 0.04741,1.638006 -2.331509,4.035408 -2.3789231,2.397403 -7.5630585,6.702992 -7.5630585,6.702992"
+       id="path3986"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="csssssssc" />
+    <path
+       style="fill:none;stroke:url(#linearGradient4017);stroke-width:2.81999993;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 17.040936,45.75125 c 0,0 5.71124,1.10058 9.863991,0.923511 4.152753,-0.177069 10.503177,-1.963537 14.640251,-4.074381 2.654809,-1.354554 8.010685,-4.452479 10.623857,-9.671077 1.545586,-3.086589 2.392221,-6.933871 2.615983,-8.836099 0.374688,-3.185266 0.215574,-5.492636 0.858958,-6.968217"
+       id="path3988"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cssssc" />
+    <path
+       style="fill:none;stroke:url(#linearGradient4025);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 16.515165,41.68934 c 0,0 3.942744,-4.483925 8.75,-9 3.732038,-3.505984 5.757466,-5.519577 10.967068,-8.580806 3.85598,-2.265823 12.426015,-6.277728 15.87316,-7.736136"
+       id="path3990"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cssc" />
+  </g>
+</svg>

src/styles/greenvironment-material-theme.scss

@@ -1,50 +1,50 @@
 @import '~@angular/material/theming';
 // Plus imports for other components in your app.
-
+$mat-black: (
-// Include the common styles for Angular Material. We include this here so that you only
+    50 : #e4e4e4,
-// have to load a single css file for Angular Material in your app.
+    100 : #bcbcbc,
-// Be sure that you only ever include this mixin once!
+    200 : #909090,
-@include mat-core();
+    300 : #646464,
-
+    400 : #424242,
-$md-gvgreen: (
+    500 : #212121,
-    50 : #e0f7e7,
+    600 : #1d1d1d,
-    100 : #b3ebc3,
+    700 : #181818,
-    200 : #80de9c,
+    800 : #141414,
-    300 : #4dd174,
+    900 : #0b0b0b,
-    400 : #26c756,
+    A100 : #e76c6c,
-    500 : #00bd38,
+    A200 : #e04040,
-    600 : #00b732,
+    A400 : #ec0000,
-    700 : #00ae2b,
+    A700 : #d30000,
-    800 : #00a624,
-    900 : #009817,
-    A100 : #c3ffc9,
-    A200 : #90ff9a,
-    A400 : #5dff6b,
-    A700 : #44ff54,
     contrast: (
         50 : #000000,
         100 : #000000,
         200 : #000000,
-        300 : #000000,
+        300 : #ffffff,
-        400 : #000000,
+        400 : #ffffff,
         500 : #ffffff,
         600 : #ffffff,
         700 : #ffffff,
         800 : #ffffff,
         900 : #ffffff,
         A100 : #000000,
-        A200 : #000000,
+        A200 : #ffffff,
-        A400 : #000000,
+        A400 : #ffffff,
-        A700 : #000000,
+        A700 : #ffffff,
     )
 );
 
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
 $primary: mat-palette($mat-light-green);
 $primary-color: mat-color($primary);
-$accent:  mat-palette($mat-brown, A200, A100, A400);
+$accent:  mat-palette($mat-light-green);
 // The warn palette is optional (defaults to red).
 $warn:    mat-palette($mat-red);
 
@@ -61,7 +61,7 @@ $light-theme: map_merge($light-theme, (background: $background));
 
 
 $dark-primary: mat-palette($mat-light-green);
-$dark-accent:  mat-palette($mat-brown, A200, A100, A400);
+$dark-accent:  mat-palette($mat-black);
 $dark-warn:    mat-palette($mat-red);
 
 // Create the theme object (a Sass map containing all of the palettes).