Several color fixes

src/app/components/home/home-page/home-page.component.scss

-@import '../../../../styles';
-
 .outer {
   width: 90%;
   max-width: 500px;
@@ -12,7 +10,7 @@
   font-weight: bold;
   text-align: center;
   letter-spacing: 10px;
-  color: mat-color($arsnova-primary,500);
+  color: var(--primary);
   animation: moveInLeft 2s ease-out;
   padding-top: 10px;
 }
@@ -23,7 +21,7 @@
   font-size: 60%;
   text-align: center;
   letter-spacing: 10px;
-  color: mat-color($arsnova-accent,500);
+  color: var(--secondary-variant);
   animation: moveInRight 1s ease-out;
 }
 

src/app/components/home/new-landing/new-landing.component.scss

@@ -4,11 +4,13 @@
   border-radius: 32px;
   margin-bottom: 5%;
   font-size: large;
-  background-color: var(--primary);
+  background-color: var(--secondary);
+  color: var(--on-secondary);
 }
 
 .add {
   transform: scale(1.4);
   padding-right: 5px;
   padding-left: 5px;
+  color: var(--on-secondary);
 }

src/app/components/shared/comment/comment.component.html

 <mat-card id="comment-card" [ngClass]="{'highlighted': comment.highlighted,
                                         '': !comment.highlighted}" [@slide]>
-    <div fxLayout="column">
-      <div fxLayout="row">
-        <span class="fill-remaining-space"></span>
-      <div id="date">
+  <div fxLayout="column">
+    <div fxLayout="row">
+      <span class="fill-remaining-space"></span>
+      <div class="date">
         <div *ngIf="language === 'de'; else englishDate">
           {{comment.timestamp | date: ' HH:mm:ss '}}Uhr,{{comment.timestamp | date: ' M.d.yy'}}
         </div>
@@ -11,29 +11,35 @@
           {{comment.timestamp | date: 'h:mm:ss a, M/d/yy'}}
         </ng-template>
       </div>
-      <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
+      <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)"
+              [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
         <mat-icon [ngClass]="{true : 'correct-icon', false: 'not-marked'}[comment.correct]">check_circle</mat-icon>
       </button>
-      <button mat-icon-button *ngIf="comment.favorite || !isStudent" [disabled]="isStudent" (click)="setFavorite(comment)" [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
+      <button mat-icon-button *ngIf="comment.favorite || !isStudent" [disabled]="isStudent"
+              (click)="setFavorite(comment)"
+              [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
         <mat-icon [ngClass]="{true: 'favorite-icon', false: 'not-marked'}[comment.favorite]">favorite_border</mat-icon>
-        </button>
-        <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)" [matTooltip]="comment.read ? 'Mark  as unread' : 'Mark as read'">
+      </button>
+      <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)"
+              [matTooltip]="comment.read ? 'Mark  as unread' : 'Mark as read'">
         <mat-icon class="icon" [ngClass]="{'read-icon': comment.read,
-                                            'not-marked' : !comment.read}">visibility</mat-icon>
+                                            'not-marked' : !comment.read}">visibility
+        </mat-icon>
+      </button>
+    </div>
+    <div fxLayout="row">
+      <div class="body" (click)="openPresentDialog(comment)">{{comment.body}}</div>
+      <span class="fill-remaining-space" (click)="openPresentDialog(comment)"></span>
+      <div fxLayout="column" (tap)="startAnimation('rubberBand')" [@rubberBand]="animationState"
+           (@rubberBand.done)="resetAnimationState()">
+        <button mat-icon-button [disabled]="!isStudent" (click)="voteUp(comment)">
+          <mat-icon class="voting-icon" [ngClass]="{'upVoted' : hasVoted === 1}">keyboard_arrow_up</mat-icon>
+        </button>
+        <h2>{{comment.score}}</h2>
+        <button mat-icon-button [disabled]="!isStudent" (click)="voteDown(comment)">
+          <mat-icon class="voting-icon" [ngClass]="{'downVoted' : hasVoted === -1}">keyboard_arrow_down</mat-icon>
         </button>
