From b9fbf4209bc11fd7e032fff6e89c6a0816c75fab Mon Sep 17 00:00:00 2001
From: Sean <sean.f.t.engelhardt@gmail.com>
Date: Fri, 12 Jun 2020 12:37:54 +0200
Subject: [PATCH] Cleanup theming related code

Enhance color usage, add more default themes, add solarized theme
---
 .../src/app/core/ui-services/theme.service.ts |   4 +-
 .../components/jitsi/jitsi.component.html     |   4 +-
 .../media-upload-content.component.html       |   2 +-
 .../projection-dialog.component.html          |   2 +-
 .../user-menu/user-menu.component.html        |   2 +-
 .../assignment-list.component.html            |   2 +-
 .../reset-password-confirm.component.html     |   2 +-
 .../reset-password.component.html             |   2 +-
 .../mediafile-list.component.html             |   6 +-
 .../category-detail.component.html            |   2 +-
 .../motion-block-detail.component.html        |   2 +-
 .../motion-detail.component.html              |   6 +-
 .../motion-list/motion-list.component.html    |   2 +-
 .../workflow-detail.component.html            |   2 +-
 .../workflow-list.component.html              |   2 +-
 .../motion-export-dialog.component.html       |   2 +-
 .../countdown-dialog.component.html           |   2 +-
 .../message-dialog.component.html             |   2 +-
 .../projector-edit-dialog.component.html      |   2 +-
 .../projector-list.component.html             |   2 +-
 .../app/site/site.component.scss-theme.scss   |   5 +-
 .../tag-list/tag-list.component.html          |   2 +-
 .../group-list/group-list.component.html      |   2 +-
 .../user-list/user-list.component.html        |   2 +-
 .../assets/styles/color-palettes/os-blue.scss |  32 +++
 .../assets/styles/color-palettes/os-cyan.scss |  32 +++
 .../assets/styles/color-palettes/os-gray.scss |  32 +++
 .../os-green.scss}                            |   6 -
 .../assets/styles/color-palettes/os-red.scss  |  32 +++
 .../src/assets/styles/component-themes.scss   | 152 +++++++++++++
 .../assets/styles/openslides-dark-theme.scss  |  45 ----
 .../styles/openslides-developer-theme.scss    |  75 -------
 .../styles/openslides-general-theme.scss      |  40 ----
 .../src/assets/styles/openslides-theme.scss   |  75 -------
 .../assets/styles/themes/default-dark.scss    |   8 +
 .../assets/styles/themes/default-light.scss   |  38 ++++
 .../src/assets/styles/themes/green-dark.scss  |   7 +
 .../src/assets/styles/themes/green-light.scss |   7 +
 client/src/assets/styles/themes/red-dark.scss |   7 +
 .../src/assets/styles/themes/red-light.scss   |   7 +
 .../assets/styles/themes/solarized-dark.scss  |   8 +
 client/src/styles.scss                        | 212 ++----------------
 openslides/core/config_variables.py           |  30 ++-
 43 files changed, 442 insertions(+), 466 deletions(-)
 create mode 100644 client/src/assets/styles/color-palettes/os-blue.scss
 create mode 100644 client/src/assets/styles/color-palettes/os-cyan.scss
 create mode 100644 client/src/assets/styles/color-palettes/os-gray.scss
 rename client/src/assets/styles/{openslides-green-theme.scss => color-palettes/os-green.scss} (71%)
 create mode 100644 client/src/assets/styles/color-palettes/os-red.scss
 create mode 100644 client/src/assets/styles/component-themes.scss
 delete mode 100644 client/src/assets/styles/openslides-dark-theme.scss
 delete mode 100644 client/src/assets/styles/openslides-developer-theme.scss
 delete mode 100644 client/src/assets/styles/openslides-general-theme.scss
 delete mode 100644 client/src/assets/styles/openslides-theme.scss
 create mode 100644 client/src/assets/styles/themes/default-dark.scss
 create mode 100644 client/src/assets/styles/themes/default-light.scss
 create mode 100644 client/src/assets/styles/themes/green-dark.scss
 create mode 100644 client/src/assets/styles/themes/green-light.scss
 create mode 100644 client/src/assets/styles/themes/red-dark.scss
 create mode 100644 client/src/assets/styles/themes/red-light.scss
 create mode 100644 client/src/assets/styles/themes/solarized-dark.scss

diff --git a/client/src/app/core/ui-services/theme.service.ts b/client/src/app/core/ui-services/theme.service.ts
index fabf3b125..5f48621ca 100644
--- a/client/src/app/core/ui-services/theme.service.ts
+++ b/client/src/app/core/ui-services/theme.service.ts
@@ -12,7 +12,7 @@ export class ThemeService {
     /**
      * Constant, that describes the default theme class.
      */
-    public static DEFAULT_THEME = 'openslides-theme';
+    public static DEFAULT_THEME = 'openslides-default-light-theme';
 
     /**
      * Constant path of the logo with dark colors for bright themes.
@@ -54,7 +54,7 @@ export class ThemeService {
         this.currentTheme = theme;
 
         const classList = document.getElementsByTagName('body')[0].classList; // Get the classlist of the body.
-        const toRemove = Array.from(classList).filter((item: string) => item.includes('theme'));
+        const toRemove = Array.from(classList).filter((item: string) => item.includes('-theme'));
         if (toRemove.length) {
             classList.remove(...toRemove); // Remove all old themes.
         }
diff --git a/client/src/app/shared/components/jitsi/jitsi.component.html b/client/src/app/shared/components/jitsi/jitsi.component.html
index 50fb2af0b..d15c86d86 100644
--- a/client/src/app/shared/components/jitsi/jitsi.component.html
+++ b/client/src/app/shared/components/jitsi/jitsi.component.html
@@ -5,7 +5,7 @@
         <button
             type="button"
             mat-button
-            color="primary"
+            color=""
             (click)="openExternal()"
             matTooltip="{{ 'Open Jitsi in new tab' | translate }}"
         >
@@ -78,7 +78,7 @@
                     (click)="enterConversation()"
                     matTooltip="{{ 'Enter live conference' | translate }}"
                 >
-                    <mat-icon color="primary">meeting_room</mat-icon>
+                    <mat-icon color="">meeting_room</mat-icon>
                 </button>
 
                 <mat-icon *ngIf="enableJitsi && !isAccessPermitted" class="indicator">no_meeting_room</mat-icon>
diff --git a/client/src/app/shared/components/media-upload-content/media-upload-content.component.html b/client/src/app/shared/components/media-upload-content/media-upload-content.component.html
index 63bb23f0f..9780162be 100644
--- a/client/src/app/shared/components/media-upload-content/media-upload-content.component.html
+++ b/client/src/app/shared/components/media-upload-content/media-upload-content.component.html
@@ -115,7 +115,7 @@
         type="button"
         mat-raised-button
         (click)="onUploadButton()"
-        color="primary"
+        color="accent"
         [disabled]="uploadList.data.length === 0"
     >
         <span>{{ 'Upload' | translate }}</span>
diff --git a/client/src/app/shared/components/projection-dialog/projection-dialog.component.html b/client/src/app/shared/components/projection-dialog/projection-dialog.component.html
index f57c08522..98c1eb9e6 100644
--- a/client/src/app/shared/components/projection-dialog/projection-dialog.component.html
+++ b/client/src/app/shared/components/projection-dialog/projection-dialog.component.html
@@ -45,7 +45,7 @@
     </div>
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-button osAutofocus (click)="onProject()" color="primary">{{ 'Project' | translate }}</button>
+    <button mat-button osAutofocus (click)="onProject()" color="accent">{{ 'Project' | translate }}</button>
     <button mat-button (click)="onAddToPreview()">{{ 'Add to queue' | translate }}</button>
     <button mat-button (click)="onCancel()">{{ 'Cancel' | translate }}</button>
 </mat-dialog-actions>
diff --git a/client/src/app/shared/components/user-menu/user-menu.component.html b/client/src/app/shared/components/user-menu/user-menu.component.html
index e728905b4..6d630beef 100644
--- a/client/src/app/shared/components/user-menu/user-menu.component.html
+++ b/client/src/app/shared/components/user-menu/user-menu.component.html
@@ -17,7 +17,7 @@
                 (click)="toggleUserIsPresent()"
                 *ngIf="allowSelfSetPresent"
             >
-                <mat-icon [color]="user.is_present ? 'primary' : ''" class="menu-icon">
+                <mat-icon [color]="user.is_present ? 'accent' : ''" class="menu-icon">
                     {{ user.is_present ? 'check_box' : 'check_box_outline_blank' }}
                 </mat-icon>
                 <span class="menu-text">{{ 'Present' | translate }}</span>
diff --git a/client/src/app/site/assignments/components/assignment-list/assignment-list.component.html b/client/src/app/site/assignments/components/assignment-list/assignment-list.component.html
index 08191b5fc..0ffd91b35 100644
--- a/client/src/app/site/assignments/components/assignment-list/assignment-list.component.html
+++ b/client/src/app/site/assignments/components/assignment-list/assignment-list.component.html
@@ -41,7 +41,7 @@
                 {{ assignment.getListTitle() }}
             </div>
             <mat-chip-list class="ellipsis-overflow" *ngIf="vp.isMobile">
-                <mat-chip color="primary" selected>
+                <mat-chip color="" selected>
                     {{ assignment.phaseString | translate }}
                 </mat-chip>
             </mat-chip-list>
diff --git a/client/src/app/site/login/components/reset-password-confirm/reset-password-confirm.component.html b/client/src/app/site/login/components/reset-password-confirm/reset-password-confirm.component.html
index 8dea176ff..5732bc431 100644
--- a/client/src/app/site/login/components/reset-password-confirm/reset-password-confirm.component.html
+++ b/client/src/app/site/login/components/reset-password-confirm/reset-password-confirm.component.html
@@ -18,7 +18,7 @@
         <button
             type="submit"
             mat-raised-button
-            color="primary"
+            color="accent"
             class="submit-button"
             [disabled]="newPasswordForm.invalid"
         >
diff --git a/client/src/app/site/login/components/reset-password/reset-password.component.html b/client/src/app/site/login/components/reset-password/reset-password.component.html
index 0af4e2056..07fabc626 100644
--- a/client/src/app/site/login/components/reset-password/reset-password.component.html
+++ b/client/src/app/site/login/components/reset-password/reset-password.component.html
@@ -18,7 +18,7 @@
         <button
             type="submit"
             mat-raised-button
-            color="primary"
+            color="accent"
             class="submit-button"
             [disabled]="resetPasswordForm.invalid"
         >
diff --git a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
index 9dd482a54..c99784452 100644
--- a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
+++ b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
@@ -294,7 +294,7 @@
             type="submit"
             mat-button
             [disabled]="!fileEditForm.valid"
-            color="primary"
+            color="accent"
             (click)="onSaveEditedFile(fileEditForm.value)"
         >
             <span>{{ 'Save' | translate }}</span>
@@ -326,7 +326,7 @@
         </form>
     </div>
     <div mat-dialog-actions>
-        <button type="submit" mat-button [disabled]="!newDirectoryForm.valid" color="primary" [mat-dialog-close]="true">
+        <button type="submit" mat-button [disabled]="!newDirectoryForm.valid" color="accent" [mat-dialog-close]="true">
             <span>{{ 'Save' | translate }}</span>
         </button>
         <button type="button" mat-button [mat-dialog-close]="null">
@@ -353,7 +353,7 @@
         </mat-form-field>
     </div>
     <div mat-dialog-actions>
-        <button type="submit" mat-button color="primary" [mat-dialog-close]="true">
+        <button type="submit" mat-button color="accent" [mat-dialog-close]="true">
             <span>{{ 'Move' | translate }}</span>
         </button>
         <button type="button" mat-button [mat-dialog-close]="null">
diff --git a/client/src/app/site/motions/modules/category/components/category-detail/category-detail.component.html b/client/src/app/site/motions/modules/category/components/category-detail/category-detail.component.html
index 3d18c75f2..f1920ec6c 100644
--- a/client/src/app/site/motions/modules/category/components/category-detail/category-detail.component.html
+++ b/client/src/app/site/motions/modules/category/components/category-detail/category-detail.component.html
@@ -107,7 +107,7 @@
         </form>
     </div>
     <div mat-dialog-actions>
-        <button type="submit" mat-button [disabled]="!editForm.valid" color="primary" (click)="save()">
+        <button type="submit" mat-button [disabled]="!editForm.valid" color="accent" (click)="save()">
             <span>{{ 'Save' | translate }}</span>
         </button>
         <button type="button" mat-button [mat-dialog-close]="null">
diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html
index 3946b41bb..d194995b5 100644
--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html
@@ -209,7 +209,7 @@
         </form>
     </div>
     <div mat-dialog-actions>
-        <button type="submit" mat-button [disabled]="!blockEditForm.valid" color="primary" (click)="saveBlock()">
+        <button type="submit" mat-button [disabled]="!blockEditForm.valid" color="accent" (click)="saveBlock()">
             <span>{{ 'Save' | translate }}</span>
         </button>
         <button type="button" mat-button [mat-dialog-close]="null">
diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html b/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
index 20ca972b3..91b82a0b1 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
@@ -135,7 +135,7 @@
             </h1>
             <button
                 mat-icon-button
-                color="primary"
+                color="accent"
                 (click)="toggleFavorite()"
                 matTooltip="{{ 'Mark as personal favorite' | translate }}"
             >
@@ -215,7 +215,7 @@
             <button
                 type="button"
                 mat-stroked-button
-                color="primary"
+                color="accent"
                 (click)="support()"
                 *ngIf="perms.isAllowed('support', motion)"
             >
@@ -229,7 +229,7 @@
                 *ngIf="perms.isAllowed('unsupport', motion)"
                 (click)="unsupport()"
                 mat-stroked-button
-                color="primary"
+                color="accent"
             >
                 <mat-icon>thumb_down</mat-icon>
                 {{ 'Unsupport' | translate }}
diff --git a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html
index 4093f8798..2d4a5b799 100644
--- a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html
+++ b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html
@@ -407,7 +407,7 @@
     </div>
 
     <div mat-dialog-actions>
-        <button type="submit" mat-button color="primary" [mat-dialog-close]="infoDialog">
+        <button type="submit" mat-button color="accent" [mat-dialog-close]="infoDialog">
             <span>{{ 'Save' | translate }}</span>
         </button>
         <button type="button" mat-button [mat-dialog-close]="null">
diff --git a/client/src/app/site/motions/modules/motion-workflow/components/workflow-detail/workflow-detail.component.html b/client/src/app/site/motions/modules/motion-workflow/components/workflow-detail/workflow-detail.component.html
index 85bda9e3d..48548bc6b 100644
--- a/client/src/app/site/motions/modules/motion-workflow/components/workflow-detail/workflow-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-workflow/components/workflow-detail/workflow-detail.component.html
@@ -142,7 +142,7 @@
             type="submit"
             [disabled]="dialogData.value === '' && !dialogData.allowEmpty"
             mat-button
-            color="primary"
+            color="accent"
             [mat-dialog-close]="{ action: 'update', value: dialogData.value }"
         >
             <span>{{ 'Save' | translate }}</span>
diff --git a/client/src/app/site/motions/modules/motion-workflow/components/workflow-list/workflow-list.component.html b/client/src/app/site/motions/modules/motion-workflow/components/workflow-list/workflow-list.component.html
index 666d69f77..4d1c4eece 100644
--- a/client/src/app/site/motions/modules/motion-workflow/components/workflow-list/workflow-list.component.html
+++ b/client/src/app/site/motions/modules/motion-workflow/components/workflow-list/workflow-list.component.html
@@ -44,7 +44,7 @@
         <button
             type="submit"
             mat-button
-            color="primary"
+            color="accent"
             [disabled]="newWorkflowTitle === ''"
             [mat-dialog-close]="newWorkflowTitle"
         >
diff --git a/client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.html b/client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.html
index 764205125..cb34c21b5 100644
--- a/client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.html
+++ b/client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.html
@@ -104,7 +104,7 @@
 
     <!-- Action buttons -->
     <div mat-dialog-actions>
-        <button mat-button type="button" color="primary" [mat-dialog-close]="exportForm.value">
+        <button mat-button type="button" color="accent" [mat-dialog-close]="exportForm.value">
             <span>{{ 'Export' | translate }}</span>
         </button>
         <button mat-button type="button" (click)="onCloseClick()">
diff --git a/client/src/app/site/projector/components/countdown-dialog/countdown-dialog.component.html b/client/src/app/site/projector/components/countdown-dialog/countdown-dialog.component.html
index 86832bbfb..c33cdb3d5 100644
--- a/client/src/app/site/projector/components/countdown-dialog/countdown-dialog.component.html
+++ b/client/src/app/site/projector/components/countdown-dialog/countdown-dialog.component.html
@@ -30,7 +30,7 @@
         <button
             type="submit"
             mat-button
-            color="primary"
+            color="accent"
             [mat-dialog-close]="countdownForm.value"
             [disabled]="!countdownForm.valid"
         >
diff --git a/client/src/app/site/projector/components/message-dialog/message-dialog.component.html b/client/src/app/site/projector/components/message-dialog/message-dialog.component.html
index 7b0eb9d5b..40d0dae87 100644
--- a/client/src/app/site/projector/components/message-dialog/message-dialog.component.html
+++ b/client/src/app/site/projector/components/message-dialog/message-dialog.component.html
@@ -12,7 +12,7 @@
         <button
             type="submit"
             mat-button
-            color="primary"
+            color="accent"
             [mat-dialog-close]="messageForm.value"
             [disabled]="!messageForm.valid"
         >
diff --git a/client/src/app/site/projector/components/projector-edit-dialog/projector-edit-dialog.component.html b/client/src/app/site/projector/components/projector-edit-dialog/projector-edit-dialog.component.html
index 97ca3841c..80477af0b 100644
--- a/client/src/app/site/projector/components/projector-edit-dialog/projector-edit-dialog.component.html
+++ b/client/src/app/site/projector/components/projector-edit-dialog/projector-edit-dialog.component.html
@@ -181,7 +181,7 @@
         <!-- Actions -->
         <div mat-dialog-actions>
             <mat-divider></mat-divider>
-            <button type="submit" mat-button color="primary">
+            <button type="submit" mat-button color="accent">
                 <span>{{ 'Save' | translate }}</span>
             </button>
             <button type="button" mat-button [mat-dialog-close]="null">
diff --git a/client/src/app/site/projector/components/projector-list/projector-list.component.html b/client/src/app/site/projector/components/projector-list/projector-list.component.html
index d36ffa8e1..f6201b204 100644
--- a/client/src/app/site/projector/components/projector-list/projector-list.component.html
+++ b/client/src/app/site/projector/components/projector-list/projector-list.component.html
@@ -22,7 +22,7 @@
         </div>
 
         <div mat-dialog-actions>
-            <button type="submit" mat-button [disabled]="!createForm.valid" color="primary" [mat-dialog-close]="true">
+            <button type="submit" mat-button [disabled]="!createForm.valid" color="accent" [mat-dialog-close]="true">
                 <span>{{ 'Create' | translate }}</span>
             </button>
             <button type="button" mat-button [mat-dialog-close]="null">
diff --git a/client/src/app/site/site.component.scss-theme.scss b/client/src/app/site/site.component.scss-theme.scss
index 159bdae59..d4b0d145b 100644
--- a/client/src/app/site/site.component.scss-theme.scss
+++ b/client/src/app/site/site.component.scss-theme.scss
@@ -7,6 +7,7 @@
     $warn: map-get($theme, accent);
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
+    $is-dark-theme: map-get($theme, is-dark);
 
     os-site {
         /* main background color */
@@ -41,10 +42,10 @@
         /** style the active link */
         .active {
             mat-icon {
-                color: mat-color($primary);
+                color: mat-color(if($is-dark-theme, $accent, $primary));
             }
             span {
-                color: mat-color($primary);
+                color: mat-color(if($is-dark-theme, $accent, $primary));
             }
         }
     }
