fix dark mode css

src/app/widget-modules/components/application-frame/navigation/navigation.component.html

@@ -6,7 +6,7 @@
     <app-link *appRole="['presenter']" [icon]="faPresentation" link="/presentation" text="Präsentation"></app-link>
     <app-link [icon]="faUser" link="/user" text="Benutzer"></app-link>
   </div>
-  <div class="actions">
+  <div *appRole="['user', 'presenter', 'leader']" class="actions actions-search">
     <button
       mat-icon-button
       class="theme-toggle"
@@ -15,8 +15,6 @@
       (click)="themeService.toggleTheme()">
       <fa-icon [icon]="themeService.isDarkMode() ? faLightMode : faDarkMode"></fa-icon>
     </button>
-  </div>
-  <div *appRole="['user', 'presenter', 'leader']" class="actions actions-search">
     <app-filter></app-filter>
   </div>
 </nav>

src/app/widget-modules/components/application-frame/navigation/navigation.component.less

@@ -36,6 +36,7 @@ nav {
 }
 
 .actions-search {
+  gap: var(--gap-s);
   padding-right: 20px;
 }
 

src/app/widget-modules/components/card/card.component.less

@@ -36,7 +36,7 @@
     top: 0;
     bottom: 0;
     width: unset;
-    z-index: 10;
+    z-index: 30;
   }
 }
 

src/app/widget-modules/components/sidebar/page-frame.component.less

@@ -31,7 +31,7 @@
 }
 
 :host.collapsed .sidebar-toggle {
-  --icon-button-color: var(--surface);
+  --icon-button-color: var(--surface-persist);
   --icon-button-hover-color: var(--surface-subtle);
 }
 
@@ -131,7 +131,7 @@ aside.collapsed {
 }
 
 .title {
-  color: var(--surface);
+  color: var(--surface-persist);
   font-size: 30px;
   text-transform: uppercase;
   text-align: right;

src/styles/styles.less

@@ -4,6 +4,7 @@
   --bg-soft: #bbd2c5;
 
   --surface: rgba(244, 247, 245, 0.88);
+  --surface-persist: rgba(244, 247, 245, 0.88);
   --surface-strong: rgba(255, 255, 255, 0.96);
   --surface-dark: rgba(30, 36, 52, 0.72);
   --surface-border: rgba(41, 46, 73, 0.16);
@@ -126,6 +127,24 @@ body.theme-dark {
   --mat-menu-item-hover-state-layer-color: rgba(255, 255, 255, 0.08);
   --mat-menu-item-focus-state-layer-color: rgba(255, 255, 255, 0.12);
   --mat-menu-divider-color: rgba(206, 223, 229, 0.16);
+  --mat-checkbox-label-text-color: var(--text);
+  --mat-checkbox-disabled-label-color: rgba(232, 240, 244, 0.42);
+  --mat-checkbox-unselected-icon-color: rgba(206, 223, 229, 0.72);
+  --mat-checkbox-unselected-hover-icon-color: var(--text);
+  --mat-checkbox-unselected-focus-icon-color: var(--text);
+  --mat-checkbox-selected-icon-color: var(--primary-hover);
+  --mat-checkbox-selected-hover-icon-color: var(--primary-hover);
+  --mat-checkbox-selected-focus-icon-color: var(--primary-hover);
+  --mat-checkbox-selected-checkmark-color: #07111b;
+  --mat-checkbox-disabled-selected-checkmark-color: rgba(7, 17, 27, 0.72);
+  --mat-checkbox-disabled-selected-icon-color: rgba(206, 223, 229, 0.34);
+  --mat-checkbox-disabled-unselected-icon-color: rgba(206, 223, 229, 0.28);
+  --mat-checkbox-unselected-hover-state-layer-color: rgba(232, 240, 244, 0.12);
+  --mat-checkbox-unselected-focus-state-layer-color: rgba(232, 240, 244, 0.16);
+  --mat-checkbox-unselected-pressed-state-layer-color: rgba(167, 198, 206, 0.18);
+  --mat-checkbox-selected-hover-state-layer-color: rgba(167, 198, 206, 0.16);
+  --mat-checkbox-selected-focus-state-layer-color: rgba(167, 198, 206, 0.2);
+  --mat-checkbox-selected-pressed-state-layer-color: rgba(167, 198, 206, 0.22);
 }
 
 body.theme-dark .mat-mdc-text-field-wrapper {