From 912a528f8a8c2e3ffcade5d926a1f9040373daaa Mon Sep 17 00:00:00 2001
From: Sean <sean.f.t.engelhardt@gmail.com>
Date: Thu, 18 Jun 2020 13:11:45 +0200
Subject: [PATCH] Improve dark themes

Add better contrast to dark themes on various instances
Add yellow as accent color for red themes
---
 .../components/motion-detail/motion-detail.component.html | 2 +-
 client/src/assets/styles/component-themes.scss            | 1 +
 client/src/assets/styles/global-components-style.scss     | 8 ++++----
 client/src/assets/styles/themes/red-dark.scss             | 2 +-
 client/src/assets/styles/themes/red-light.scss            | 2 +-
 5 files changed, 8 insertions(+), 7 deletions(-)

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 91b82a0b1..f81ee28f7 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
@@ -134,8 +134,8 @@
                 {{ getTitleWithChanges() }}
             </h1>
             <button
+                class="primary-accent-by-theme"
                 mat-icon-button
-                color="accent"
                 (click)="toggleFavorite()"
                 matTooltip="{{ 'Mark as personal favorite' | translate }}"
             >
diff --git a/client/src/assets/styles/component-themes.scss b/client/src/assets/styles/component-themes.scss
index c31fda9c9..9b718f62e 100644
--- a/client/src/assets/styles/component-themes.scss
+++ b/client/src/assets/styles/component-themes.scss
@@ -141,6 +141,7 @@ $narrow-spacing: (
  * Custom configuration for dark themes
  */
  [class^="openslides-"][class*="-dark-theme"] {
+    color: white;
     .logo-container {
         img.dark {
             display: inherit;
diff --git a/client/src/assets/styles/global-components-style.scss b/client/src/assets/styles/global-components-style.scss
index cac868dfb..e1976dc11 100644
--- a/client/src/assets/styles/global-components-style.scss
+++ b/client/src/assets/styles/global-components-style.scss
@@ -15,11 +15,11 @@
 
     h1,
     h3.accent {
-        color: mat-color($primary);
+        color: mat-color(if($is-dark-theme, $accent, $primary));
     }
 
     a {
-        color: mat-color($primary);
+        color: mat-color(if($is-dark-theme, $accent, $primary));
     }
 
     .anchor-button {
@@ -31,8 +31,8 @@
         color: mat-color($accent);
     }
 
-    .button24 {
-        color: mat-color($primary);
+    .primary-accent-by-theme {
+        color: mat-color(if($is-dark-theme, $accent, $primary));
     }
 
     //custom table header for search button, filtering and more. Used in ListViews
diff --git a/client/src/assets/styles/themes/red-dark.scss b/client/src/assets/styles/themes/red-dark.scss
index bc2d9e40d..5dded842c 100644
--- a/client/src/assets/styles/themes/red-dark.scss
+++ b/client/src/assets/styles/themes/red-dark.scss
@@ -1,7 +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-accent: mat-palette($mat-amber);
 $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
index 3a7a0fa11..57ca51372 100644
--- a/client/src/assets/styles/themes/red-light.scss
+++ b/client/src/assets/styles/themes/red-light.scss
@@ -1,7 +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-accent: mat-palette($mat-amber);
 $openslides-warn: mat-palette($mat-orange, 700, 300, 900);
 
 $openslides-red-light: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn);