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/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html index 03fedfba8db6850d73ed74037b371f5c9025aad1..9c7192066c5b9ecaac23d56a303e76badc358da8 100644 --- a/src/app/components/shared/header/header.component.html +++ b/src/app/components/shared/header/header.component.html @@ -8,8 +8,8 @@ <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> + <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"> 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/theme/themeReadMe.md b/src/theme/themeReadMe.md deleted file mode 100644 index c6641b43bf777d86466edeb523fd8e588bbd9a15..0000000000000000000000000000000000000000 --- a/src/theme/themeReadMe.md +++ /dev/null @@ -1,10 +0,0 @@ -# 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