From 3a9a1eecc41052fcd91c863592932cc3622d8b27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de> Date: Wed, 19 Jun 2019 10:40:31 +0200 Subject: [PATCH] Fix dark theme --- .../home/home-page/home-page.component.scss | 2 +- .../comment-list/comment-list.component.scss | 19 ++++++++++--------- .../shared/room-list/room-list.component.scss | 2 +- src/theme/dark-theme/darkTheme.const.ts | 2 +- src/theme/default-theme/_variables.scss | 2 +- 5 files changed, 14 insertions(+), 13 deletions(-) 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 bb9dd76b9..d20082412 100644 --- a/src/app/components/home/home-page/home-page.component.scss +++ b/src/app/components/home/home-page/home-page.component.scss @@ -10,7 +10,7 @@ font-weight: bold; text-align: center; letter-spacing: 10px; - color: var(--on-surface); + color: var(--secondary); animation: moveInLeft 2s ease-out; padding-top: 10px; } 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 150eb5f1f..708a54277 100644 --- a/src/app/components/shared/comment-list/comment-list.component.scss +++ b/src/app/components/shared/comment-list/comment-list.component.scss @@ -12,23 +12,24 @@ input { box-sizing: border-box; padding: 0 10px 0 5px; width: 100%; - background-color: var(--primary-variant); + background-color: var(--surface); border: none; outline: none; min-height: 60px; font-size: large; border-radius: 5px; - color: var(--on-primary); + color: var(--on-surface); } #search-container { border-radius: 5px; - background-color: var(--primary-variant); + background-color: var(--surface); margin-bottom: 2%; } .search-icon { padding: 10px; + color: var(--on-surface); } .searchBarButton { @@ -43,12 +44,12 @@ input { width: 40px; height: 40px; margin: 0 5% 0 0; - background-color: var(--secondary); + background-color: var(--primary); } .addCommentIcon { transform: scale(1.5); - color: var(--primary-variant) + color: var(--surface) } .close { @@ -60,7 +61,7 @@ input { height: 45px; width: 45px; line-height: 100% !important; - color: var(--secondary); + color: var(--primary); } .no-comments { @@ -93,8 +94,8 @@ h4 { .counter { font-size: 18pt; - background-color: var(--primary); - color: var(--on-primary); + background-color: var(--secondary); + color: var(--on-secondary); } .counter-filtered { @@ -111,6 +112,6 @@ h4 { } ::placeholder { - color: var(--on-primary); + color: var(--on-surface); opacity: 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 73265ef94..66f62efcb 100644 --- a/src/app/components/shared/room-list/room-list.component.scss +++ b/src/app/components/shared/room-list/room-list.component.scss @@ -1,6 +1,6 @@ button { margin-right: 10px; - color: var(--secondary); + color: var(--primary); } .mat-expansion-panel-header-description { diff --git a/src/theme/dark-theme/darkTheme.const.ts b/src/theme/dark-theme/darkTheme.const.ts index d2718ddd3..ed12749df 100644 --- a/src/theme/dark-theme/darkTheme.const.ts +++ b/src/theme/dark-theme/darkTheme.const.ts @@ -11,7 +11,7 @@ export const dark = { '--dialog': '#757575', '--on-primary': '#000000', - '--on-secondary': '#FFFFFF', + '--on-secondary': '#000000', '--on-background': '#FFFFFF', '--on-surface': '#FFFFFF', diff --git a/src/theme/default-theme/_variables.scss b/src/theme/default-theme/_variables.scss index a6915f2db..f3ece0b9e 100644 --- a/src/theme/default-theme/_variables.scss +++ b/src/theme/default-theme/_variables.scss @@ -2,7 +2,7 @@ // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://www.google.com/design/spec/style/color.html -$arsnova-primary: mat-palette($mat-grey,900); +$arsnova-primary: mat-palette($mat-grey,100); $arsnova-accent: mat-palette($mat-orange, 200); //$mat-blue-gray, A200, A100, A400); // The warn palette is optional (defaults to red). -- GitLab