diff --git a/client/src/app/site/tags/components/tag-list/tag-list.component.html b/client/src/app/site/tags/components/tag-list/tag-list.component.html
index e5cfe86c4..b86d2ea17 100644
--- a/client/src/app/site/tags/components/tag-list/tag-list.component.html
+++ b/client/src/app/site/tags/components/tag-list/tag-list.component.html
@@ -49,7 +49,7 @@
     </div>
 
     <div mat-dialog-actions>
-        <button type="submit" mat-button [mat-dialog-close]="true" color="primary">
+        <button type="submit" mat-button [mat-dialog-close]="true" color="accent">
             <span>{{ 'Save' | translate }}</span>
         </button>
         <button type="button" mat-button [mat-dialog-close]="false">
diff --git a/client/src/app/site/users/components/group-list/group-list.component.html b/client/src/app/site/users/components/group-list/group-list.component.html
index e26baa27f..66629bb1a 100644
--- a/client/src/app/site/users/components/group-list/group-list.component.html
+++ b/client/src/app/site/users/components/group-list/group-list.component.html
@@ -77,7 +77,7 @@
             type="submit"
             mat-button
             [disabled]="!groupForm.valid"
-            color="primary"
+            color="accent"
             (click)="saveGroup(groupForm.value)"
         >
             <span>{{ 'Save' | translate }}</span>
diff --git a/client/src/app/site/users/components/user-list/user-list.component.html b/client/src/app/site/users/components/user-list/user-list.component.html
index 2ba9e4b0b..0caab0f59 100644
--- a/client/src/app/site/users/components/user-list/user-list.component.html
+++ b/client/src/app/site/users/components/user-list/user-list.component.html
@@ -295,7 +295,7 @@
         <button
             type="submit"
             mat-button
