diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e960d5f7e2d28b564359a44c5b5cd4100941e64d..046919174d5af1f047768ca34bc8c6b79e2e1532 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -2,5 +2,5 @@ .app-component { padding: 4%; - background-color:var(--background-color); + background-color:var(--background); } 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 9b601523b0404a19cac5d410673f7c5a7ede7f62..a29082c41cdf338f5eecd3808780fd811acf6ddb 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 @@ -14,12 +14,12 @@ mat-row { } h4 { - margin: 0px !important; + margin: 0 !important; padding-bottom: 10px; - color: var(--heading-4); + color: var(--primary); } mat-cell { - padding-left: 0px!important; + padding-left: 0!important; padding-right: 10px!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 46665fcb5e1883bf1cdc38697a9fac95b93e13ef..cff4d03e22146682cf7bcccf46cb070be81223b2 100644 --- a/src/app/components/creator/content-list/content-list.component.html +++ b/src/app/components/creator/content-list/content-list.component.html @@ -13,21 +13,21 @@ </div> <mat-grid-list cols="3" rowHeight="1:1"> <mat-grid-tile> - <button class="actionButton" mat-icon-button color="primary" + <button class="actionButton" mat-icon-button routerLink="/creator/room/{{ roomId }}/create-content"> <mat-icon class="actionIcon" matTooltip="{{ 'room-page.create-content' | translate}}">note_add</mat-icon> <h3>{{ 'room-page.create-content' | translate}}</h3> </button> </mat-grid-tile> <mat-grid-tile> - <button class="actionButton" mat-icon-button color="primary" + <button class="actionButton" mat-icon-button routerLink="/creator/room/{{ roomId }}/{{ contentGroup.name }}/presentation"> <mat-icon class="actionIcon" matTooltip="{{ 'room-page.present' | translate}}">school</mat-icon> <h3>{{ 'room-page.present' | translate}}</h3> </button> </mat-grid-tile> <mat-grid-tile> - <button class="actionButton" mat-icon-button color="primary" + <button class="actionButton" mat-icon-button routerLink="/creator/room/{{ roomId }}/statistics"> <mat-icon class="actionIcon" matTooltip="{{ 'room-page.answer-statistics' | translate}}">insert_chart</mat-icon> <h3>{{ 'room-page.answer-statistics' | translate}}</h3> 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 5f53fedc3a0768c5c60c2b55937dba471c3641b5..cdfb5ca97078bb309cb88703594f5be20391da46 100644 --- a/src/app/components/creator/content-list/content-list.component.scss +++ b/src/app/components/creator/content-list/content-list.component.scss @@ -9,7 +9,7 @@ mat-card-content > :first-child { } mat-expansion-panel { - background-color: var(--content-mat-expansion-panel); + background-color: var(--background-2); margin-bottom: 5px; } @@ -21,14 +21,14 @@ mat-panel-title { } mat-expansion-panel-header { - background-color: var(--content-group-card) !important; + background-color: var(--background-2) !important; padding-left: 3%; padding-right: 3%; word-break: break-all; } .matPanel { - background-color: var(--content-group-card); + background-color: var(--background-2); margin-bottom: 5px; color: black!important; } @@ -47,6 +47,8 @@ h2 { width: 75%; height: 75%; margin: 5px; + transition: all 0.5s; + color: var(--primary)!important; &:hover { transform: scale(1.25) 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 5a50a5170362d13bb602a317f1307460f6e12e29..7ed3e22abbfbd86c20e7360cb25a013780e5a27b 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 @@ -15,7 +15,7 @@ </mat-card-subtitle> </mat-card-header> <span class="fill-remaining-space"></span> - <button mat-icon-button id="settings" *ngIf="!modify" (click)="showEditDialog()" color="primary"> + <button mat-icon-button id="settings" (click)="showEditDialog()"> <mat-icon id="settings-icon" matTooltip="{{ 'room-page.session-settings' | translate}}">settings</mat-icon> </button> </div> @@ -32,14 +32,14 @@ </mat-card-content> <mat-grid-list cols="2" rowHeight="2:1"> <mat-grid-tile colspan="1" rowspan="1"> - <button mat-icon-button color="primary" + <button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/create-content"> <mat-icon matTooltip="{{ 'room-page.create-content' | translate}}">note_add</mat-icon> <h3>{{ 'room-page.create-content' | translate}}</h3> </button> </mat-grid-tile> <mat-grid-tile> - <button mat-icon-button color="primary" + <button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/comments"> <mat-icon matTooltip="{{ 'room-page.comments' | translate}}">question_answer</mat-icon> <h3>{{ 'room-page.comments' | translate}}</h3> @@ -48,13 +48,13 @@ </mat-grid-list> <mat-grid-list cols="2" rowHeight="2:1"> <mat-grid-tile> - <button mat-icon-button color="primary" routerLink="/creator/room/{{ room.shortId }}/statistics"> + <button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/statistics"> <mat-icon matTooltip="{{ 'room-page.answer-statistics' | translate}}">insert_chart</mat-icon> <h3>{{ 'room-page.answer-statistics' | translate}}</h3> </button> </mat-grid-tile> <mat-grid-tile> - <button mat-icon-button color="primary" routerLink="/creator/room/{{ room.shortId }}/feedback-barometer"> + <button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/feedback-barometer"> <mat-icon class="smallerIcon" matTooltip="{{ 'room-page.live-feedback' | translate}}">thumbs_up_down </mat-icon> <h3>{{ 'room-page.live-feedback' | translate}}</h3> 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 300567e577b672df76ecb9e5b214fce848256b49..24ace0566d9beb5c9588d234648ce5da323b9fbf 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 @@ -12,6 +12,7 @@ mat-card-content > :first-child { button { width: 30%; + transition: all 0.5s; &:hover { transform: scale(1.25) } @@ -25,6 +26,7 @@ button { width: 75%; height: 75%; margin-bottom: 20px; + color: var(--primary)!important; } #settings { diff --git a/src/app/components/home/home-page/home-page.component.html b/src/app/components/home/home-page/home-page.component.html index e829c2b878c952b04e2258df948f295bd6b89d8c..43bf206c84fd77c89cbd7424fcf921c982492c2a 100644 --- a/src/app/components/home/home-page/home-page.component.html +++ b/src/app/components/home/home-page/home-page.component.html @@ -1,5 +1,5 @@ <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill> - <div fxLayout="row" fxLayoutAlign="center" *ngIf="mobile === true"> + <div fxLayout="row" fxLayoutAlign="center" *ngIf="deviceType === 'mobile'"> <h1> <span class="main-heading-secondary">{{ 'login-page.welcome' | translate }}</span> <span class="main-heading-primary">ARSnova</span> @@ -8,7 +8,7 @@ <div fxLayout="row" fxLayoutAlign="center"> <mat-card class="outer"> <mat-card-content> - <mat-card-header *ngIf="mobile === false"> + <mat-card-header *ngIf="deviceType === 'desktop'"> <mat-card-title> <h1> <span class="main-heading-secondary">{{ 'login-page.welcome' | translate }}</span> 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 cb1f733c9886be682c4dbf113f8cd660a20f1a80..0ec3f5d386b4621115912f4c65c3dc99a2e930cd 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: var(--home-page-outer); + background-color: var(--background-2); } .main-heading-primary { diff --git a/src/app/components/home/home-page/home-page.component.ts b/src/app/components/home/home-page/home-page.component.ts index eec655fa3ea823dfbd746378b02d76df1eb5bd9f..89a824fdc48ef59a6a164d0f75b50ef749f803a3 100644 --- a/src/app/components/home/home-page/home-page.component.ts +++ b/src/app/components/home/home-page/home-page.component.ts @@ -7,13 +7,18 @@ import { Component, OnInit } from '@angular/core'; }) export class HomePageComponent implements OnInit { - mobile = true; + deviceType: string; - constructor() { } + constructor() { + } ngOnInit() { - if (window.innerWidth > 500) { - this.mobile = false; + if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { + localStorage.setItem('deviceType', 'mobile'); + this.deviceType = 'mobile'; + } else { + localStorage.setItem('deviceType', 'desktop'); + this.deviceType = 'desktop'; } } 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 9d3af93f64e160bd31d886bbed5abd1bb7286ab8..5d13c6f91fb174607b441a92971482100e029f80 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 [ngClass]="themeClass"> +<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill> <div fxLayout="row" fxLayoutAlign="center"> <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner> <mat-card *ngIf="room"> @@ -23,17 +23,17 @@ </mat-card-content> <mat-grid-list cols="3" rowHeight="2:1"> <mat-grid-tile> - <button mat-icon-button color="primary" routerLink="/participant/room/{{ room.shortId }}/comments"> + <button mat-icon-button routerLink="/participant/room/{{ room.shortId }}/comments"> <mat-icon matTooltip="{{ 'room-page.create-comment' | translate}}">question_answer</mat-icon> </button> </mat-grid-tile> <mat-grid-tile> - <button mat-icon-button color="primary" routerLink="/participant/room/{{ room.shortId }}/feedback-barometer"> + <button mat-icon-button routerLink="/participant/room/{{ room.shortId }}/feedback-barometer"> <mat-icon matTooltip="{{ 'room-page.give-feedback' | translate}}">thumbs_up_down</mat-icon> </button> </mat-grid-tile> <mat-grid-tile> - <button mat-icon-button color="primary" routerLink="/participant/room/{{ room.shortId }}/statistics"> + <button mat-icon-button routerLink="/participant/room/{{ room.shortId }}/statistics"> <mat-icon matTooltip="{{ 'statistic.answer-statistic' | translate}}">insert_chart</mat-icon> </button> </mat-grid-tile> 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 ddd917fa6f44ccf38535877f2465856aaa3f37ca..6af9047c4f0e09ea8c9d859f4def795fa662b712 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 @@ -14,6 +14,7 @@ mat-card-content>:first-child { width: 75%; height: 75%; margin-bottom: 20px; + color: var(--primary)!important; } mat-icon { @@ -25,6 +26,8 @@ mat-icon { button { width: 30%; + transition: all 0.5s; + &:hover { transform: scale(1.25) } 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 17da83ef1471bd6725c32cf35592d671bde36195..fe7da59963145fd02ab1f2272a7145519dc3fa71 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 @@ .outer-card { margin-bottom: 10px; - background-color: var(--comment-list-bg); + background-color: var(--primary); } app-comment { diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss index df231fd142dd04c6487ca5645d96db7aa031b8d7..79f526e6997b6182b0172f061c8abbe0b16dacc3 100644 --- a/src/app/components/shared/comment/comment.component.scss +++ b/src/app/components/shared/comment/comment.component.scss @@ -12,12 +12,6 @@ mat-card-content > :first-child { margin-top: 20px; } -mat-toolbar { - border-radius: 10px; - margin-bottom: 20px; - background-color: var(--comment-mat-toolbar); -} - .voting-icon { width: 35px; height: 35px; diff --git a/src/app/components/shared/content-groups/content-groups.component.html b/src/app/components/shared/content-groups/content-groups.component.html index 5e3f715c19ea95d13c8c6f8c22e720e411bcb2e8..9f29f380bd59352f2d1ddd3b5bbd14c933c32760 100644 --- a/src/app/components/shared/content-groups/content-groups.component.html +++ b/src/app/components/shared/content-groups/content-groups.component.html @@ -1,4 +1,4 @@ -<mat-card *ngFor="let contentGroup of contentGroups" (click)="viewContents(contentGroup)"> +<mat-card id="contentGroup" *ngFor="let contentGroup of contentGroups" (click)="viewContents(contentGroup)"> <mat-card-header> <mat-card-title *ngIf="contentGroup.name === 'Default'"> {{'room-page.default-content-group' | translate}} 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 43d9fe584f0b5e78a3d256dfed3196bc63b8286c..3feaad67d10d8986ec94a22d00ea52802abbd351 100644 --- a/src/app/components/shared/content-groups/content-groups.component.scss +++ b/src/app/components/shared/content-groups/content-groups.component.scss @@ -1,20 +1,20 @@ @import '../../../../theme/default-Theme/_variables.scss'; -.mat-card { - background-color: var(--content-group-card) !important; +#contentGroup { + background-color: var(--background-2); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); overflow: hidden; position: relative; top: 0; text-align: center; - transition: all 0.5; + transition: all 0.5s; margin-top: 10px; max-height: 50px; padding: 5px; &:hover { cursor: pointer; - background-color: var(--content-group-card-hover) !important; + background-color: var(--primary); transform: translateZ(20px); transform: translateY(-5px); transform: scaleY(1.1); 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 a281b1fd9906c963ace50dfe4401cffa4f5b5e76..e4ea44271c67c2cc96bad91aa1d5a7cae40762dc 100644 --- a/src/app/components/shared/room-list/room-list.component.scss +++ b/src/app/components/shared/room-list/room-list.component.scss @@ -15,7 +15,7 @@ button { } #matPanelHeader { - background-color: var(--room-list-mPHeader); + background-color: var(--background-2); margin-bottom: 5px; color: white; } @@ -31,13 +31,13 @@ mat-panel-title { } .headerTitle { - width: 8% !important; - color: var(--room-list-card-color)!important; + width: 8%; + color: var(--primary)!important; } .panelTitle { - width: 8% !important; - color: black !important; + width: 8%; + color: black!important; } diff --git a/src/theme/dark-Theme/darkTheme.const.ts b/src/theme/dark-Theme/darkTheme.const.ts index eda2c5ec0ae02903b9d52f1e0bf9488e04ef0e03..bc8f4cc9363479dce765f47c37acae573edbcc44 100644 --- a/src/theme/dark-Theme/darkTheme.const.ts +++ b/src/theme/dark-Theme/darkTheme.const.ts @@ -1,20 +1,18 @@ 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 + '--primary' : '#37474F', + '--background': '#616161', // app.component.scss + '--background-2': '#9E9E9E', + '--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 @@ -23,10 +21,7 @@ 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': '#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 @@ -40,9 +35,7 @@ export const dark = { '--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 diff --git a/src/theme/default-Theme/defaultTheme.const.ts b/src/theme/default-Theme/defaultTheme.const.ts index 8917d2d50288ed067ef26a88485bad255fc72f26..e37c02cf7d5367391d6041d21629eace25861ff2 100644 --- a/src/theme/default-Theme/defaultTheme.const.ts +++ b/src/theme/default-Theme/defaultTheme.const.ts @@ -1,20 +1,18 @@ 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 + '--primary' : '#4DB6AC', // several components + '--background': '#B2DFDB', // app.component.scss + '--background-2': '#BBDEFB', + + '--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 @@ -23,15 +21,11 @@ export const defaultTheme = { '--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-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 @@ -40,9 +34,7 @@ export const defaultTheme = { '--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', '--highlighted-comment' : '#FFE082'