diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index f9a76fe6ef393186024ed7d318bf618952604e47..e960d5f7e2d28b564359a44c5b5cd4100941e64d 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -4,5 +4,3 @@
padding: 4%;
background-color:var(--background-color);
}
-
-
diff --git a/src/app/components/creator/_dialogs/content-edit/content-edit.component.scss b/src/app/components/creator/_dialogs/content-edit/content-edit.component.scss
index 0ac29857b619efcb93ce6a6e57fad5c5fac6ffe8..9b601523b0404a19cac5d410673f7c5a7ede7f62 100644
--- a/src/app/components/creator/_dialogs/content-edit/content-edit.component.scss
+++ b/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 {
diff --git a/src/app/components/creator/content-choice-creator/content-choice-creator.component.html b/src/app/components/creator/content-choice-creator/content-choice-creator.component.html
index 4b6a7d1d8255775f177e1914a3b6c85265f85031..d0c3bef729c69f04e798c2b4272084c65b1a7276 100644
--- a/src/app/components/creator/content-choice-creator/content-choice-creator.component.html
+++ b/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>
diff --git a/src/app/components/creator/content-choice-creator/content-choice-creator.component.scss b/src/app/components/creator/content-choice-creator/content-choice-creator.component.scss
index cffc26f8d4ff00d3cffc288204878d15e84e46b2..56542683d63a32bd6a50e2b8390e3a1fa266a017 100644
--- a/src/app/components/creator/content-choice-creator/content-choice-creator.component.scss
+++ b/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;
diff --git a/src/app/components/creator/content-list/content-list.component.html b/src/app/components/creator/content-list/content-list.component.html
index 933c5089885f0712fb93a5f8726a94d504fd2b19..f71335646d4ef031dba3d3d6553fb9b1fd1f7e3e 100644
--- a/src/app/components/creator/content-list/content-list.component.html
+++ b/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>
diff --git a/src/app/components/creator/content-list/content-list.component.scss b/src/app/components/creator/content-list/content-list.component.scss
index e140afc51711fd3847463b18e179200c38f0a345..5f53fedc3a0768c5c60c2b55937dba471c3641b5 100644
--- a/src/app/components/creator/content-list/content-list.component.scss
+++ b/src/app/components/creator/content-list/content-list.component.scss
@@ -1,7 +1,7 @@
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 {
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.html b/src/app/components/creator/room-creator-page/room-creator-page.component.html
index 747df67543f8cddae2d7741063a5dff44764012a..671880d5137c520ae846698f66ed5a7b1fd56ece 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.html
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.html
@@ -1,4 +1,4 @@
-<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">
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.scss b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
index b7434dc41260eb684842f79219b58a50b9fe9ce1..76845e2de3d591046ba5551c9fcef7a853a8aab3 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.scss
+++ b/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 {
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.ts b/src/app/components/creator/room-creator-page/room-creator-page.component.ts
index 0d6a23fbb87b0e1846891aed117241960511fc75..e6d39bd9feb1d936905cde97193c4f521433b4e1 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.ts
+++ b/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,
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.html b/src/app/components/participant/room-participant-page/room-participant-page.component.html
index 1688c13b407b0ee678043692e076a096f8f2b316..b1e964c10b6e743d5510f758f667dda4919e00b6 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.html
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.html
@@ -1,4 +1,4 @@
-<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">
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.scss b/src/app/components/participant/room-participant-page/room-participant-page.component.scss
index 10a40082b5d98a2aa25c32adc057c2797f6a8577..ddd917fa6f44ccf38535877f2465856aaa3f37ca 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.scss
+++ b/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 {
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.ts b/src/app/components/participant/room-participant-page/room-participant-page.component.ts
index 49f308215252343c542b3eb0629952d7f348b3a9..5f15bb311f9418403dce479e22b2aa8b707fd787 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.ts
+++ b/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,
diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index 14ecfd1f61af68c8a83afa3fa4c862346cf9f524..4b4074948355887234e6329ea41307ecf62e08aa 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/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
diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index de8b30c9350439c5b6c08ba617c77b04d27095ba..96b8599249a433f5ba90299567d39b0e1c5b9bcf 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -1,4 +1,4 @@
-mat-card {
+#outer-card {
margin-bottom: 10px;
background-color: var(--comment-list-bg);
}
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index 0b6491b5a35ac089cd40b0778f214f7094370324..b22f50e7836decd293fb8e4b2b838b4437662193 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -1,4 +1,4 @@
-<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>
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index 8453fdf410be7e229eb3200ecf30fff90c1f62ca..25c56569ba46daef34c30fa77e103f87f06b2325 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -1,4 +1,4 @@
-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;
diff --git a/src/app/components/shared/content-groups/content-groups.component.scss b/src/app/components/shared/content-groups/content-groups.component.scss
index f22daac06242a7c595bcc7f597bc5c9a4e25e074..43d9fe584f0b5e78a3d256dfed3196bc63b8286c 100644
--- a/src/app/components/shared/content-groups/content-groups.component.scss
+++ b/src/app/components/shared/content-groups/content-groups.component.scss
@@ -1,7 +1,7 @@
@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);
diff --git a/src/app/components/shared/footer/footer.component.html b/src/app/components/shared/footer/footer.component.html
index 88fad08f0c25bcf9ccc8a49cb586bbebf49c4ffa..de5fb87f9d45054f73ed516ea3c65e2f43c8b34b 100644
--- a/src/app/components/shared/footer/footer.component.html
+++ b/src/app/components/shared/footer/footer.component.html
@@ -1,5 +1,5 @@
<footer>
- <mat-toolbar>
+ <mat-toolbar id="footer-toolbar">
<button mat-button (click)="navToBlog()">
<mat-icon>notes</mat-icon>
Blog
diff --git a/src/app/components/shared/footer/footer.component.scss b/src/app/components/shared/footer/footer.component.scss
index cd52b2f2c5eb3a8e5cd26b617dd5e16e45efb509..e29995fb2251840d6e31ec1b6cb926329a4a9f56 100644
--- a/src/app/components/shared/footer/footer.component.scss
+++ b/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;
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index bcaf1c673d5cc226ea12c326e2efd7556a54e96c..03fedfba8db6850d73ed74037b371f5c9025aad1 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/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>
diff --git a/src/app/components/shared/room-list/room-list.component.html b/src/app/components/shared/room-list/room-list.component.html
index 6b7c0dffe8f87dbec1bffcdefd7148092f96f790..f15e37d88384f6b367826ec97ee5d8dd3c3cacd5 100644
--- a/src/app/components/shared/room-list/room-list.component.html
+++ b/src/app/components/shared/room-list/room-list.component.html
@@ -1,26 +1,29 @@
-<mat-expansion-panel [disabled]="true" class="matPanelHeader">
- <mat-expansion-panel-header>
- <mat-panel-title class="headerTitle">Name</mat-panel-title>
- <mat-panel-description>Session-Id</mat-panel-description>
- </mat-expansion-panel-header>
-</mat-expansion-panel>
-<mat-expansion-panel *ngFor="let room of rooms" class="matPanel">
- <mat-expansion-panel-header class="matPanelListHeader">
- <button mat-button color="primary" routerLink="/{{ baseUrl }}/room/{{ room.shortId }}">
- <mat-icon>input</mat-icon>
- </button>
- <mat-panel-title>
- {{ room.name }}
- </mat-panel-title>
- <mat-panel-description>
- {{ room.shortId.slice(0,4) }} {{ room.shortId.slice(4,8) }}
- </mat-panel-description>
- </mat-expansion-panel-header>
- <p>
- {{ room.description }}
- </p>
-</mat-expansion-panel>
-<mat-card *ngIf="rooms && rooms.length === 0">
+<div *ngIf="rooms && rooms.length != 0">
+ <mat-expansion-panel [disabled]="true" id="matPanelHeader">
+ <mat-expansion-panel-header>
+ <mat-panel-title class="headerTitle">Name</mat-panel-title>
+ <mat-panel-description class="headerTitle">Session-Id</mat-panel-description>
+ </mat-expansion-panel-header>
+ </mat-expansion-panel>
+ <mat-expansion-panel *ngFor="let room of rooms" class="matPanel">
+ <mat-expansion-panel-header class="matPanelListHeader">
+ <button mat-button color="primary" routerLink="/{{ baseUrl }}/room/{{ room.shortId }}">
+ <mat-icon>input</mat-icon>
+ </button>
+ <mat-panel-title class="panelTitle">
+ {{ room.name }}
+ </mat-panel-title>
+ <mat-panel-description class="panelTitle">
+ {{ room.shortId.slice(0,4) }} {{ room.shortId.slice(4,8) }}
+ </mat-panel-description>
+ </mat-expansion-panel-header>
+ <p>
+ {{ room.description }}
+ </p>
+ </mat-expansion-panel>
+</div>
+
+<mat-card id="no-sessions-card" *ngIf="rooms && rooms.length === 0">
<mat-card-header>
<mat-card-title *ngIf="baseUrl === 'creator'">Sie haben noch keine Sessions erstellt!</mat-card-title>
<mat-card-title *ngIf="baseUrl === 'participant'">Sie sind noch keiner Session beigetreten!</mat-card-title>
diff --git a/src/app/components/shared/room-list/room-list.component.scss b/src/app/components/shared/room-list/room-list.component.scss
index 13f3ac46906bcb9c0d26d78ceaf8eca42e7bae69..a281b1fd9906c963ace50dfe4401cffa4f5b5e76 100644
--- a/src/app/components/shared/room-list/room-list.component.scss
+++ b/src/app/components/shared/room-list/room-list.component.scss
@@ -7,14 +7,17 @@ button {
align-items: center;
}
+
.matPanel {
background-color: var(--room-list-mPanel);
margin-bottom: 5px;
+ color: black!important;
}
-.matPanelHeader {
+#matPanelHeader {
background-color: var(--room-list-mPHeader);
margin-bottom: 5px;
+ color: white;
}
.matPanelListHeader {
@@ -29,13 +32,20 @@ mat-panel-title {
.headerTitle {
width: 8% !important;
+ color: var(--room-list-card-color)!important;
}
+.panelTitle {
+ width: 8% !important;
+ color: black !important;
+}
+
+
mat-card-title {
text-align: center;
}
-mat-card {
+#no-sessions-card {
background-color: var(--room-list-card-bg);
color: var(--room-list-card-color);
}
diff --git a/src/app/components/shared/statistics-page/statistics-page.component.scss b/src/app/components/shared/statistics-page/statistics-page.component.scss
index e342d80d6d11e9af101090bdadb2c35a0e146cfb..9c6b5a22ea3686d8c05c59ea0f53b88887612f95 100644
--- a/src/app/components/shared/statistics-page/statistics-page.component.scss
+++ b/src/app/components/shared/statistics-page/statistics-page.component.scss
@@ -4,3 +4,11 @@ mat-card {
min-height: 300px;
background-color: var(--statistic-bg-color) !important;
}
+
+h2 {
+ color: var(--text-1);
+}
+
+mat-tab-label {
+ color: var(--text-1) !important;
+}
diff --git a/src/theme/dark-Theme/_dark-theme.scss b/src/theme/dark-Theme/_dark-theme.scss
index f94f53fd3529f863f99201232caee5f78a30def4..6c6f5d72a9416910cadda3b5b9e9330d48c2c12a 100644
--- a/src/theme/dark-Theme/_dark-theme.scss
+++ b/src/theme/dark-Theme/_dark-theme.scss
@@ -23,7 +23,7 @@ mat-form-field.input-block {
}
.mat-dialog-container {
- background-color: #e0f2f1;
+ background-color: white;
}
.mat-tab-header {
@@ -31,9 +31,9 @@ mat-form-field.input-block {
}
-$dark-primary: mat-palette($mat-gray);
-$dark-accent: mat-palette($mat-blue-gray);
-$dark-warn: mat-palette($mat-red);
+$dark-primary: mat-palette($mat-blue-gray, 800);
+$dark-accent: mat-palette($mat-blue-gray, 500);
+$dark-warn: mat-palette($mat-red, A200);
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
diff --git a/src/theme/dark-Theme/darkTheme.const.ts b/src/theme/dark-Theme/darkTheme.const.ts
index 24b2d59e960a9350c5574fb896642a9b65c8cc87..21de104296b1573e8df44eee20af3936e3844c6a 100644
--- a/src/theme/dark-Theme/darkTheme.const.ts
+++ b/src/theme/dark-Theme/darkTheme.const.ts
@@ -1,19 +1,19 @@
export const dark = {
- '--background-color': '#000000', // app.component.scss
+ '--background-color': '#616161', // app.component.scss
'--mat-row': '#bbdefb', // creator/_dialogs/content-edit.component.scss
'--heading-4': '#4db6ac', // creator/_dialogs/content-edit.component.scss
- '--content-creator-cell': '#ffe0b2', // creator/content-choice-creator.component.scss & creator/content-likert-creator.component.scss
- '--content-creator-row': '#ffecb3', // creator/content-choice-creator.component.scss & creator/content-likert-creator.component.scss
- '--content-mat-card': '#fff8e1', // creator/content-list.component.scss & creator/content-presentation.component.scss
+ '--content-creator-cell': '#546e7a', // creator/content-choice-creator.component.scss & creator/content-likert-creator.component.scss
+ '--content-creator-row': '#9e9e9e', // creator/content-choice-creator.component.scss & creator/content-likert-creator.component.scss
+ '--content-mat-card': '#bdbdbd', // creator/content-list.component.scss & creator/content-presentation.component.scss
// & creator/room-creator-page.component.scss & room-participant-page.component.scss
'--content-mat-expansion-panel': '#bbdefb', // creator/content-list.component.scss
'--content-prasentation-header': '#26a69a', // creator/content-presentation.component.scss
- '--home-page-outer': '#bbdefb', // home/home-page.component.scss
+ '--home-page-outer': '#9e9e9e', // home/home-page.component.scss
'--positiveC': '#AED581', // shared/_dialogs/statistic-help.component.scss
'--negativeC': '#FF8A65', // shared/_dialogs/statistic-help.component.scss
'--okayC': '#FFD54F', // shared/_dialogs/statistic-help.component.scss
'--emptyC': '#E0E0E0', // shared/_dialogs/statistic-help.component.scss
- '--comment-mat-card': '#4dd0e1', // shared/comment.component.scss
+ '--comment-mat-card': '#546e7a', // shared/comment.component.scss
'--comment-mat-toolbar': '#bbdefb', // shared/comment.component.scss
'--upvoted': '#66bb6a', // shared/comment.component.scss
'--downvoted': '#FF8A65', // shared/comment.component.scss
@@ -23,24 +23,29 @@ export const dark = {
'--unread-icon': '#e3f2fd', // shared/comment.component.scss
'--favorite-icon': '#fdd835', // shared/comment.component.scss
'--not-favorite-icon': '#fffde7', // shared/comment.component.scss
- '--comment-list-bg': '#4db6ac', // shared/comment-list.component.scss
- '--input-search-cl': '#80cbc4', // shared/comment-list.component.scss
- '--content-group-card': '#bbdefb', // shared/content-groups.component.scss
- '--footer-bg-color': 'rgb(240, 240, 240)', // shared/footer.component.scss
+ '--comment-list-bg': '#757575', // shared/comment-list.component.scss
+ '--input-search-cl': '#e0e0e0', // shared/comment-list.component.scss
+ '--content-group-card': '#546e7a', // shared/content-groups.component.scss
+ '--content-group-card-hover': '#4db6ac', // shared/content-groups.component.scss
+ '--footer-bg-color': '#9e9e9e', // shared/footer.component.scss
'--footer-button': '#80cbc4', // shared/footer.component.scss
'--list-st-hCell': '#4db6ac', // shared/list-statistic.component.scss
'--list-st-hCell-bg': '#e0e0e0', // shared/list-statistic.component.scss
'--list-st-mCell-bg': '#E0E0E0', // shared/list-statistic.component.scss
'--list-st-toolbar-bg': '#fff8e1', // shared/list-statistic.component.scss
'--positiveP': '#AED581', // shared/list-statistic.component.scss
- '--negativeP': '#FF8A65 ', // shared/list-statistic.component.scss
+ '--negativeP': '#FF8A65', // shared/list-statistic.component.scss
'--okayP': '#FFB74D', // shared/list-statistic.component.scss
'--emptyC-color': '#E0E0E0', // shared/list-statistic.component.scss
'--emptyCC': '#E0E0E0', // shared/list-statistic.component.scss
'--room-list-mPanel': '#cfd8dc', // shared/room-list.component.scss
'--room-list-mPLHeader': '#cfd8dc', // shared/room-list.component.scss
- '--room-list-mPHeader': '#bbdefb', // shared/room-list.component.scss
- '--room-list-card-bg': '#cfd8dc', // shared/room-list.component.scss
- '--room-list-card-color': '#4db6ac', // shared/room-list.component.scss
- '--statistic-bg-color' : '#fff8e1', // shared/statistic.component.scss & shared/statistics-page.component.scss
+ '--room-list-mPHeader': '#9e9e9e', // shared/room-list.component.scss
+ '--room-list-card-bg': '#455a64', // shared/room-list.component.scss
+ '--room-list-card-color': '#eeeeee', // shared/room-list.component.scss
+ '--statistic-bg-color' : '#dddddd', // shared/statistic.component.scss & shared/statistics-page.component.scss
+ '--text-1': '#37474f', // could be used for all texts
+ '--text-2': '#004d40', // could be used for all texts
+ '--text-3': '#78909c', // could be used for all texts
+ '--dialog-bg': '#78909c'
};
diff --git a/src/theme/default-Theme/_form.scss b/src/theme/default-Theme/_form.scss
index 25c4c8d605fcc88327bdcd7bfb355f71f8ee189c..f8516dc9bd086b8869bd958600f15996911ff8b6 100644
--- a/src/theme/default-Theme/_form.scss
+++ b/src/theme/default-Theme/_form.scss
@@ -7,7 +7,7 @@ mat-form-field.input-block {
}
.mat-dialog-container {
- background-color: #e0f2f1;
+ background-color: var(--dialog-bg);
}
.mat-tab-header {
diff --git a/src/theme/default-Theme/defaultTheme.const.ts b/src/theme/default-Theme/defaultTheme.const.ts
index b8835a3d8a1e96b602dacf1ed7773e63dd93c4fb..c82ef5a3c4715b921369b51e86a2d5a761aec1c3 100644
--- a/src/theme/default-Theme/defaultTheme.const.ts
+++ b/src/theme/default-Theme/defaultTheme.const.ts
@@ -26,6 +26,7 @@ export const defaultTheme = {
'--comment-list-bg': '#4db6ac', // shared/comment-list.component.scss
'--input-search-cl': '#80cbc4', // shared/comment-list.component.scss
'--content-group-card': '#bbdefb', // shared/content-groups.component.scss
+ '--content-group-card-hover': '#4db6ac', // shared/content-groups.component.scss
'--footer-bg-color': 'rgb(240, 240, 240)', // shared/footer.component.scss
'--footer-button': '#80cbc4', // shared/footer.component.scss
'--list-st-hCell': '#4db6ac', // shared/list-statistic.component.scss
@@ -43,4 +44,5 @@ export const defaultTheme = {
'--room-list-card-bg': '#cfd8dc', // shared/room-list.component.scss
'--room-list-card-color': '#4db6ac', // shared/room-list.component.scss
'--statistic-bg-color': '#fff8e1', // shared/statistic.component.scss & shared/statistics-page.component.scss
+ '--dialog-bg': '#e0f2f1'
};
diff --git a/src/theme/themeReadMe.md b/src/theme/themeReadMe.md
new file mode 100644
index 0000000000000000000000000000000000000000..c6641b43bf777d86466edeb523fd8e588bbd9a15
--- /dev/null
+++ b/src/theme/themeReadMe.md
@@ -0,0 +1,10 @@
+# How to add a new Theme
+
+- create a new directory with the name of the theme in src/theme
+- than create a new scss file with the same construct as _dark-theme.scss and style it using
+ material palette
+- import the file in styles.scss and add the option in header.component.html
+
+- create a new scss file in your working theme directory : name.const.ts
+ and copy the construct of darkTheme.const.ts
+- start editing the variables and see the magic happen