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 index 1a7a068..6b7df62 100644 --- 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" > 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 index a5c92b4..45dc10d 100644 --- 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 index dc08080..e8aa62b 100644 --- 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 {