-            color="primary"
+            color="accent"
             [mat-dialog-close]="{
                 groups_id: infoDialog.groups_id,
                 gender: infoDialog.gender,
diff --git a/client/src/assets/styles/color-palettes/os-blue.scss b/client/src/assets/styles/color-palettes/os-blue.scss
new file mode 100644
index 000000000..9f3fadee6
--- /dev/null
+++ b/client/src/assets/styles/color-palettes/os-blue.scss
@@ -0,0 +1,32 @@
+$openslides-blue: (
+    50: #e6eff2,
+    100: #c1d6e0,
+    200: #98bbcb,
+    300: #6fa0b6,
+    400: #508ba6,
+    500: #317796,
+    600: #2c6f8e,
+    700: #256483,
+    800: #1f5a79,
+    900: #134768,
+    A100: #9fd7ff,
+    A200: #6cc2ff,
+    A400: #39acff,
+    A700: #1fa2ff,
+    contrast: (
+        50: #000000,
+        100: #000000,
+        200: #000000,
+        300: #000000,
+        400: #ffffff,
+        500: #ffffff,
+        600: #ffffff,
+        700: #ffffff,
+        800: #ffffff,
+        900: #ffffff,
+        A100: #000000,
+        A200: #000000,
+        A400: #000000,
+        A700: #000000
+    )
+);
diff --git a/client/src/assets/styles/color-palettes/os-cyan.scss b/client/src/assets/styles/color-palettes/os-cyan.scss
new file mode 100644
index 000000000..f6522375e
--- /dev/null
+++ b/client/src/assets/styles/color-palettes/os-cyan.scss
@@ -0,0 +1,32 @@
+$openslides-cyan: (
+    50: #e5f4f3,
+    100: #bfe3e0,
+    200: #95d0cc,
+    300: #6abdb7,
+    400: #4aafa7,
+    500: #2aa198,
+    600: #259990,
+    700: #1f8f85,
+    800: #19857b,
+    900: #0f746a,
+    A100: #a7fff5,
+    A200: #74ffef,
+    A400: #41ffe9,
+    A700: #28ffe6,
+    contrast: (
+        50: #000000,
+        100: #000000,
+        200: #000000,
+        300: #000000,
+        400: #000000,
+        500: #ffffff,
+        600: #ffffff,
+        700: #ffffff,
+        800: #ffffff,
+        900: #ffffff,
+        A100: #000000,
+        A200: #000000,
+        A400: #000000,
+        A700: #000000
+    )
+);
diff --git a/client/src/assets/styles/color-palettes/os-gray.scss b/client/src/assets/styles/color-palettes/os-gray.scss
new file mode 100644
index 000000000..b243ef11c
--- /dev/null
+++ b/client/src/assets/styles/color-palettes/os-gray.scss
@@ -0,0 +1,32 @@
+$openslides-grey: (
+    50: #eee8d5,
+    100: #93a1a1,
+    200: #93a1a1,
+    300: #839496,
+    400: #657b83,
+    500: #586e75,
+    600: #586e75,
+    700: #586e75,
+    800: #073642,
+    900: #002b36,
+    A100: #99b5c8,
+    A200: #65a2ce,
+    A400: #3d93d1,
+    A700: #268bd2,
+    contrast: (
+        50: #002b36,
+        100: #002b36,
+        200: #002b36,
+        300: #002b36,
+        400: #002b36,
+        500: #fdf6e3,
+        600: #fdf6e3,
+        700: #fdf6e3,
+        800: #fdf6e3,
+        900: #fdf6e3,
+        A100: #002b36,
+        A200: #002b36,
+        A400: #002b36,
+        A700: #002b36
+    )
+);
diff --git a/client/src/assets/styles/openslides-green-theme.scss b/client/src/assets/styles/color-palettes/os-green.scss
similarity index 71%
rename from client/src/assets/styles/openslides-green-theme.scss
rename to client/src/assets/styles/color-palettes/os-green.scss
index 8c713882a..d6bdf91f5 100644
--- a/client/src/assets/styles/openslides-green-theme.scss
+++ b/client/src/assets/styles/color-palettes/os-green.scss
@@ -30,9 +30,3 @@ $openslides-green: (
         A700: #000000
     )
 );