-      </div>
-      <div fxLayout="row">
-        <div class="body" (click)="openPresentDialog(comment)">{{comment.body}}</div>
-        <span class="fill-remaining-space" (click)="openPresentDialog(comment)"></span>
-        <div fxLayout="column" (tap)="startAnimation('rubberBand')" [@rubberBand]="animationState" (@rubberBand.done)="resetAnimationState()">
-          <button mat-icon-button [disabled]="!isStudent" (click)="voteUp(comment)" >
-            <mat-icon class="voting-icon" [ngClass]="{'upVoted' : hasVoted === 1}">keyboard_arrow_up</mat-icon>
-          </button>
-          <h2>{{comment.score}}</h2>
-          <button mat-icon-button [disabled]="!isStudent" (click)="voteDown(comment)">
-            <mat-icon class="voting-icon" [ngClass]="{'downVoted' : hasVoted === -1}">keyboard_arrow_down</mat-icon>
-          </button>
-        </div>
       </div>
     </div>
-  </mat-card>
+  </div>
+</mat-card>

src/app/components/shared/comment/comment.component.scss

@@ -17,6 +17,7 @@ mat-card-content > :first-child {
   height: 35px;
   font-size: 35px;
   line-height: 100% !important;
+  color: var(--on-surface)
 }
 
 .upVoted {
@@ -46,6 +47,7 @@ mat-card-content > :first-child {
 h2 {
   text-align: center;
   margin: 0;
+  color: var(--on-surface)
 }
 
 .body {
@@ -57,23 +59,19 @@ h2 {
   overflow: auto;
   padding-left: 2%;
   padding-right: 2%;
+  color: var(--on-surface)
 }
 
 .mat-icon {
   transform: scale(1.2);
 }
 
-#date {
+.date {
   padding-top: 10px;
   margin-left: 2%;
   opacity: 0.4;
   position: absolute;
-}
-
-.date {
-  position: fixed;
-  bottom: 0;
-  left: 0;
+  color: var(--on-surface)
 }
 
 .highlighted {

src/app/components/shared/content-groups/content-groups.component.scss

 @import '../../../../theme/default-Theme/_variables.scss';
 
 #contentGroup {
-  background-color: var(--surface);
+  background-color: var(--primary);
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   position: relative;
@@ -11,10 +11,12 @@
   margin-top: 10px;
   max-height: 50px;
   padding: 5px;
+  color: var(--on-primary);
 
   &:hover {
     cursor: pointer;
-    background-color: var(--primary);
+    background-color: var(--surface);
+    color: var(--on-surface);
     transform: translateZ(20px);
     transform: translateY(-5px);
     transform: scaleY(1.1);

src/app/components/shared/header/header.component.html

 <mat-toolbar>
   <mat-toolbar-row>
     <button *ngIf="router.url !== '/home'" (click)="goBack()" mat-icon-button>
-      <mat-icon aria-label="Go back">keyboard_arrow_left</mat-icon>
+      <mat-icon class="header-icons" aria-label="Go back">keyboard_arrow_left</mat-icon>
     </button>
     <span class="fill-remaining-space"></span>
     <span *ngIf="router.url !== '/home'" class="app-title" (click)="goToHomepage()">ARSnova</span>
@@ -13,7 +13,7 @@
     </mat-menu>
 
     <button mat-icon-button [matMenuTriggerFor]="themeMenu">
-      <mat-icon>palette</mat-icon>
+      <mat-icon class="header-icons">palette</mat-icon>
     </button>
 
     <mat-menu #langMenu="matMenu" [overlapTrigger]="false">
@@ -22,10 +22,10 @@
     </mat-menu>
 
     <button mat-icon-button [matMenuTriggerFor]="langMenu">
-      <mat-icon>language</mat-icon>
+      <mat-icon class="header-icons">language</mat-icon>
     </button>
 
-    <mat-menu #appMenu="matMenu" [overlapTrigger]="false">
+    <mat-menu #loginMenu="matMenu" [overlapTrigger]="false">
       <button mat-menu-item *ngIf="user && user.role === 1" routerLink="/creator">
         <mat-icon color="primary">style</mat-icon>
         <span>{{'header.my-sessions' | translate}}</span>
@@ -52,10 +52,10 @@
     </mat-menu>
 
     <button mat-icon-button *ngIf="!user" [matMenuTriggerFor]="userMenu">
-      <mat-icon>account_box</mat-icon>
+      <mat-icon class="header-icons">account_box</mat-icon>
     </button>
-    <button mat-icon-button *ngIf="user" [matMenuTriggerFor]="appMenu">
-      <mat-icon>account_box</mat-icon>
+    <button mat-icon-button *ngIf="user" [matMenuTriggerFor]="loginMenu">
+      <mat-icon class="header-icons">account_box</mat-icon>
     </button>
   </mat-toolbar-row>
 </mat-toolbar>

src/app/components/shared/header/header.component.scss

 .app-title {
   cursor: pointer;
   margin: 0 auto;
+  color: var(--on-surface);
 }
 
 mat-toolbar {
-  background-color: var(--primary);
+  background-color: var(--surface);
+}
+
+.header-icons {
+  color: var(--on-surface);
 }

src/app/components/shared/list-statistic/list-statistic.component.html

@@ -11,37 +11,37 @@
   <ng-container matColumnDef="content">
     <mat-header-cell *matHeaderCellDef> {{'statistic.content' | translate}} </mat-header-cell>
     <mat-cell *matCellDef="let cp" [ngClass]="{
-      'positiveC' : cp.percent >= status.good,
-      'okayC' : cp.percent >= status.okay && cp.percent < status.good,
-      'negativeC' : cp.percent < status.okay,
-      'emptyCC' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.content.subject}}</mat-cell>
+      'positive' : cp.percent >= status.good,
+      'okay' : cp.percent >= status.okay && cp.percent < status.good,
+      'negative' : cp.percent < status.okay,
+      'empty' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.content.subject}}</mat-cell>
   </ng-container>
 
   <ng-container matColumnDef="percentage">
     <mat-header-cell *matHeaderCellDef> {{'statistic.percentage' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let cp" [ngClass]="{
-      'positiveC' : cp.percent >= status.good,
-      'okayC' : cp.percent >= status.okay && cp.percent < status.good,
-      'negativeC' : cp.percent < status.okay,
-      'emptyC' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.percent.toFixed() + ' %'}}</mat-cell>
+      'positive' : cp.percent >= status.good,
+      'okay' : cp.percent >= status.okay && cp.percent < status.good,
+      'negative' : cp.percent < status.okay,
+      'empty' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.percent.toFixed() + ' %'}}</mat-cell>
   </ng-container>
 
   <ng-container matColumnDef="counts">
     <mat-header-cell *matHeaderCellDef> {{'statistic.answers' | translate}} </mat-header-cell>
     <mat-cell *matCellDef="let cp" [ngClass]="{
