Fix darkTheme in several components

src/app/app.component.scss

@@ -4,5 +4,3 @@
   padding: 4%;
   background-color:var(--background-color);
 }
-
-

src/app/components/creator/_dialogs/content-edit/content-edit.component.scss

@@ -9,8 +9,8 @@ textarea {
 }
 
 mat-row {
-  background-color: var(--mat-row);
-  border-color: var(--mat-row);
+  background-color: var(--dialog-bg);
+  border-color: var(--dialog-bg);
 }
 
 h4 {

src/app/components/creator/content-choice-creator/content-choice-creator.component.html

@@ -13,7 +13,7 @@
     <ng-container matColumnDef="label">
       <mat-header-cell *matHeaderCellDef>{{ 'content.answer' | translate }}</mat-header-cell>
       <mat-cell *matCellDef="let answer">
-        <mat-checkbox color="primary" (click)="switchValue(answer.answerOption.label)" [(ngModel)]="answer.correct"
+        <mat-checkbox (click)="switchValue(answer.answerOption.label)" [(ngModel)]="answer.correct"
                       [checked]="answer.correct"
                       name="{{ answer.answerOption.label }}">{{ answer.answerOption.label }}
         </mat-checkbox>

src/app/components/creator/content-choice-creator/content-choice-creator.component.scss

@@ -10,6 +10,10 @@ mat-row {
   background-color: var(--content-creator-row);
 }
 
+.mat-checkbox {
+  color: var(--text-1) !important;
+}
+
 .addIcon {
   line-height: 100%;
   height: 100% !important;

src/app/components/creator/content-list/content-list.component.html

@@ -36,9 +36,9 @@
     </mat-grid-list>
     <mat-divider></mat-divider>
     <mat-card-content>
-      <mat-expansion-panel *ngFor="let content of contents; index as i">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
+      <mat-expansion-panel *ngFor="let content of contents; index as i" class="matPanel">
+        <mat-expansion-panel-header class="matPanelListHeader">
+          <mat-panel-title class="panelTitle">
               {{ labels[i] }}
           </mat-panel-title>
           <button mat-icon-button color="accent" (click)="editContent(content);$event.stopPropagation();"
@@ -50,7 +50,7 @@
             <mat-icon>delete_forever</mat-icon>
           </button>
         </mat-expansion-panel-header>
-        <mat-panel-description>
+        <mat-panel-description class="panelTitle">
           {{ content.body }}
         </mat-panel-description>
       </mat-expansion-panel>

src/app/components/creator/content-list/content-list.component.scss

 mat-card {
   width: 800px;
   max-width: 90%;
-  background-color:var(--content-mat-card);
+  background-color: var(--content-mat-card)!important;
 }
 
 mat-card-content > :first-child {
@@ -21,17 +21,26 @@ mat-panel-title {
 }
 
 mat-expansion-panel-header {
-  background-color: var(--content-mat-expansion-panel) !important;
+  background-color: var(--content-group-card) !important;
   padding-left: 3%;
   padding-right: 3%;
+  word-break: break-all;
 }
 
-.mat-expansion-panel-header-title {
-  word-break: break-all;
+.matPanel {
+  background-color: var(--content-group-card);
+  margin-bottom: 5px;
+  color: black!important;
+}
+
+.panelTitle {
+  width: 8% !important;
+  color: black !important;
 }
 
 h2 {
   font-size: larger;
+  color: black !important;
 }
 
 .actionButton {

src/app/components/creator/room-creator-page/room-creator-page.component.html

-<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill [ngClass]="themeClass">
   <div fxLayout="row" fxLayoutAlign="center">
     <mat-progress-spinner *ngIf="isLoading" color="accent" mode="indeterminate"></mat-progress-spinner>
     <mat-card *ngIf="room">

src/app/components/creator/room-creator-page/room-creator-page.component.scss

@@ -40,19 +40,22 @@ mat-tooltip-component {
 
 p {
   font-size: medium;
+  color: var(--text-2)!important;
 }
 
+h2 {
+   font-size: large;
+   color: var(--text-1)!important;
+ }
+
 h3 {
   font-size: larger;
+  color: var(--text-3)!important;
 }
 
 h4 {
   font-size: medium;
-  color: mat-color($arsnova-primary, 300);
-}
-
-h2 {
-  font-size: large;
+  color: var(--text-1)!important;
 }
 
 mat-card-header {

src/app/components/creator/room-creator-page/room-creator-page.component.ts

@@ -19,6 +19,7 @@ import { LanguageService } from '../../../services/util/language.service';
 export class RoomCreatorPageComponent extends RoomPageComponent implements OnInit {
   room: Room;
   updRoom: Room;
+  themeClass = localStorage.getItem('classNameOfTheme');
 
   constructor(protected roomService: RoomService,
               protected notification: NotificationService,

src/app/components/participant/room-participant-page/room-participant-page.component.html

-<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill [ngClass]="themeClass">
   <div fxLayout="row" fxLayoutAlign="center">
     <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
     <mat-card *ngIf="room">

src/app/components/participant/room-participant-page/room-participant-page.component.scss

@@ -32,19 +32,22 @@ button {
 
 p {
   font-size: medium;
+  color: var(--text-2)!important;
+}
+
+h2 {
+  font-size: large;
+  color: var(--text-1)!important;
 }
 
 h3 {
   font-size: larger;
+  color: var(--text-3)!important;
 }
 
 h4 {
   font-size: medium;
-  color: mat-color($arsnova-primary, 300);
-}
-
-h2 {
-  font-size: large;
+  color: var(--text-1)!important;
 }
 
 mat-card-header {

src/app/components/participant/room-participant-page/room-participant-page.component.ts

@@ -15,6 +15,7 @@ export class RoomParticipantPageComponent implements OnInit {
 
   room: Room;
   isLoading = true;
+  themeClass = localStorage.getItem('classNameOfTheme');
 
   constructor(private location: Location,
               private roomService: RoomService,

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

@@ -15,9 +15,9 @@
     <mat-icon class="add-icon">add_circle</mat-icon>
   </button>
 </div>
-<mat-card class="outer-card" *ngIf="hideCommentsList">
-  <app-comment *ngFor="let current of filteredComments" [comment]="current"></app-comment>
+<mat-card id="outer-card" *ngIf="hideCommentsList">
+  <app-comment *ngFor="let current of filteredComments" [comment]="current"> </app-comment>
+</mat-card>
+<mat-card *ngIf="!hideCommentsList">
+  <app-comment *ngFor="let current of comments | orderBy: 'score'" [comment]="current"> </app-comment>
 </mat-card>
-<mat-card class="outer-card" *ngIf="!hideCommentsList">
-  <app-comment *ngFor="let current of comments | orderBy: 'score'" [comment]="current"></app-comment>
-</mat-card>
\ No newline at end of file

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

-mat-card {
+#outer-card {
   margin-bottom: 10px;
   background-color: var(--comment-list-bg);
 }

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

-<mat-card class="card-container" [@slide]>
+<mat-card id="comment-card" [@slide]>
     <div fxLayout="column">
       <div fxLayout="row">
         <span class="fill-remaining-space"></span>
@@ -34,5 +34,4 @@
         </div>
       </div>
     </div>
-  </mat-card>  
-
+  </mat-card>

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

-mat-card {
+#comment-card {
   margin-bottom: 20px;
   background-color: var(--comment-mat-card);
   cursor: pointer;
@@ -56,12 +56,6 @@ mat-toolbar {
   color: var(--not-favorite-icon);
 }
 
-.proffessor-icon {
-  background-size: cover;
-  margin-right: 10px;
-  margin-top: 10px;
-}
-
 h2 {
   text-align: center;
   margin: 0;

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

 @import '../../../../theme/default-Theme/_variables.scss';
 
 .mat-card {
-  background-color: var(--content-group-card);
+  background-color: var(--content-group-card) !important;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   position: relative;
@@ -14,7 +14,7 @@
 
   &:hover {
     cursor: pointer;
-    background-color: mat-color($arsnova-primary, 200);
+    background-color: var(--content-group-card-hover) !important;
     transform: translateZ(20px);
     transform: translateY(-5px);
     transform: scaleY(1.1);

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

 <footer>
-  <mat-toolbar>
+  <mat-toolbar id="footer-toolbar">
     <button mat-button (click)="navToBlog()">
       <mat-icon>notes</mat-icon>
       Blog

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

@@ -2,7 +2,7 @@ footer {
   overflow-y: auto;
 }
 
-mat-toolbar {
+#footer-toolbar {
   background-color: var(--footer-bg-color);
   height: auto;
 

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

@@ -7,7 +7,6 @@
     <span *ngIf="router.url !== '/home'" class="app-title" (click)="goToHomepage()">ARSnova</span>
     <span class="fill-remaining-space"></span>
 
-
     <mat-menu #themeMenu="matMenu" [overlapTrigger]="false">
       <button mat-menu-item (click)="changeTheme('')">{{ 'default' | translate }}</button>
       <button mat-menu-item (click)="changeTheme('dark')">{{ 'dark' | translate }}</button>
@@ -56,8 +55,8 @@
       <mat-icon>account_box</mat-icon>
     </button>
     <button mat-icon-button *ngIf="user" [matMenuTriggerFor]="appMenu">
-      <mat-icon *ngIf="user.role === 1" aria-label="Example icon-button with a heart icon" color="accent">record_voice_over</mat-icon>
-      <mat-icon *ngIf="user.role === 0" aria-label="Example icon-button with a heart icon" color="accent">supervisor_account</mat-icon>
+      <mat-icon *ngIf="user.role === 1" aria-label="Example icon-button with a heart icon">record_voice_over</mat-icon>
+      <mat-icon *ngIf="user.role === 0" aria-label="Example icon-button with a heart icon">supervisor_account</mat-icon>
     </button>
   </mat-toolbar-row>
 </mat-toolbar>