diff --git a/THEME-README.md b/THEME-README.md
new file mode 100644
index 0000000000000000000000000000000000000000..2e2a7831d4f1dfccbe1cc18449365114515687e8
--- /dev/null
+++ b/THEME-README.md
@@ -0,0 +1,19 @@
+# How to add a new Theme
+
+## Preparation
+
+Create a new directory with the name of the new theme in src/theme.
+
+## Create new theme
+
+1. Create a new scss file with the same structure as `_dark-theme.scss` and style it using material palette.
+
+2. Create a new scss file in your working theme directory named {YourThemeName}.const.ts and copy the structure of `darkTheme.const.ts`.
+
+## Add new theme to theme manager
+
+Import the file in `styles.scss` and add the new theme to theme menu in `header.component.html`.
+
+## Configure your theme
+
+Start editing the variables and see the magic happen. We recommend to use [material colors](https://material.io/tools/color).
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b86ef90e22afcc573488a94b2a31092e5d3f795c..86bb7600d61f42f1505970e6eae03a0aa6a93618 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,7 @@
-<div fxLayout="column" fxFill>
- <app-header></app-header>
- <div fxFlex class="app-component">
- <router-outlet></router-outlet>
+ <div [ngClass]="header.themeClass" fxLayout="column" fxFill appTheme>
+ <app-header #header></app-header>
+ <div fxFlex class="app-component">
+ <router-outlet></router-outlet>
+ </div>
+ <app-footer></app-footer>
</div>
- <app-footer></app-footer>
-</div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 23f30f8823f78bc2ff012e22dfa0f15a82ec9f7a..e960d5f7e2d28b564359a44c5b5cd4100941e64d 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,8 +1,6 @@
-@import '../theme/_variables.scss';
+@import '../theme/default-Theme/_variables.scss';
.app-component {
padding: 4%;
- background-color: #b2dfdb;
+ background-color:var(--background-color);
}
-
-
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index aae1fa0a69aeddecb214bb15270b559cdce4dea5..39c8d57d7b6e576f503beaa91ccd1d6b777e7f7e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
+import { ThemeService } from '../theme/theme.service';
@Component({
selector: 'app-root',
@@ -8,7 +9,8 @@ import { TranslateService } from '@ngx-translate/core';
})
export class AppComponent {
- constructor(private translationService: TranslateService) {
+ constructor(private translationService: TranslateService,
+ private themeService: ThemeService) {
translationService.setDefaultLang(this.translationService.getBrowserLang());
sessionStorage.setItem('currentLang', this.translationService.getBrowserLang());
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 83b65385dbc7cf3d591a5a92213add4853795dae..30c5ab13ffaff929b5963d9c28c31b7c37ce4af3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -26,6 +26,7 @@ import { MarkdownService, MarkedOptions } from 'ngx-markdown';
import { NewLandingComponent } from './components/home/new-landing/new-landing.component';
import { HomePageComponent } from './components/home/home-page/home-page.component';
import { AppConfig } from './app.config';
+import { ThemeModule } from '../theme/theme.module';
export function dialogClose(dialogResult: any) {
}
@@ -53,7 +54,8 @@ export function initializeApp(appConfig: AppConfig) {
BrowserModule,
BrowserAnimationsModule,
EssentialsModule,
- SharedModule
+ SharedModule,
+ ThemeModule
],
providers: [
AppConfig,
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 eba525c7cf8ad283c44f83d34e8a1581b57b6a00..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,14 +9,14 @@ textarea {
}
mat-row {
- background-color: #bbdefb;
- border-color: #bbdefb;
+ background-color: var(--dialog-bg);
+ border-color: var(--dialog-bg);
}
h4 {
margin: 0px !important;
padding-bottom: 10px;
- color: #4db6ac;
+ color: var(--heading-4);
}
mat-cell {
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 4d0f4e714bbecf2a8716814d8f3add41351e36b3..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
@@ -3,11 +3,15 @@ form > button {
}
mat-header-cell {
- background-color: #ffe0b2;
+ background-color: var(--content-creator-cell);
}
mat-row {
- background-color: #ffecb3;
+ background-color: var(--content-creator-row);
+}
+
+.mat-checkbox {
+ color: var(--text-1) !important;
}
.addIcon {
diff --git a/src/app/components/creator/content-likert-creator/content-likert-creator.component.scss b/src/app/components/creator/content-likert-creator/content-likert-creator.component.scss
index 3d0e678f5ec7ef58ad3ce0c18847c8e32c158072..21391e600ad5b5e199fba772d6362675ed6e7a0e 100644
--- a/src/app/components/creator/content-likert-creator/content-likert-creator.component.scss
+++ b/src/app/components/creator/content-likert-creator/content-likert-creator.component.scss
@@ -3,9 +3,9 @@ form > button {
}
mat-header-cell {
- background-color: #ffe0b2;
+ background-color: var(--content-creator-cell);
}
mat-cell {
- background-color: #ffecb3;
+ background-color: var(--content-creator-row);
}
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 d814020384c6cfdada1e8d55d5058ed72a1b73a1..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: #fff8e1;
+ background-color: var(--content-mat-card)!important;
}
mat-card-content > :first-child {
@@ -9,7 +9,7 @@ mat-card-content > :first-child {
}
mat-expansion-panel {
- background-color: #bbdefb;
+ background-color: var(--content-mat-expansion-panel);
margin-bottom: 5px;
}
@@ -21,17 +21,26 @@ mat-panel-title {
}
mat-expansion-panel-header {
- background-color: #bbdefb !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/content-presentation/content-presentation.component.scss b/src/app/components/creator/content-presentation/content-presentation.component.scss
index 8b0580e3b3bca45d557bc0bbf884d70074a25fbd..9db9db9e97bc72df8859d2aa54b335e27f5a751e 100644
--- a/src/app/components/creator/content-presentation/content-presentation.component.scss
+++ b/src/app/components/creator/content-presentation/content-presentation.component.scss
@@ -11,12 +11,12 @@ mat-card {
width: 800px;
max-width: 90%;
margin-top: 20px;
- background-color: #fff8e1;
+ background-color: var(--content-mat-card);
}
h3 {
font-size: 150%;
- color: #26a69a;
+ color: var(--content-prasentation-header);
}
h4 {
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 9a4764ae3219972403b5a0a0d49934c0ef28c035..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
@@ -2,7 +2,7 @@
mat-card {
width: 800px;
- background-color: #fff8e1 !important;
+ background-color: var(--content-mat-card)!important;
}
mat-card-content > :first-child {
@@ -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 {
@@ -73,6 +76,6 @@ mat-grid-tile {
}
mat-expansion-panel {
- background-color: #fff8e1!important;
+ background-color: var(--content-mat-card)!important;
min-width: 200px;
}
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/home/home-page/home-page.component.scss b/src/app/components/home/home-page/home-page.component.scss
index 91512460d0dcf1beb2bfafef6922d91b00a76b9f..cb1f733c9886be682c4dbf113f8cd660a20f1a80 100644
--- a/src/app/components/home/home-page/home-page.component.scss
+++ b/src/app/components/home/home-page/home-page.component.scss
@@ -3,7 +3,7 @@
.outer {
width: 90%;
max-width: 500px;
- background-color: #bbdefb;
+ background-color: var(--home-page-outer);
}
.main-heading-primary {
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 a3a11c062dd6e0ee95fda1f468f023bf1f507e52..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
@@ -3,7 +3,7 @@
mat-card {
width: 100%;
max-width: 800px;
- background-color: #fff8e1 !important;
+ background-color: var(--content-mat-card)!important;
}
mat-card-content>:first-child {
@@ -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 {
@@ -61,7 +64,7 @@ mat-card-subtitle {
}
mat-expansion-panel {
- background-color: #fff8e1!important;
+ background-color: var(--content-mat-card)!important;
min-width: 200px;
}
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/_dialogs/statistic-help/statistic-help.component.scss b/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.scss
index effb292362e0dfc112c82dc4eb387d3ddcce2097..d1ebb32664d71dcfab71f003145749e52eba4d64 100644
--- a/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.scss
+++ b/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.scss
@@ -1,21 +1,21 @@
.positiveC {
- background-color: #AED581;
+ background-color: var(--positiveC);
}
.negativeC {
- background-color: #FF8A65;
+ background-color: var(--negativeC);
}
.okayC {
- background-color: #FFD54F;
+ background-color: var(--okayC);
}
.emptyC {
- background-color: #E0E0E0;
+ background-color: var(--emptyC);
}
mat-chip {
- width: 130px!important;
+ width: 130px !important;
display: flex;
justify-content: center;
}
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 c1bb2f0550977f919c7035e001fb7edbf423f9d8..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,6 +1,6 @@
-mat-card {
+#outer-card {
margin-bottom: 10px;
- background-color: #4db6ac;
+ background-color: var(--comment-list-bg);
}
app-comment {
@@ -12,7 +12,7 @@ input {
box-sizing: border-box;
padding: 0 10px 0 5px;
width: 90%;
- background-color: #80cbc4;
+ background-color: var(--input-search-cl);
border: none;
outline: none;
min-height: 60px;
@@ -20,15 +20,15 @@ input {
border-radius: 5px;
}
-#search-container{
+#search-container {
border-radius: 5px;
- background-color: #80cbc4;
+ background-color: var(--input-search-cl);
margin-bottom: 10px;
}
.add-button {
- width: 44px!important;
- height: 44px!important;
+ width: 44px !important;
+ height: 44px !important;
text-align: center;
}
@@ -36,7 +36,7 @@ input {
font-size: 45px;
height: 45px;
width: 45px;
- line-height: 100%!important;
+ line-height: 100% !important;
}
.search-icon {
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 8084452349db7c8769e683d3adf51b6bc7523886..25c56569ba46daef34c30fa77e103f87f06b2325 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -1,6 +1,6 @@
-mat-card {
+#comment-card {
margin-bottom: 20px;
- background-color: #4dd0e1;
+ background-color: var(--comment-mat-card);
cursor: pointer;
padding-bottom: 10px;
padding-top: 10px;
@@ -14,52 +14,46 @@ mat-card-content > :first-child {
mat-toolbar {
border-radius: 10px;
margin-bottom: 20px;
- background-color: #bbdefb;
+ background-color: var(--comment-mat-toolbar);
}
.voting-icon {
width: 35px;
height: 35px;
font-size: 35px;
- line-height: 100%!important;
+ line-height: 100% !important;
}
.upvoted {
- color: #66bb6a;
+ color: var(--upvoted);
}
.downvoted {
- color: #FF8A65;
+ color: var(--downvoted);
}
.incorrect-icon {
- color: #c8e6c9;
+ color: var(--incorrect-icon);
}
.correct-icon {
- color: #66bb6a;
+ color: var(--correct-icon);
}
.read-icon {
- color: #1e88e5;
+ color: var(--read-icon);
}
.unread-icon {
- color: #e3f2fd;
+ color: var(--unread-icon);
}
.favorite-icon {
- color: #fdd835;
+ color: var(--favorite-icon);
}
.not-favorite-icon {
- color: #fffde7;
-}
-
-.proffessor-icon {
- background-size: cover;
- margin-right: 10px;
- margin-top: 10px;
+ color: var(--not-favorite-icon);
}
h2 {
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 4d3c7ce2830ac92e6fae567a70b8593a9508bdd1..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/_variables.scss';
+@import '../../../../theme/default-Theme/_variables.scss';
.mat-card {
- background-color: #bbdefb;
+ 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 d3f2b1f8f7451107895b9c9204abadd9d8b23356..e29995fb2251840d6e31ec1b6cb926329a4a9f56 100644
--- a/src/app/components/shared/footer/footer.component.scss
+++ b/src/app/components/shared/footer/footer.component.scss
@@ -1,13 +1,15 @@
footer {
- overflow-y: auto;
+ overflow-y: auto;
}
-mat-toolbar {
- background-color: rgb(240, 240, 240);
+#footer-toolbar {
+ background-color: var(--footer-bg-color);
height: auto;
+
&:first-child {
padding-left: 0px;
}
+
&:last-child {
padding-right: 0px;
}
@@ -16,7 +18,7 @@ mat-toolbar {
button {
min-height: 28px;
font-size: 12px;
- color: #80cbc4;
+ color: var(--footer-button);
}
mat-icon {
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index ad321a5fe44d21a6d4337bdceb91751121a81ad7..9c7192066c5b9ecaac23d56a303e76badc358da8 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -7,6 +7,15 @@
<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('')">{{ 'header.default' | translate }}</button>
+ <button mat-menu-item (click)="changeTheme('dark')">{{ 'header.dark' | translate }}</button>
+ </mat-menu>
+
+ <button mat-icon-button [matMenuTriggerFor]="themeMenu">
+ <mat-icon>palette</mat-icon>
+ </button>
+
<mat-menu #langMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item (click)="useLanguage('de')">{{ 'header.german' | translate }}</button>
<button mat-menu-item (click)="useLanguage('en')">{{ 'header.english' | translate }}</button>
@@ -46,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/header/header.component.ts b/src/app/components/shared/header/header.component.ts
index b3bb28fb8b2d72159f3b96d4ca444239d73bbfcc..1ba5921eb3359ea24bc7be9f1665b8a392882c97 100644
--- a/src/app/components/shared/header/header.component.ts
+++ b/src/app/components/shared/header/header.component.ts
@@ -9,6 +9,7 @@ import { TranslateService } from '@ngx-translate/core';
import { LanguageService } from '../../../services/util/language.service';
import { MatDialog } from '@angular/material';
import { LoginComponent } from '../login/login.component';
+import { ThemeService } from '../../../../theme/theme.service';
@Component({
selector: 'app-header',
@@ -17,6 +18,7 @@ import { LoginComponent } from '../login/login.component';
})
export class HeaderComponent implements OnInit {
user: User;
+ themeClass = localStorage.getItem('classNameOfTheme');
constructor(public location: Location,
private authenticationService: AuthenticationService,
@@ -24,7 +26,9 @@ export class HeaderComponent implements OnInit {
public router: Router,
private translationService: TranslateService,
private langService: LanguageService,
- public dialog: MatDialog) {
+ public dialog: MatDialog,
+ private themeService: ThemeService
+ ) {
}
ngOnInit() {
@@ -61,6 +65,16 @@ export class HeaderComponent implements OnInit {
this.langService.langEmitter.emit(language);
}
+ changeTheme(theme) {
+ this.themeClass = theme;
+ localStorage.setItem('classNameOfTheme', theme);
+ if (theme === '') {
+ this.themeService.setActiveThem('arsnovaTheme');
+ } else {
+ this.themeService.setActiveThem(theme);
+ }
+ }
+
login(isDozent: boolean) {
const dialogRef = this.dialog.open(LoginComponent, {
width: '350px'
diff --git a/src/app/components/shared/list-statistic/list-statistic.component.scss b/src/app/components/shared/list-statistic/list-statistic.component.scss
index fba3ef597b72d78b67351919e6edaf288748d76a..599e0af8d83775b38514ac986081beabcc52aaee 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.scss
+++ b/src/app/components/shared/list-statistic/list-statistic.component.scss
@@ -1,4 +1,4 @@
-table{
+table {
width: 100%;
}
@@ -24,50 +24,51 @@ table{
}
mat-header-cell {
- color: #4db6ac;
- background-color: #e0e0e0;
+ color: black!important;
+ background-color: var(--list-st-hCell-bg);
}
mat-cell {
- background-color: #E0E0E0;
+ color: black!important;
+ background-color: var(--list-st-mCell-bg);
}
mat-toolbar {
height: 20px;
- background-color: #fff8e1;
+ background-color: var(--statistic-bg-color)!important;
}
.positiveC {
- background-color: #AED581;
+ background-color: var(--positiveC);
}
.negativeC {
- background-color: #FF8A65;
+ background-color: var(--negativeC);
}
.okayC {
- background-color: #FFD54F;
+ background-color: var(--okayC);
}
.positiveP {
- background-color: #AED581 !important;
+ background-color: var(--positiveP) !important;
}
.negativeP {
- background-color: #FF8A65 !important;
+ background-color: var(--negativeP) !important;
}
.okayP {
- background-color: #FFB74D !important;
+ background-color: var(--okayP) !important;
}
.emptyC {
- color: #E0E0E0;
- background: #E0E0E0;
+ color: var(--emptyC-color);
+ background: var(--emptyC-color);
pointer-events: none;
}
.emptyCC {
- background: #E0E0E0;
+ background: var(--emptyCC) ;
pointer-events: none;
}
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 a269ce031e7103581728d800bf1c3eee57b7cedd..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,18 +7,21 @@ button {
align-items: center;
}
+
.matPanel {
- background-color: #cfd8dc;
+ background-color: var(--room-list-mPanel);
margin-bottom: 5px;
+ color: black!important;
}
-.matPanelHeader {
- background-color: #bbdefb;
+#matPanelHeader {
+ background-color: var(--room-list-mPHeader);
margin-bottom: 5px;
+ color: white;
}
.matPanelListHeader {
- background-color: #cfd8dc !important;
+ background-color: var(--room-list-mPLHeader) !important;
}
mat-panel-title {
@@ -28,14 +31,21 @@ mat-panel-title {
}
.headerTitle {
- width: 8%!important;
+ 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 {
- background-color: #cfd8dc;
- color: #4db6ac;
+#no-sessions-card {
+ background-color: var(--room-list-card-bg);
+ color: var(--room-list-card-color);
}
diff --git a/src/app/components/shared/statistic/statistic.component.scss b/src/app/components/shared/statistic/statistic.component.scss
index d07ab6d241c8f65ef921219580f790812601080f..080ec42e756a005e4d288386559a68e8e8fd6f95 100644
--- a/src/app/components/shared/statistic/statistic.component.scss
+++ b/src/app/components/shared/statistic/statistic.component.scss
@@ -1,12 +1,12 @@
mat-card {
width: 800px;
max-width: 90%;
- background-color: #fff8e1 !important;
+ background-color: var(--statistic-bg-color) !important;
}
mat-toolbar {
height: 15px;
- background-color: #fff8e1;
+ background-color: var(--statistic-bg-color);
}
.mat-icon-button {
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 08972d1c030798333897c9ba181b91bf0b267b91..e4ffb24f3db2bfd3ad102ef4c85b038388e30a22 100644
--- a/src/app/components/shared/statistics-page/statistics-page.component.scss
+++ b/src/app/components/shared/statistics-page/statistics-page.component.scss
@@ -2,5 +2,9 @@ mat-card {
width: 800px;
max-width: 90%;
min-height: 300px;
- background-color: #fff8e1 !important;
+ background-color: var(--statistic-bg-color) !important;
+}
+
+h2 {
+ color: var(--text-1);
}
diff --git a/src/assets/i18n/home/de.json b/src/assets/i18n/home/de.json
index c6f2e078e597db2675845ad998c58bd2d70aeb75..0d9bd508434243f6bb1929ad8685a37f0ace1f43 100644
--- a/src/assets/i18n/home/de.json
+++ b/src/assets/i18n/home/de.json
@@ -7,7 +7,9 @@
"logged-out": "Ausloggen erfolgreich.",
"back": "Zurück",
"my-sessions": "Meine Sessions",
- "visited-sessions": "Besuchte Sessions"
+ "visited-sessions": "Besuchte Sessions",
+ "default": "ARSnova",
+ "dark": "Nacht"
},
"login-page": {
"creator": "Dozent/in",
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index 6025d8644c4031e079e59aa69c22b81b9f8c3036..e87024f24e478642c0a645b7d4ab87235f45ed65 100644
--- a/src/assets/i18n/home/en.json
+++ b/src/assets/i18n/home/en.json
@@ -7,7 +7,9 @@
"logged-out": "Logout successful",
"back": "Back",
"my-sessions": "My Sessions",
- "visited-sessions": "Visited Sessions"
+ "visited-sessions": "Visited Sessions",
+ "default": "ARSnova",
+ "dark": "Night"
},
"login-page": {
"creator": "Lecturer",
diff --git a/src/styles.scss b/src/styles.scss
index 7186b2044d95fd612daac9f466ab94aa6c52e436..9d8295a06c48b3922ec958e59e8adce73ab08a6a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,4 +1,5 @@
-@import 'theme/_variables.scss';
+@import 'theme/default-Theme/_variables.scss';
+@import "theme/dark-Theme/dark-theme";
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
@@ -11,4 +12,10 @@
// that you are using.
@include angular-material-theme($arsnova-theme);
-@import 'theme/_theme.scss';
+
+.dark {
+ @include angular-material-theme($dark-theme);
+}
+
+
+@import 'theme/default-Theme/theme';
diff --git a/src/theme/_theme.scss b/src/theme/_theme.scss
deleted file mode 100644
index 24c076011434ae638509272fec39a677bb7ed860..0000000000000000000000000000000000000000
--- a/src/theme/_theme.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@import '~@angular/material/theming';
-
-html, body {
- font-family: 'Roboto', 'Helvetica Neue', sans-serif;
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
-}
-
-@import '_util.scss';
-@import '_form.scss';
-
-.progress-theme {
- $progress-primary: mat-palette($mat-light-green, 300);
- $progress-accent: mat-palette($mat-amber, 300);
- $progress-warn: mat-palette($mat-deep-orange, 300);
- $progress-theme: mat-light-theme($progress-primary, $progress-accent, $progress-warn);
- @include angular-material-theme($progress-theme);
-}
diff --git a/src/theme/arsnova-theme.const.ts b/src/theme/arsnova-theme.const.ts
new file mode 100644
index 0000000000000000000000000000000000000000..91ae0b442be2a92a93b2d6e64badcc28573556b0
--- /dev/null
+++ b/src/theme/arsnova-theme.const.ts
@@ -0,0 +1,7 @@
+import { dark } from './dark-Theme/darkTheme.const';
+import { defaultTheme } from './default-Theme/defaultTheme.const';
+
+export const themes = {
+ arsnovaTheme: defaultTheme,
+ dark: dark
+};
diff --git a/src/theme/dark-Theme/_dark-theme.scss b/src/theme/dark-Theme/_dark-theme.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6c6f5d72a9416910cadda3b5b9e9330d48c2c12a
--- /dev/null
+++ b/src/theme/dark-Theme/_dark-theme.scss
@@ -0,0 +1,39 @@
+@import '../../../node_modules/@angular/material/theming';
+
+html, body {
+ font-family: 'Roboto', 'Helvetica Neue', sans-serif;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.fill-remaining-space {
+ /* This fills the remaining space, by using flexbox.
+ Every toolbar row uses a flexbox row layout. */
+ flex: 1 1 auto;
+}
+
+mat-form-field.input-block {
+ display: block;
+}
+
+.mat-fab .mat-button-wrapper {
+ padding: 0!important;
+}
+
+.mat-dialog-container {
+ background-color: white;
+}
+
+.mat-tab-header {
+ border-bottom-style: none!important;
+}
+
+
+$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
new file mode 100644
index 0000000000000000000000000000000000000000..1dda0e11fbc6b9e1da6bbaa84d2818352cd5b39f
--- /dev/null
+++ b/src/theme/dark-Theme/darkTheme.const.ts
@@ -0,0 +1,52 @@
+export const dark = {
+ '--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': '#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': '#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': '#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
+ '--incorrect-icon': '#c8e6c9', // shared/comment.component.scss
+ '--correct-icon': '#66bb6a', // shared/comment.component.scss
+ '--read-icon': '#1e88e5', // shared/comment.component.scss
+ '--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': '#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
+ '--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': '#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' : '#bdbdbd', // 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',
+ 'stats-ok': '#FFB74D'
+};
diff --git a/src/theme/_form.scss b/src/theme/default-Theme/_form.scss
similarity index 83%
rename from src/theme/_form.scss
rename to src/theme/default-Theme/_form.scss
index 25c4c8d605fcc88327bdcd7bfb355f71f8ee189c..f8516dc9bd086b8869bd958600f15996911ff8b6 100644
--- a/src/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/_theme.scss b/src/theme/default-Theme/_theme.scss
new file mode 100644
index 0000000000000000000000000000000000000000..58ebcc5b6910cda421e4a5a8d0927beebad1b64b
--- /dev/null
+++ b/src/theme/default-Theme/_theme.scss
@@ -0,0 +1,13 @@
+@import './../../../node_modules/@angular/material/theming';
+
+html, body {
+ font-family: 'Roboto', 'Helvetica Neue', sans-serif;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+}
+
+@import 'util';
+@import 'form';
+
diff --git a/src/theme/_util.scss b/src/theme/default-Theme/_util.scss
similarity index 100%
rename from src/theme/_util.scss
rename to src/theme/default-Theme/_util.scss
diff --git a/src/theme/_variables.scss b/src/theme/default-Theme/_variables.scss
similarity index 91%
rename from src/theme/_variables.scss
rename to src/theme/default-Theme/_variables.scss
index a4a274efc2e5a2aafd32c402519f349708e76619..81c04ab7cabcc8da8e4943ebbe24fcba8ae5185d 100644
--- a/src/theme/_variables.scss
+++ b/src/theme/default-Theme/_variables.scss
@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@import './../../../node_modules/@angular/material/theming';
// 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://www.google.com/design/spec/style/color.html
@@ -10,3 +10,4 @@ $arsnova-warn: mat-palette($mat-red, A100);
// Create the theme object (a Sass map containing all of the palettes).
$arsnova-theme: mat-light-theme($arsnova-primary, $arsnova-accent, $arsnova-warn);
+
diff --git a/src/theme/default-Theme/defaultTheme.const.ts b/src/theme/default-Theme/defaultTheme.const.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aa33dded2897ba1d066ef55664d9236a7b060d0c
--- /dev/null
+++ b/src/theme/default-Theme/defaultTheme.const.ts
@@ -0,0 +1,48 @@
+export const defaultTheme = {
+ '--background-color': '#b2dfdb', // 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
+ // & 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
+ '--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-toolbar': '#bbdefb', // shared/comment.component.scss
+ '--upvoted': '#66bb6a', // shared/comment.component.scss
+ '--downvoted': '#FF8A65', // shared/comment.component.scss
+ '--incorrect-icon': '#c8e6c9', // shared/comment.component.scss
+ '--correct-icon': '#66bb6a', // shared/comment.component.scss
+ '--read-icon': '#1e88e5', // shared/comment.component.scss
+ '--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
+ '--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
+ '--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
+ '--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
+ '--dialog-bg': '#e0f2f1',
+};
diff --git a/src/theme/theme.directive.ts b/src/theme/theme.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..41a493da22e7284bc882e9fc6285ac0c9b217db4
--- /dev/null
+++ b/src/theme/theme.directive.ts
@@ -0,0 +1,46 @@
+import { Directive, ElementRef, Inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { themes } from './arsnova-theme.const';
+import { ThemeService } from './theme.service';
+import { Subscription } from 'rxjs';
+
+@Directive({
+ selector: '[appTheme]'
+})
+
+export class ThemeDirective implements OnInit, OnDestroy {
+
+ private themeName = 'arsnovaTheme';
+ private themServiceSubscription: Subscription;
+
+ constructor(private elementRef: ElementRef,
+ private renderer: Renderer2,
+ @Inject(DOCUMENT) private document: any,
+ private themService: ThemeService) {
+ }
+
+ ngOnInit() {
+ this.updateTheme(this.themeName);
+ this.themService.getActiveTheme()
+ .subscribe(themeName => {
+ this.themeName = themeName;
+ this.updateTheme(this.themeName);
+ });
+ }
+
+ updateTheme(themeName: string) {
+ const them = themes[ themeName ];
+ for (const key in them) {
+ if (them.hasOwnProperty(key)) {
+ this.renderer.setProperty(this.elementRef.nativeElement, key, them[key]);
+ this.document.body.style.setProperty(key, them[key]);
+ }
+ }
+ }
+
+ ngOnDestroy() {
+ if (this.themServiceSubscription) {
+ this.themServiceSubscription.unsubscribe();
+ }
+ }
+}
diff --git a/src/theme/theme.module.ts b/src/theme/theme.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..af6d3e09bbdfe23c709e90d26264f87d749fb2a1
--- /dev/null
+++ b/src/theme/theme.module.ts
@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ThemeDirective } from './theme.directive';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule
+ ],
+ declarations: [ThemeDirective],
+ exports: [ThemeDirective],
+})
+export class ThemeModule { }
diff --git a/src/theme/theme.service.ts b/src/theme/theme.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9c56dfb379aacc5f0df11e7ea62560038d9838e3
--- /dev/null
+++ b/src/theme/theme.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ThemeService {
+ themeName = localStorage.getItem('classNameOfTheme');
+ private activeThem = new BehaviorSubject(this.themeName);
+
+ constructor() { }
+
+ public getActiveTheme() {
+ return this.activeThem.asObservable();
+ }
+
+ public setActiveThem(name) {
+ this.activeThem.next(name);
+ }
+}