-
-$openslides-primary: mat-palette($openslides-green);
-$openslides-accent: mat-palette($mat-amber);
-$openslides-warn: mat-palette($mat-red);
-
-$openslides-green-theme: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn);
diff --git a/client/src/assets/styles/color-palettes/os-red.scss b/client/src/assets/styles/color-palettes/os-red.scss
new file mode 100644
index 000000000..3c928144e
--- /dev/null
+++ b/client/src/assets/styles/color-palettes/os-red.scss
@@ -0,0 +1,32 @@
+$openslides-primary-red: (
+    50: #f8e4e5,
+    100: #edbbbd,
+    200: #e18e91,
+    300: #d56065,
+    400: #cc3e44,
+    500: #c31c23,
+    600: #bd191f,
+    700: #b5141a,
+    800: #ae1115,
+    900: #a1090c,
+    A100: #ffcece,
+    A200: #ff9b9b,
+    A400: #ff6869,
+    A700: #ff4e50,
+    contrast: (
+        50: #000000,
+        100: #000000,
+        200: #000000,
+        300: #000000,
+        400: #ffffff,
+        500: #ffffff,
+        600: #ffffff,
+        700: #ffffff,
+        800: #ffffff,
+        900: #ffffff,
+        A100: #404040,
+        A200: #303030,
+        A400: #262626,
+        A700: #1a1a1a
+    )
+);
diff --git a/client/src/assets/styles/component-themes.scss b/client/src/assets/styles/component-themes.scss
new file mode 100644
index 000000000..c31fda9c9
--- /dev/null
+++ b/client/src/assets/styles/component-themes.scss
@@ -0,0 +1,152 @@
+/** Imports the material-design-theming */
+@import '~@angular/material/theming';
+@include mat-core();
+
+/** NGrid theme */
+@import '~@pebula/ngrid/theming';
+$narrow-spacing: (
+    spacing: $pbl-spacing-theme-narrow
+);
+
+/** Import brand theme */
+@import './assets/styles/themes/default-dark.scss';
+@import './assets/styles/themes/default-light.scss';
+@import './assets/styles/themes/green-dark.scss';
+@import './assets/styles/themes/green-light.scss';
+@import './assets/styles/themes/red-dark.scss';
+@import './assets/styles/themes/red-light.scss';
+@import './assets/styles/themes/solarized-dark.scss';
+
+/** Global component style definition */
+@import './assets/styles/global-components-style.scss';
+
+/** Import the component-related style sheets here */
+@import './app/site/site.component.scss-theme.scss';
+@import './app/shared/components/projector-button/projector-button.component.scss';
+@import './app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss-theme.scss';
+@import './app/shared/components/sorting-tree/sorting-tree.component.scss';
+@import './app/shared/components/global-spinner/global-spinner.component.scss';
+@import './app/shared/components/tile/tile.component.scss';
+@import './app/shared/components/block-tile/block-tile.component.scss';
+@import './app/shared/components/icon-container/icon-container.component.scss';
+@import './app/site/common/components/start/start.component.scss';
+@import './app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss-theme.scss';
+@import './app/site/common/components/super-search/super-search.component.scss';
+@import './app/shared/components/rounded-input/rounded-input.component.scss';
+@import './app/shared/components/meta-text-block/meta-text-block.component.scss';
+@import './app/site/config/components/config-field/config-field.component.scss-theme.scss';
+@import './app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.components.scss-theme.scss';
+@import './app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss-theme.scss';
+@import './app/shared/components/banner/banner.component.scss-theme.scss';
+@import './app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss-theme.scss';
+@import './app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss-theme.scss';
+@import './app/site/assignments/components/assignment-poll-detail/assignment-poll-detail-component.scss-theme.scss';
+@import './app/shared/components/progress-snack-bar/progress-snack-bar.component.scss-theme.scss';
+@import './app/shared/components/jitsi/jitsi.component.scss-theme.scss';
+@import './app/shared/components/list-view-table/list-view-table.component.scss-theme.scss';
+@import './app/site/common/components/user-statistics/user-statistics.component.scss-theme.scss';
+@import './app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss';
+
+/** Mix the component-related style-rules. Every single custom style goes here */
+@mixin openslides-components-theme($theme) {
+    @include os-site-theme($theme);
+    @include os-components-style($theme);
+    @include os-projector-button-style($theme);
+    @include os-list-of-speakers-style($theme);
+    @include os-sorting-tree-style($theme);
+    @include os-global-spinner-theme($theme);
+    @include os-tile-style($theme);
+    @include os-mediafile-list-theme($theme);
+    @include os-super-search-style($theme);
+    @include os-rounded-input-style($theme);
+    @include os-meta-text-block-style($theme);
+    @include os-config-field-style($theme);
+    @include os-amendment-create-wizard-style($theme);
+    @include os-motion-detail-diff-style($theme);
+    @include os-banner-style($theme);
+    @include os-motion-poll-style($theme);
+    @include os-motion-poll-detail-style($theme);
+    @include os-assignment-poll-detail-style($theme);
+    @include os-progress-snack-bar-style($theme);
+    @include os-jitsi-theme($theme);
+    @include os-list-view-table-theme($theme);
+    @include os-user-statistics-style($theme);
+    @include os-login-wrapper-theme($theme);
+}
+
+.openslides-default-light-theme {
+    @include angular-material-theme($openslides-default-light);
+    @include openslides-components-theme($openslides-default-light);
+    $ngrid-material-theme: pbl-light-theme($openslides-default-light);
+    @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
+}
+
+.openslides-default-dark-theme {
+    @include angular-material-theme($openslides-default-dark);
+    @include openslides-components-theme($openslides-default-dark);
+    $ngrid-material-theme: pbl-dark-theme($openslides-default-dark);
+    @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
+}
+
+.openslides-red-light-theme {
+    @include angular-material-theme($openslides-red-light);
+    @include openslides-components-theme($openslides-red-light);
+    $ngrid-material-theme: pbl-light-theme($openslides-red-light);
+    @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
+}
+
+.openslides-red-dark-theme {
+    @include angular-material-theme($openslides-red-dark);
+    @include openslides-components-theme($openslides-red-dark);
+    $ngrid-material-theme: pbl-dark-theme($openslides-red-dark);
+    @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
+}
+
+.openslides-green-light-theme {
+    @include angular-material-theme($openslides-green-light);
+    @include openslides-components-theme($openslides-green-light);
+    $ngrid-material-theme: pbl-light-theme($openslides-green-light);
+    @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
+}
+
+.openslides-green-dark-theme {
+    @include angular-material-theme($openslides-green-dark);
+    @include openslides-components-theme($openslides-green-dark);
+    $ngrid-material-theme: pbl-dark-theme($openslides-green-dark);
+    @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
+}
+
+.openslides-solarized-dark-theme {
+    @include angular-material-theme($openslides-solarized-dark);
+    @include openslides-components-theme($openslides-solarized-dark);
+    $ngrid-material-theme: pbl-dark-theme($openslides-solarized-dark);
+    @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
+}
+
+/**
+ * Custom configuration for light themes
+ */
+ [class^="openslides-"][class*="-light-theme"] {
+    .logo-container {
+        img.dark {
+            display: none;
+        }
+        img.default {
+            display: inherit;
+        }
+    }
+}
+
+/**
+ * Custom configuration for dark themes
+ */
+ [class^="openslides-"][class*="-dark-theme"] {
+    .logo-container {
+        img.dark {
+            display: inherit;
+        }
+        img.default {
+            display: none;
+        }
+    }
+}
diff --git a/client/src/assets/styles/openslides-dark-theme.scss b/client/src/assets/styles/openslides-dark-theme.scss
deleted file mode 100644
index 18f1d40a3..000000000
--- a/client/src/assets/styles/openslides-dark-theme.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-// Defines the primary palette using the dark theme
-$openslides-primary-red: (
-    50 : #f8e4e5,
-    100 : #edbbbd,
-    200 : #e18e91,
-    300 : #d56065,
-    400 : #cc3e44,
-    500 : #c31c23,
-    600 : #bd191f,
-    700 : #b5141a,
-    800 : #ae1115,
-    900 : #a1090c,
-    A100 : #ffcece,
-    A200 : #ff9b9b,
-    A400 : #ff6869,
-    A700 : #ff4e50,
-    contrast: (
-        50 : #000000,
-        100 : #000000,
-        200 : #000000,
-        300 : #000000,
-        400 : #ffffff,
-        500 : #ffffff,
-        600 : #ffffff,
-        700 : #ffffff,
-        800 : #ffffff,
-        900 : #ffffff,
-        A100: #404040,
-        A200 : #303030,
-        A400 : #262626,
-        A700 : #1a1a1a
-    )
-);
-
-// TODO: /projectors/detail/*
-
-$openslides-primary: mat-palette($openslides-primary-red, 500, 300, 900);
-$openslides-accent: mat-palette($openslides-primary-red, 500, 300, 900);
-$openslides-warn: mat-palette($mat-orange, 700, 300, 900);
-
-$openslides-dark-theme: mat-dark-theme(
-    $openslides-primary,
-    $openslides-accent,
-    $openslides-warn
-);
diff --git a/client/src/assets/styles/openslides-developer-theme.scss b/client/src/assets/styles/openslides-developer-theme.scss
deleted file mode 100644
index 06490ca79..000000000
--- a/client/src/assets/styles/openslides-developer-theme.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-$openslides-developer-primary: (
-    50 : #000000,
-    100 : #000000,
-    200 : #000000,
-    300 : #000000,
-    400 : #000000,
-    500 : #000000,
-    600 : #000000,
-    700 : #000000,
-    800 : #000000,
-    900 : #000000,
-    A100 : #000000,
-    A200 : #000000,
-    A400 : #000000,
-    A700 : #000000,
-    contrast: (
-        50 : #000000,
-        100 : #000000,
-        200 : #000000,
-        300 : #000000,
-        400 : #000000,
-        500 : #000000,
-        600 : #000000,
-        700 : #000000,
-        800 : #000000,
-        900 : #000000,
-        A100 : #000000,
-        A200 : #000000,
-        A400 : #000000,
-        A700 : #000000,
-    )
-);
-
-$openslides-developer-accent: (
-    50 : #f4f9e1,
-    100 : #e5f0b3,
-    200 : #d3e781,
-    300 : #c1dd4e,
-    400 : #b4d528,
-    500 : #a7ce02,
-    600 : #9fc902,
-    700 : #96c201,
-    800 : #8cbc01,
-    900 : #7cb001,
-    A100 : #f2ffda,
-    A200 : #e1ffa7,
-    A400 : #cfff74,
-    A700 : #c6ff5a,
-    contrast: (
-        50 : #000000,
-        100 : #000000,
-        200 : #000000,
-        300 : #000000,
-        400 : #000000,
-        500 : #000000,
-        600 : #000000,
-        700 : #000000,
-        800 : #000000,
-        900 : #000000,
-        A100 : #000000,
-        A200 : #000000,
-        A400 : #000000,
-        A700 : #000000,
-    )
-);
-
-$openslides-primary: mat-palette($openslides-developer-primary);
-$openslides-accent: mat-palette($openslides-developer-accent);
-$openslides-warn: mat-palette($mat-pink);
-
-$openslides-developer-theme: mat-dark-theme(
-    $openslides-primary,
-    $openslides-accent,
-    $openslides-warn
-);
diff --git a/client/src/assets/styles/openslides-general-theme.scss b/client/src/assets/styles/openslides-general-theme.scss
deleted file mode 100644
index 85dfa4f56..000000000
--- a/client/src/assets/styles/openslides-general-theme.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-$openslides-primary-dark: (
-    50 : #e0e0e0,
-    100 : #b3b3b3,
-    200 : #808080,
-    300 : #4d4d4d,
-    400 : #262626,
-    500 : #000000,
-    600 : #000000,
-    700 : #000000,
-    800 : #000000,
-    900 : #000000,
-    A100 : #a6a6a6,
-    A200 : #8c8c8c,
-    A400 : #737373,
-    A700 : #666666,
-    contrast: (
-        50 : #000000,
-        100 : #000000,
-        200 : #000000,
-        300 : #ffffff,
-        400 : #ffffff,
-        500 : #ffffff,
-        600 : #ffffff,
-        700 : #ffffff,
-        800 : #ffffff,
-        900 : #ffffff,
-        A100 : #000000,
-        A200 : #000000,
-        A400 : #ffffff,
-        A700 : #ffffff,
-    )
-);
-
-$openslides-primary: mat-palette($openslides-primary-dark, 500, 700, 900);
-
-$openslides-general-theme: mat-light-theme(
-    $openslides-primary,
-    $openslides-primary,
-    $openslides-primary
-);
diff --git a/client/src/assets/styles/openslides-theme.scss b/client/src/assets/styles/openslides-theme.scss
deleted file mode 100644
index 14616b27c..000000000
--- a/client/src/assets/styles/openslides-theme.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-// define a real custom palette (using http://mcg.mbitson.com)
-$openslides-blue: (
-    50: #e6eff2,
-    100: #c1d6e0,
-    200: #98bbcb,
-    300: #6fa0b6,
-    400: #508ba6,
-    500: #317796,
-    600: #2c6f8e,
-    700: #256483,
-    800: #1f5a79,
-    900: #134768,
-    A100: #9fd7ff,
-    A200: #6cc2ff,
-    A400: #39acff,
-    A700: #1fa2ff,
-    contrast: (
-        50: #000000,
-        100: #000000,
-        200: #000000,
-        300: #000000,
-        400: #ffffff,
-        500: #ffffff,
-        600: #ffffff,
-        700: #ffffff,
-        800: #ffffff,
-        900: #ffffff,
-        A100: #000000,
-        A200: #000000,
-        A400: #000000,
-        A700: #000000
-    )
-);
-
-// Generate paletes using: https://material.io/design/color/
-// default values fir mat-palette: $default: 500, $lighter: 100, $darker: 700.
-$openslides-primary: mat-palette($openslides-blue);
-
-$openslides-accent: mat-palette($mat-light-blue);
-
-$openslides-warn: mat-palette($mat-red);
-
-// Create the theme object (a Sass map containing all of the palettes).
-$openslides-theme: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn);
-
-// Create Sass color vars (for using in scss files).
-// This will be set dynamically with the selecting theme
-// $os-primary: mat-color($openslides-primary);
-// $os-accent: mat-color($openslides-accent);
-// $os-warn: mat-color($openslides-warn);
-
-$os-outline: mat-color($mat-grey, 300);
-$os-background: mat-color($mat-grey, 100);
-
-/** This is the workaround to set a custom background-color
- *  In the first step the color must be merged, in order to have to a map.
- *  The components will get a value from this map.
- */
-$background: map-get($openslides-theme, background);
-$background: map_merge(
-    $background,
-    (
-        background: $os-background
-    )
-);
-
-/**
- *  Merge the theme with the custom-background.
- */
-$openslides-theme: map_merge(
-    $openslides-theme,
-    (
-        background: $background
-    )
-);
diff --git a/client/src/assets/styles/themes/default-dark.scss b/client/src/assets/styles/themes/default-dark.scss
new file mode 100644
index 000000000..0a61ede0b
--- /dev/null
+++ b/client/src/assets/styles/themes/default-dark.scss
@@ -0,0 +1,8 @@
+@import './assets/styles/color-palettes/os-blue';
+
+$openslides-primary: mat-palette($openslides-blue);
+$openslides-accent: mat-palette($mat-light-blue);
+$openslides-warn: mat-palette($mat-red);
+
+$openslides-default-dark: mat-dark-theme($openslides-primary, $openslides-accent, $openslides-warn);
+
diff --git a/client/src/assets/styles/themes/default-light.scss b/client/src/assets/styles/themes/default-light.scss
new file mode 100644
index 000000000..5cca6e425
--- /dev/null
+++ b/client/src/assets/styles/themes/default-light.scss
@@ -0,0 +1,38 @@
+@import './assets/styles/color-palettes/os-blue';
+
+// Generate paletes using: https://material.io/design/color/
+// default values for mat-palette: $default: 500, $lighter: 100, $darker: 700.
+$openslides-primary: mat-palette($openslides-blue);
+$openslides-accent: mat-palette($mat-light-blue);
+$openslides-warn: mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$openslides-default-light: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn);
+
+// Create Sass color vars (for using in scss files).
+// This will be set dynamically with the selecting theme
+
+$os-outline: mat-color($mat-grey, 300);
+$os-background: mat-color($mat-grey, 100);
+
+/** This is the workaround to set a custom background-color
+ *  In the first step the color must be merged, in order to have to a map.
+ *  The components will get a value from this map.
+ */
+$background: map-get($openslides-default-light, background);
+$background: map_merge(
+    $background,
+    (
+        background: $os-background
+    )
+);
+
+/**
+ *  Merge the theme with the custom-background.
+ */
+$openslides-default-light: map_merge(
+    $openslides-default-light,
+    (
+        background: $background
+    )
+);
diff --git a/client/src/assets/styles/themes/green-dark.scss b/client/src/assets/styles/themes/green-dark.scss
new file mode 100644
index 000000000..bad969852
--- /dev/null
+++ b/client/src/assets/styles/themes/green-dark.scss
@@ -0,0 +1,7 @@
+@import './assets/styles/color-palettes/os-green.scss';
+
+$openslides-primary: mat-palette($openslides-green);
+$openslides-accent: mat-palette($mat-amber);
+$openslides-warn: mat-palette($mat-red);
+
+$openslides-green-dark: mat-dark-theme($openslides-primary, $openslides-accent, $openslides-warn);
diff --git a/client/src/assets/styles/themes/green-light.scss b/client/src/assets/styles/themes/green-light.scss
new file mode 100644
index 000000000..53f8c3f99
--- /dev/null
+++ b/client/src/assets/styles/themes/green-light.scss
@@ -0,0 +1,7 @@
+@import './assets/styles/color-palettes/os-green.scss';
+
+$openslides-primary: mat-palette($openslides-green);
+$openslides-accent: mat-palette($mat-amber);
+$openslides-warn: mat-palette($mat-red);
+
+$openslides-green-light: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn);
diff --git a/client/src/assets/styles/themes/red-dark.scss b/client/src/assets/styles/themes/red-dark.scss
new file mode 100644
index 000000000..bc2d9e40d
--- /dev/null
+++ b/client/src/assets/styles/themes/red-dark.scss
@@ -0,0 +1,7 @@
+@import './assets/styles/color-palettes/os-red.scss';
+
+$openslides-primary: mat-palette($openslides-primary-red, 500, 300, 900);
+$openslides-accent: mat-palette($openslides-primary-red, 500, 300, 900);
+$openslides-warn: mat-palette($mat-orange, 700, 300, 900);
+
+$openslides-red-dark: mat-dark-theme($openslides-primary, $openslides-accent, $openslides-warn);
diff --git a/client/src/assets/styles/themes/red-light.scss b/client/src/assets/styles/themes/red-light.scss
new file mode 100644
index 000000000..3a7a0fa11
--- /dev/null
+++ b/client/src/assets/styles/themes/red-light.scss
@@ -0,0 +1,7 @@
+@import './assets/styles/color-palettes/os-red.scss';
+
+$openslides-primary: mat-palette($openslides-primary-red, 500, 300, 900);
+$openslides-accent: mat-palette($openslides-primary-red, 500, 300, 900);
+$openslides-warn: mat-palette($mat-orange, 700, 300, 900);
+
+$openslides-red-light: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn);
diff --git a/client/src/assets/styles/themes/solarized-dark.scss b/client/src/assets/styles/themes/solarized-dark.scss
new file mode 100644
index 000000000..403eee79b
--- /dev/null
+++ b/client/src/assets/styles/themes/solarized-dark.scss
@@ -0,0 +1,8 @@
+@import './assets/styles/color-palettes/os-cyan.scss';
+@import './assets/styles/color-palettes/os-gray.scss';
+
+$openslides-primary: mat-palette($openslides-grey);
+$openslides-accent: mat-palette($openslides-cyan);
+$openslides-warn: mat-palette($mat-orange);
+
+$openslides-solarized-dark: mat-dark-theme($openslides-primary, $openslides-accent, $openslides-warn);
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 2920d54d9..2fc569c7f 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -1,195 +1,19 @@
-/** Imports the material-design-theming */
-@import '~@angular/material/theming';
-@include mat-core();
-
-/** Import brand theme */
-@import './assets/styles/openslides-general-theme.scss';
-@import './assets/styles/openslides-theme.scss';
-@import './assets/styles/openslides-dark-theme.scss';
-@import './assets/styles/openslides-green-theme.scss';
-@import './assets/styles/openslides-developer-theme.scss';
-
-/** Import the component-related style sheets here */
-@import './app/site/site.component.scss-theme.scss';
-@import './assets/styles/global-components-style.scss';
-@import './app/shared/components/projector-button/projector-button.component.scss';
-@import './app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss-theme.scss';
-@import './app/shared/components/sorting-tree/sorting-tree.component.scss';
-@import './app/shared/components/global-spinner/global-spinner.component.scss';
-@import './app/shared/components/tile/tile.component.scss';
-@import './app/shared/components/block-tile/block-tile.component.scss';
-@import './app/shared/components/icon-container/icon-container.component.scss';
-@import './app/site/common/components/start/start.component.scss';
-@import './app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss-theme.scss';
-@import './app/site/common/components/super-search/super-search.component.scss';
-@import './app/shared/components/rounded-input/rounded-input.component.scss';
-@import './app/shared/components/meta-text-block/meta-text-block.component.scss';
-@import './app/site/config/components/config-field/config-field.component.scss-theme.scss';
-@import './app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.components.scss-theme.scss';
-@import './app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss-theme.scss';
-@import './app/shared/components/banner/banner.component.scss-theme.scss';
-@import './app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss-theme.scss';
-@import './app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss-theme.scss';
-@import './app/site/assignments/components/assignment-poll-detail/assignment-poll-detail-component.scss-theme.scss';
-@import './app/shared/components/progress-snack-bar/progress-snack-bar.component.scss-theme.scss';
-@import './app/shared/components/jitsi/jitsi.component.scss-theme.scss';
-@import './app/shared/components/list-view-table/list-view-table.component.scss-theme.scss';
-@import './app/site/common/components/user-statistics/user-statistics.component.scss-theme.scss';
-@import './app/site/login/components/login-wrapper/login-wrapper.component.scss-theme.scss';
+/** theming */
+@import './assets/styles/component-themes.scss';
 
 /** fonts */
 @import './assets/styles/fonts.scss';
 @import '~material-icon-font/dist/Material-Icons.css';
 