-      'positiveC' : cp.percent >= status.good,
-      'okayC' : cp.percent >= status.okay && cp.percent < status.good,
-      'negativeC' : cp.percent < status.okay,
-      'emptyC' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.counts}}</mat-cell>
+      'positive' : cp.percent >= status.good,
+      'okay' : cp.percent >= status.okay && cp.percent < status.good,
+      'negative' : cp.percent < status.okay,
+      'empty' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.counts}}</mat-cell>
   </ng-container>
 
   <ng-container matColumnDef="abstentions">
     <mat-header-cell *matHeaderCellDef> {{'statistic.abstentions' | translate}} </mat-header-cell>
     <mat-cell *matCellDef="let cp" [ngClass]="{
-      'positiveC' : cp.percent >= status.good,
-      'okayC' : cp.percent >= status.okay && cp.percent < status.good,
-      'negativeC' : cp.percent < status.okay,
-      'emptyC' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.abstentions}}</mat-cell>
+      'positive' : cp.percent >= status.good,
+      'okay' : cp.percent >= status.okay && cp.percent < status.good,
+      'negative' : cp.percent < status.okay,
+      'empty' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.abstentions}}</mat-cell>
   </ng-container>
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

src/app/components/shared/list-statistic/list-statistic.component.scss

@@ -38,37 +38,20 @@ mat-toolbar {
   background-color: var(--secondary-variant)!important;
 }
 
