Fix styles for theme switching

eic · Oct 30, 2024 · e013aed · e013aed
1 parent 289e911
commit e013aed
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/firebird-ng/src/app/components/dark-theme/dark-theme.component.html b/firebird-ng/src/app/components/dark-theme/dark-theme.component.html
@@ -3,5 +3,6 @@
   [active]="darkTheme"
   icon="brightness_6"
   (click)="setDarkTheme()"
+  class="theme-button"
 >
 </app-custom-menu-toggle>
diff --git a/firebird-ng/src/app/components/dark-theme/dark-theme.component.ts b/firebird-ng/src/app/components/dark-theme/dark-theme.component.ts
@@ -27,11 +27,16 @@ export class DarkThemeComponent implements OnInit {
     this.darkTheme = !this.darkTheme;
     const scene = this.eventDisplay.getThreeManager().getSceneManager().getScene();
 
+    this.eventDisplay.getUIManager().setDarkTheme(this.darkTheme);
+
     // Switch three.js background
     if(scene && this.darkTheme) {
       scene.background = this.threeDarkBackground;
     } else {
       scene.background = this.threeLightBackground;
     }
+
+    const theme = this.darkTheme ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-theme', theme);
   }
 }
diff --git a/firebird-ng/src/styles.scss b/firebird-ng/src/styles.scss
@@ -49,7 +49,7 @@ $light-theme: mat.define-light-theme($colors);
   --dat-border-color: #f0f0f0;
 }
 
-/* Тёмная тема */
+/* Dark theme */
 [data-theme='dark'] {
   --background-color: #2e2e2e;
   --secondary-background-color: #292929;
@@ -89,7 +89,7 @@ body {
   background-color: var(--background-color);
 }
 
-/* Стили скроллбара */
+/* Scroll bar styles */
 ::-webkit-scrollbar {
   width: 0.3em;
   height: 0.3em;
@@ -136,7 +136,7 @@ body {
 }
 
 [data-theme='light'] .theme-button:hover {
-  bbackground-color: #145d7b;
+  background-color: #145d7b;
 }
 
 select {