-/** NGrid */
-@import '~@pebula/ngrid/theming';
-$narrow-spacing: (
-    spacing: $pbl-spacing-theme-narrow
-);
-
-/** Videjs */
+/** Videojs */
 @import '~video.js/dist/video-js.css';
 
-/** Mix the component-related style-rules */
-@mixin openslides-components-theme($theme) {
-    @include os-site-theme($theme);
-    @include os-components-style($theme);
-    @include os-projector-button-style($theme);
-    @include os-list-of-speakers-style($theme);
-    @include os-sorting-tree-style($theme);
-    @include os-global-spinner-theme($theme);
-    @include os-tile-style($theme);
-    @include os-mediafile-list-theme($theme);
-    @include os-super-search-style($theme);
-    @include os-rounded-input-style($theme);
-    @include os-meta-text-block-style($theme);
-    @include os-config-field-style($theme);
-    @include os-amendment-create-wizard-style($theme);
-    @include os-motion-detail-diff-style($theme);
-    @include os-banner-style($theme);
-    @include os-motion-poll-style($theme);
-    @include os-motion-poll-detail-style($theme);
-    @include os-assignment-poll-detail-style($theme);
-    @include os-progress-snack-bar-style($theme);
-    @include os-jitsi-theme($theme);
-    @include os-list-view-table-theme($theme);
-    @include os-user-statistics-style($theme);
-    @include os-user-statistics-style($theme);
-    @include os-login-wrapper-theme($theme);
-}
-
 /** Load projector specific SCSS values */
 @import './assets/styles/projector.scss';
 
 /** Load global scss variables and device mixing */
 @import './assets/styles/variables.scss';
 
