... | ... | @@ -5,24 +5,24 @@ |
|
|
theme-<your-theme-name>.scss
|
|
|
- - -
|
|
|
|
|
|
2. Add your styles in `theme-<your-theme-name>.scss`
|
|
|
2. Add your styles to your newly created `theme-<your-theme-name>.scss` file
|
|
|
- Optional: go to theme-Material.scss in the same folder and copy the code into your file, then adjust the colorcodes.
|
|
|
- All of the variables are selfexplanatory.
|
|
|
- Adjust the colorcodes of the variables to impact the themes colors.
|
|
|
- Consider using complementary colors.
|
|
|
- - -
|
|
|
|
|
|
3. Add your new theme in the `docker-compose.yml` in the `root` directory. Example (line 13 & line 29):
|
|
|
3. Add the code below to the following tags: `services.master.build.args.themes, services.staging.build.args.themes` in the `docker-compose.yml` file in the `root` directory. Example:
|
|
|
|
|
|
\"<your-theme-name>\"
|
|
|
- - -
|
|
|
|
|
|
4. Add your new theme in the `QuizTheme.ts` file in `src/app/lib/enums`. Example (line 12):
|
|
|
4. Add the code below to the enum in the `QuizTheme.ts` file in `src/app/lib/enums`. Example:
|
|
|
|
|
|
<your-theme-name> = '<your-theme-name>'
|
|
|
- - -
|
|
|
|
|
|
5. Add your new theme in the `theme-hashes.json` file in `src/assets`. Example (line 21):
|
|
|
5. Add the code below to the array in the `theme-hashes.json` file in `src/assets`. Example:
|
|
|
|
|
|
{
|
|
|
"hash": "__CSS_FILE_HASH__",
|
... | ... | @@ -30,7 +30,7 @@ |
|
|
}
|
|
|
- - -
|
|
|
|
|
|
6. Add your new theme in the `themeData.json` in `src/assets`. Example (line 261):
|
|
|
6. Add the code below to the root of the json object in the `themeData.json` file in `src/assets`. Example:
|
|
|
|
|
|
"<your-theme-name>": {
|
|
|
"quizNameRowStyle": {
|
... | ... | @@ -60,7 +60,7 @@ |
|
|
}
|
|
|
- - -
|
|
|
|
|
|
7. Add your new theme in the "theme-switcher.themes" tag in the `de.json` in `src/assets/i18n`. Example (line 612):
|
|
|
7. Add the code below to the `theme-switcher.themes` tag in the `de.json` in `src/assets/i18n`. Example:
|
|
|
|
|
|
"<your-theme-name>": {
|
|
|
"name": "<your-theme-name>",
|
... | ... | @@ -68,7 +68,7 @@ |
|
|
}
|
|
|
- - -
|
|
|
|
|
|
8. Add your new theme in the "theme-switcher.themes" tag in the `en.json` in `src/assets/i18n`. Example (line 612):
|
|
|
8. Add the code below to the `theme-switcher.themes` tag in the `en.json` in `src/assets/i18n`. Example:
|
|
|
|
|
|
"<your-theme-name>": {
|
|
|
"name": "<your-theme-name>",
|
... | ... | @@ -76,7 +76,7 @@ |
|
|
}
|
|
|
- - -
|
|
|
|
|
|
9. Add your new theme in the `available-themes.ts` in `src/app/lib`. Example (line 21):
|
|
|
9. Add the code below to the Array in the `available-themes.ts` in `src/app/lib`. Example:
|
|
|
|
|
|
{
|
|
|
name: 'component.theme_switcher.themes.<your-theme-name>.name',
|
... | ... | @@ -86,7 +86,7 @@ |
|
|
}
|
|
|
- - -
|
|
|
|
|
|
10. Add your new theme in the `angular.json` in the `root` directory under the following tags: `options > ... > styles, configurations > ... > styles, thmStaging > ... > styles, thmBeta > ... > styles`. Example (line 76, line 135, line 188 & line 241):
|
|
|
10. Add the code below to the following tags: `projects.frontend.architect.build.options.styles, projects.frontend.architect.build.configurations.production.styles, projects.frontend.architect.build.configurations.thmStaging.styles, projects.frontend.architect.build.configurations.thmBeta.styles` in the `angular.json` in the `root` directory. Example:
|
|
|
|
|
|
{
|
|
|
"inject": false,
|
... | ... | @@ -95,13 +95,19 @@ |
|
|
},
|
|
|
- - -
|
|
|
|
|
|
11. Add your new theme in the `availableQuizThemes` tag in the `environment.ts` in `src/environments`. Example (line 37):
|
|
|
11. Add the code below to the `availableQuizThemes` tag in the `environment.ts` file in `src/environments`. Example:
|
|
|
|
|
|
QuizTheme.<your-theme-name>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
- - -
|
|
|
|
|
|
Generating Preview Image:
|
|
|
|
|
|
|
|
|
|
|
|
- - -
|
|
|
|
|
|
<br>
|
|
|
|
... | ... | |