-.positiveC {
+.positive {
   background-color: var(--green);
 }
 
-.negativeC {
+.negative {
   background-color: var(--red);
 }
 
-.okayC {
-  background-color: var(--red);
-}
-
-.positiveP {
-  background-color: var(--green)!important;
-}
-
-.negativeP {
-  background-color: var(--red)!important;
+.okay {
+  background-color: var(--yellow);
 }
 
-.okayP {
-  background-color: var(--yellow)!important;
-}
-
-.emptyC {
+.empty {
   color: var(--grey)!important;
   background: var(--grey);
   pointer-events: none;
 }
-
-.emptyCC {
-  background: var(--grey) ;
-  pointer-events: none;
-}

src/app/components/shared/room-join/room-join.component.html

@@ -10,10 +10,10 @@
       <mat-error *ngIf="roomFormControl.hasError('required')">{{ 'home-page.please-enter' | translate}}</mat-error>
       <mat-error *ngIf="roomFormControl.hasError('pattern')">{{ 'home-page.only-numbers' | translate}}</mat-error>
     </mat-form-field>
-    <button mat-fab color="accent" type="submit">
+    <button mat-fab type="submit">
       <mat-icon>input</mat-icon>
     </button>
   </div>
 </form>
-<button mat-button class="demo" color="primary" (click)="joinDemo()">Demo Session</button>
+<button mat-button class="demo" (click)="joinDemo()">Demo Session</button>
 </div>

src/app/components/shared/room-join/room-join.component.scss

@@ -8,6 +8,7 @@ form {
 
 .demo {
   margin-bottom: 20px;
+  color: var(--on-surface);
 }
 
 mat-error {
@@ -17,6 +18,8 @@ mat-error {
 .mat-fab {
   width: 65px;
   height: 65px;
+  background-color: var(--secondary);
+  color: var(--on-secondary);
 }
 
 input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {

src/app/components/shared/room-list/room-list.component.scss

@@ -33,7 +33,7 @@ mat-panel-title {
 
 .headerTitle {
   width: 8%;
-  color: var(--primary)!important;
+  color: var(--on-secondary)!important;
 }
 
 .panelTitle {

src/theme/dark-Theme/darkTheme.const.ts

 export const dark = {
 
-  '--primary' : '#37474F',
+  '--primary' : '#009688',
   '--primary-variant': '#455a64',
 
-  '--secondary': '#FFE0B2',
+  '--secondary': '#FFCC80',
   '--secondary-variant': '#bdbdbd',
 
-  '--background': '#616161',
-  '--surface': '#757575',
+  '--background': '#424242',
+  '--surface': '#212121',
 
-  '--on-primary': '#37474f',
-  '--on-secondary': '#FFFFFF',
+  '--on-primary': '#212121',
+  '--on-secondary': '#212121',
+  '--on-background': '#FFFFFF',
+  '--on-surface': '#FFFFFF',
 
   '--green': '#AED581',
   '--red': '#FF8A80',
   '--yellow': '#FFD54F',
   '--blue': '#1E88E5',
-  '--grey': '#E0E0E0',
+  '--grey': '#BDBDBD',
   '--grey-light': '#9E9E9E',
 
   '--dialog': '#78909c',

src/theme/default-Theme/defaultTheme.const.ts

@@ -3,14 +3,16 @@ export const defaultTheme = {
   '--primary' : '#4DB6AC',
   '--primary-variant': '#80cbc4',
 
-  '--secondary': '#FFE0B2',
+  '--secondary': '#FFCC80',
   '--secondary-variant': '#fff8e1',
 
-  '--background': '#B2DFDB',
-  '--surface': '#BBDEFB',
+  '--background': '#b2dfdb',
+  '--surface': '#0288d1',
 
-  '--on-primary': '#37474f',
-  '--on-secondary': '#FFFFFF',
+  '--on-primary': '#212121',
+  '--on-secondary': '#212121',
+  '--on-background': '#212121',
+  '--on-surface': '#212121',
 
   '--green': '#AED581',
   '--red': '#FF8A80',