-.general-theme {
-    @include os-global-spinner-theme($openslides-general-theme);
-}
-
-/** Define the classes to switch between themes */
-.openslides-theme {
-    @include angular-material-theme($openslides-theme);
-    @include openslides-components-theme($openslides-theme);
-    $ngrid-material-theme: pbl-light-theme($openslides-theme);
-    @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
-
-    .logo-container {
-        img.dark {
-            display: none;
-        }
-        img.default {
-            display: inherit;
-        }
-    }
-}
-
-.openslides-dark-theme,
-.openslides-developer-dark-theme {
-    color: white;
-    .logo-container {
-        img.dark {
-            display: inherit;
-        }
-        img.default {
-            display: none;
-        }
-    }
-}
-
-.openslides-dark-theme {
-    @include angular-material-theme($openslides-dark-theme);
-    @include openslides-components-theme($openslides-dark-theme);
-    $ngrid-material-theme: pbl-dark-theme($openslides-dark-theme);
-    @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
-}
-
-.openslides-green-theme {
-    @include angular-material-theme($openslides-green-theme);
-    @include openslides-components-theme($openslides-green-theme);
-    $ngrid-material-theme: pbl-light-theme($openslides-green-theme);
-    @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
-}
-
-.openslides-developer-dark-theme {
-    @include angular-material-theme($openslides-developer-theme);
-    @include openslides-components-theme($openslides-developer-theme);
-    $ngrid-material-theme: pbl-dark-theme($openslides-developer-theme);
-    @include pbl-ngrid-theme(map-merge($ngrid-material-theme, $narrow-spacing));
-
-    * {
-        font-family: monospace !important;
-        color: mat-color(map-get($openslides-developer-theme, accent));
-    }
-
-    os-site {
-        .active mat-icon,
-        .active span {
-            color: mat-color(map-get($openslides-developer-theme, accent));
-        }
-    }
-
-    .custom-table-header {
-        background: #000;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-    }
-
-    .mat-toolbar.sticky-toolbar {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-        height: 64px;
-    }
-
-    .mat-drawer-inner-container {
-        background: #000;
-    }
-
-    .mat-drawer-inner-container > * {
-        background: #000 !important;
-        z-index: 3;
-
-        .os-site.nav-toolbar {
-            background: #000;
-        }
-    }
-
-    .mat-drawer-content > * {
-        background: #000;
-    }
-
-    mat-icon {
-        font-family: 'Material Icons' !important;
-    }
-
-    .mat-mini-fab.projector-active {
-        background-color: mat-color(map-get($openslides-developer-theme, warn));
-    }
-
-    .mce-ico {
-        font-family: 'tinymce', Arial !important;
-    }
-}
-
 .pbl-ngrid-cell {
     .fill {
         position: relative;
@@ -236,6 +60,7 @@ $narrow-spacing: (
 * {
     font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif;
 }
+
 .mat-toolbar h2,
 .mat-dialog-title {
     font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif;
@@ -268,6 +93,7 @@ h1 {
     font-weight: normal;
     font-size: 36px;
 }
+
 h3 {
     font-weight: 500;
     margin-bottom: 0;
@@ -330,7 +156,7 @@ b,
 
 .red-warning-text {
     color: red;
-    mat-icon {
+    .mat-icon {
         color: red !important;
     }
 }
@@ -369,6 +195,7 @@ b,
         visibility: hidden;
     }
 }
+
 .os-form-card {
     max-width: 770px;
     margin-top: 20px !important;
@@ -392,6 +219,7 @@ b,
         width: 100%;
     }
 }
+
 .projector-card .mat-form-field-infix {
     width: 290px;
 }
@@ -452,7 +280,7 @@ b,
         margin-right: 0px;
     }
 
-    mat-icon {
+    .mat-icon {
         vertical-align: text-bottom;
         margin-right: 2px;
     }
@@ -481,7 +309,7 @@ b,
 }
 
 /* TODO: find a better way to get more vertical space in (empty/small) tables for maximize filter dialog */
-mat-paginator {
+.mat-paginator {
     min-height: 800px;
 }
 
@@ -516,15 +344,10 @@ mat-paginator {
     flex: 1 1 auto;
 }
 
-mat-expansion-panel {
+.mat-expansion-panel {
     border-radius: 0 !important;
 }
 
-/* This destroys the projector button in list views using extension panels. */
-/*mat-panel-title mat-icon {
-    padding-right: 30px;
-}*/
-
 .mat-menu-panel {
     max-width: initial !important;
 }
@@ -598,30 +421,39 @@ button.mat-menu-item.selected {
 .spacer-top-3 {
     margin-top: 3px !important;
 }
+
 .spacer-top-5 {
     margin-top: 5px !important;
 }
+
 .spacer-top-10 {
     margin-top: 10px !important;
 }
+
 .spacer-top-20 {
     margin-top: 20px !important;
 }
+
 .spacer-bottom-10 {
     margin-bottom: 10px !important;
 }
+
 .spacer-bottom-20 {
     margin-bottom: 20px !important;
 }
+
 .spacer-bottom-40 {
     margin-bottom: 40px !important;
 }
+
 .spacer-left-10 {
     margin-left: 10px;
 }
+
 .spacer-left-20 {
     margin-left: 20px;
 }
+
 .spacer-left-50 {
     margin-left: 50px !important;
 }
@@ -631,6 +463,7 @@ button.mat-menu-item.selected {
     width: 24px !important;
     height: 24px !important;
 }
+
 .icon24 {
     font-size: 16px;
     margin-top: -8px;
@@ -648,10 +481,12 @@ button.mat-menu-item.selected {
         line-height: 24px;
     }
 }
+
 .title {
     padding-top: 20px;
     padding-bottom: 20px;
 }
+
 .mat-radio-button {
     padding-right: 20px;
 }
@@ -935,6 +770,7 @@ button.mat-menu-item.selected {
     scrollbar-width: 5px;
     scrollbar-color: #666666;
 }
+
 .h-scroller::-webkit-scrollbar {
     width: 5px;
     height: 5px;
diff --git a/openslides/core/config_variables.py b/openslides/core/config_variables.py
index 30945cd25..d15f23e8b 100644
--- a/openslides/core/config_variables.py
+++ b/openslides/core/config_variables.py
@@ -151,16 +151,34 @@ def get_config_variables():
 
     yield ConfigVariable(
         name="openslides_theme",
-        default_value="openslides-theme",
+        default_value="openslides-default-light",
         input_type="choice",
         label="OpenSlides Theme",
         choices=(
-            {"value": "openslides-theme", "display_name": "OpenSlides Default"},
-            {"value": "openslides-dark-theme", "display_name": "OpenSlides Dark"},
-            {"value": "openslides-green-theme", "display_name": "OpenSlides Green"},
             {
-                "value": "openslides-developer-dark-theme",
-                "display_name": "OpenSlides Developer",
+                "value": "openslides-default-light-theme",
+                "display_name": "OpenSlides Default",
+            },
+            {
+                "value": "openslides-default-dark-theme",
+                "display_name": "OpenSlides Dark",
+            },
+            {"value": "openslides-red-light-theme", "display_name": "OpenSlides Red"},
+            {
+                "value": "openslides-red-dark-theme",
+                "display_name": "OpenSlides Red Dark",
+            },
+            {
+                "value": "openslides-green-light-theme",
+                "display_name": "OpenSlides Green",
+            },
+            {
+                "value": "openslides-green-dark-theme",
+                "display_name": "OpenSlides Green Dark",
+            },
+            {
+                "value": "openslides-solarized-dark-theme",
+                "display_name": "OpenSlides Solarized",
             },
         ),
         weight=154,