From 00dfbfc5fd29c7ad06f9aeb4d9a554c746aac6b1 Mon Sep 17 00:00:00 2001
From: "sqrd.max" <sqrd.max@gmail.com>
Date: Wed, 30 Oct 2024 00:51:58 +0200
Subject: [PATCH] Theme almost works

---
 .../display-shell.component.scss              |   8 +-
 .../geometry-tree-window.component.scss       |   4 +-
 .../menu-toggle/menu-toggle.component.scss    |  13 +-
 .../nav-config/nav-config.component.scss      |   8 +-
 .../geometry-tree/scene-tree.component.html   |   4 +-
 .../geometry-tree/scene-tree.component.scss   |  16 +-
 .../main-display/main-display.component.html  |  22 +--
 .../main-display/main-display.component.scss  |  17 +-
 firebird-ng/src/styles.scss                   | 167 +++++++++++++++++-
 9 files changed, 221 insertions(+), 38 deletions(-)

diff --git a/firebird-ng/src/app/components/display-shell/display-shell.component.scss b/firebird-ng/src/app/components/display-shell/display-shell.component.scss
index 9afb516..c00a782 100644
--- a/firebird-ng/src/app/components/display-shell/display-shell.component.scss
+++ b/firebird-ng/src/app/components/display-shell/display-shell.component.scss
@@ -14,7 +14,7 @@
   flex-direction: row;
   align-items: center;
   min-height: 50px;
-  background-color: #2e2e2e;
+  //background-color: #2e2e2e;
   border-bottom: 1px solid #1c1c1c;
   box-sizing: border-box;
 }
@@ -32,16 +32,16 @@
 }
 
 .left-pane {
-  background-color: #2e2e2e;
+  //background-color: #2e2e2e;
 }
 
 .right-pane {
-  background-color: #2e2e2e;
+  //background-color: #2e2e2e;
 }
 
 .central-pane {
   flex: 1;
-  background-color: #424242;
+  //background-color: #424242;
   overflow: auto;
 }
 
diff --git a/firebird-ng/src/app/components/geometry-tree-window/geometry-tree-window.component.scss b/firebird-ng/src/app/components/geometry-tree-window/geometry-tree-window.component.scss
index 0d947ad..ca48dc8 100644
--- a/firebird-ng/src/app/components/geometry-tree-window/geometry-tree-window.component.scss
+++ b/firebird-ng/src/app/components/geometry-tree-window/geometry-tree-window.component.scss
@@ -1,5 +1,5 @@
 .tree-button {
-  background-color: #2e2e2e;
+  //background-color: #2e2e2e;
   color: white;
   border-radius: 50%;
   width: 48px;
@@ -23,7 +23,7 @@
 
 .window {
   width: 400px;
-  background-color: #2e2e2e;
+  //background-color: #2e2e2e;
 }
 
 .window-header {
diff --git a/firebird-ng/src/app/components/menu-toggle/menu-toggle.component.scss b/firebird-ng/src/app/components/menu-toggle/menu-toggle.component.scss
index 0528817..2727a9b 100644
--- a/firebird-ng/src/app/components/menu-toggle/menu-toggle.component.scss
+++ b/firebird-ng/src/app/components/menu-toggle/menu-toggle.component.scss
@@ -18,14 +18,15 @@
     &-icon {
       width: 100%;
       height: 100%;
+      fill: var(--icon-color);
 
       &.active-icon {
-        --phoenix-options-icon-path: #00bcd4;
+        fill: var(--active-icon-color);
       }
     }
 
     &:hover {
-      background-color: var(--phoenix-options-icon-bg);
+      background-color: var(--icon-bg);
       border-radius: 40%;
       transition: all 0.4s;
     }
@@ -36,3 +37,11 @@
     }
   }
 }
+.menu-toggle-icon{
+  color: var(--text-color);
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.button_theme:hover {
+  color: var(--accent-color);
+}
diff --git a/firebird-ng/src/app/components/nav-config/nav-config.component.scss b/firebird-ng/src/app/components/nav-config/nav-config.component.scss
index a42d94d..69f66a8 100644
--- a/firebird-ng/src/app/components/nav-config/nav-config.component.scss
+++ b/firebird-ng/src/app/components/nav-config/nav-config.component.scss
@@ -3,12 +3,14 @@
   flex-direction: row;
   box-sizing: border-box;
   height: 50px;
-  color: white;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: space-between;
 }
 
+.nav-link{
+  color: var(--text-color) !important;
+  //transition: background-color 0.3s, color 0.3s;
+}
 .config-toggle-btn {
   color: white;
   position: absolute;
@@ -24,3 +26,5 @@
   margin: 0;
   cursor: pointer;
 }
+
+
diff --git a/firebird-ng/src/app/pages/geometry-tree/scene-tree.component.html b/firebird-ng/src/app/pages/geometry-tree/scene-tree.component.html
index 52e4bc5..f2011b5 100644
--- a/firebird-ng/src/app/pages/geometry-tree/scene-tree.component.html
+++ b/firebird-ng/src/app/pages/geometry-tree/scene-tree.component.html
@@ -1,8 +1,8 @@
 <div class="header">
-  <button mat-icon-button aria-label="Toggle Highlight" matTooltip="Toggle highlight function" (click)="toggleHighlighting()">
+  <button mat-icon-button aria-label="Toggle Highlight" matTooltip="Toggle highlight function" (click)="toggleHighlighting()" class="button_theme">
     <mat-icon>{{ isHighlightingEnabled ? 'highlight_off' : 'highlight' }}</mat-icon>
   </button>
-  <button mat-icon-button aria-label="Refresh" matTooltip="Refresh tree with current geometry" (click)="refreshScheneTree()" >
+  <button mat-icon-button aria-label="Refresh" matTooltip="Refresh tree with current geometry" (click)="refreshScheneTree()" class="button_theme">
     <mat-icon>refresh</mat-icon>
   </button>
 </div>
diff --git a/firebird-ng/src/app/pages/geometry-tree/scene-tree.component.scss b/firebird-ng/src/app/pages/geometry-tree/scene-tree.component.scss
index ee217a8..6313ab8 100644
--- a/firebird-ng/src/app/pages/geometry-tree/scene-tree.component.scss
+++ b/firebird-ng/src/app/pages/geometry-tree/scene-tree.component.scss
@@ -7,11 +7,21 @@
   width: 48px;
   height: 48px;
   min-width: 48px;
-  color: white;
+  //color: white;
   padding-top: 8px;
 }
 
-mat-tree{
-  background-color: #2e2e2e;
+.button_theme {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  transition: background-color 0.3s, color 0.3s;
 }
 
+.button_theme:hover {
+  background-color: var(--secondary-background-color);
+  color: var(--accent-color);
+}
+
+.mat-tree {
+  background-color: transparent !important;
+}
diff --git a/firebird-ng/src/app/pages/main-display/main-display.component.html b/firebird-ng/src/app/pages/main-display/main-display.component.html
index 1f337bf..169c747 100644
--- a/firebird-ng/src/app/pages/main-display/main-display.component.html
+++ b/firebird-ng/src/app/pages/main-display/main-display.component.html
@@ -38,7 +38,7 @@
     <button mat-icon-button matTooltip="Toggle phoenix menu" (click)="togglePhoenixMenu()" class="toggle-btn d-md-none phoenix-toggle-btn">
       <mat-icon>{{ isPhoenixMenuOpen ? 'close' : 'menu' }}</mat-icon>
     </button>
-    <div class="phoenix-menu" *ngIf="isPhoenixMenuOpen || !isSmallScreen">
+    <div class="phoenix-menu theme-button" *ngIf="isPhoenixMenuOpen || !isSmallScreen">
 
       <!-- Event selector -->
       <app-custom-event-selector></app-custom-event-selector>
@@ -51,18 +51,6 @@
       <!-- Toggle for clipping geometries -->
       <app-custom-object-clipping></app-custom-object-clipping>
 
-<!--       Toggle for selected object panel -->
-<!--      <app-custom-object-selection></app-custom-object-selection>-->
-
-<!--      &lt;!&ndash; Toggle for loading geometries modal&ndash;&gt;-->
-<!--      <eic-io-options></eic-io-options>-->
-
-<!--      &lt;!&ndash; Toggle for shareable link constructor modal&ndash;&gt;-->
-<!--      <app-share-link></app-share-link>-->
-
-<!--      &lt;!&ndash; Info panel &ndash;&gt;-->
-<!--      <app-info-panel></app-info-panel>-->
-
       <!-- Extra options -->
       <ng-content></ng-content>
 
@@ -96,11 +84,11 @@
 
   <div footer>
     <div class="time-controls" id="bottom-controls">
-      <div style="margin-right: 10px">{{currentTime | number:'1.1-1'}}</div>
+      <div class="theme-text" style="margin-right: 10px">{{currentTime | number:'1.1-1'}}</div>
       <mat-slider min="0" [max]="maxTime" step="1" showTickMarks discrete [displayWith]="formatCurrentTime" (input)="changeCurrentTime($event)" class="tslider">
         <input matSliderThumb [value]="currentTime">
       </mat-slider>
-      <div>{{maxTime | number:'1.0-0'}} [ns] &nbsp;&nbsp;</div>
+      <div class="theme-text">{{maxTime | number:'1.0-0'}} [ns] &nbsp;&nbsp;</div>
 
       <button mat-raised-button aria-label="Rewind" matTooltip="Rewind time to 0" class="tcontrol" (click)="rewindTime()">
         <mat-icon>first_page</mat-icon>
@@ -124,7 +112,7 @@
       <button mat-raised-button aria-label="Stop" matTooltip="Stop and show all particles" class="tcontrol" (click)="exitTimedDisplay()" >
         <mat-icon>stop</mat-icon>
       </button>
-      <div>{{message}}</div>
+      <div class="theme-text">{{message}}</div>
       &nbsp;&nbsp;
 
       <button mat-raised-button aria-label="Rewind" matTooltip="Play random NEXT EVENT" class="tcontrol" (click)="nextRandomEvent()">
@@ -135,7 +123,7 @@
         <mat-icon>view_in_ar</mat-icon>
       </button>
 
-      <div style="color: darkgray">{{currentGeometry}}</div>
+      <div class="theme-text">{{currentGeometry}}</div>
     </div>
   </div>
 
diff --git a/firebird-ng/src/app/pages/main-display/main-display.component.scss b/firebird-ng/src/app/pages/main-display/main-display.component.scss
index b4e2840..72ea135 100644
--- a/firebird-ng/src/app/pages/main-display/main-display.component.scss
+++ b/firebird-ng/src/app/pages/main-display/main-display.component.scss
@@ -4,12 +4,13 @@
 }
 
 
+
 .phoenix-menu{
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #2e2e2e;
+  //background-color: #2e2e2e;
   flex-wrap: wrap;
 }
 
@@ -22,10 +23,16 @@
 
 .toggle-btn {
   position: absolute;
-  top: 64px;
-  color: white;
+  top: 50px;
+  //color: white;
   padding-top: 8px;
   z-index: 10;
+  color: var(--text-color);
+  transition: background-color 0.3s, color 0.3s;
+}
+.toggle-btn:hover {
+  background-color: var(--secondary-background-color);
+  color: var(--accent-color);
 }
 
 .toggle-btn1 {
@@ -50,14 +57,14 @@
 .time-controls {
   flex: 1 1 auto;
   display: flex;
-  background-color: #424242;
+  //background-color: #424242;
   padding: 2px;
   gap: 3px;
   align-items: center;
   justify-content: center;
   height: 50px;
   bottom: 0;
-  color: white;
+  //color: white;
   //border-top: 1px solid #ddd;
 }
 
diff --git a/firebird-ng/src/styles.scss b/firebird-ng/src/styles.scss
index 12842fe..dc08080 100644
--- a/firebird-ng/src/styles.scss
+++ b/firebird-ng/src/styles.scss
@@ -1,2 +1,167 @@
 /* You can add global styles to this file, and also import other style files */
-@import 'phoenix-ui-components/theming';
+//@import 'phoenix-ui-components/theming';
+
+@use '@angular/material' as mat;
+@include mat.core();
+
+/* Определяем светлую и тёмную темы */
+$primary: mat.define-palette(mat.$teal-palette);
+$accent: mat.define-palette(mat.$cyan-palette);
+$warn: mat.define-palette(mat.$yellow-palette);
+
+$colors: (
+  color: (
+    primary: $primary,
+    accent: $accent,
+    warn: $warn,
+  ),
+);
+
+$dark-theme: mat.define-dark-theme($colors);
+$light-theme: mat.define-light-theme($colors);
+
+@include mat.core-theme($light-theme);
+@include mat.button-theme($light-theme);
+@include mat.all-component-themes($light-theme);
+
+:root {
+  --primary-color: #33899f;
+  --secondary-color: #f1e833;
+  --background-color: #ffffff;
+  --secondary-background-color: #f5f5f5;
+  --tertiary-background-color: #e6e6e6;
+  --text-color: #333333;
+  --secondary-text-color: #777777;
+  --hover-text-color: #c5c5c5;
+  --box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
+  --scroll-color: #acacac;
+  --icon-bg: rgba(0, 0, 0, 0.08);
+  --icon-color: #000000;
+  --icon-shadow: 0px 3px 6px rgba(0, 0, 0, 0.11);
+  --accent-color: #00bcd4;
+  --border-color: #c5c5c5;
+  --active-icon-color: #1976d2;
+
+  --dat-primary-background: #f9f9f9;
+  --dat-secondary-background: #efefef;
+  --dat-tertiary-background: #e9e9e9;
+  --dat-quaternary-background: #ffffff;
+  --dat-border-color: #f0f0f0;
+}
+
+/* Тёмная тема */
+[data-theme='dark'] {
+  --background-color: #2e2e2e;
+  --secondary-background-color: #292929;
+  --tertiary-background-color: #3f3f3f;
+  --text-color: white;
+  --secondary-text-color: #dbdbdb;
+  --hover-text-color: #c5c5c5;
+  --box-shadow: 0px 0px 8px rgb(26, 26, 26);
+  --scroll-color: #707070;
+  --icon-bg: rgba(255, 255, 255, 0.18);
+  --icon-color: #c3c3c3;
+  --icon-shadow: 0px 4px 8px rgba(0, 0, 0, 0.22);
+  --accent-color: #00bcd4;
+  --border-color: #5c5c5c;
+
+  --dat-primary-background: #1a1a1a;
+  --dat-secondary-background: #292929;
+  --dat-tertiary-background: #363636;
+  --dat-quaternary-background: #4d4d4d;
+  --dat-border-color: #343434;
+  transition: 1s;
+
+  @include mat.core-color($dark-theme);
+  @include mat.button-color($dark-theme);
+  @include mat.all-component-colors($dark-theme);
+
+  .mat-dialog-container {
+    background: var(--secondary-background-color);
+  }
+}
+.theme-text {
+  color: var(--text-color) !important; /* Добавляем !important, чтобы перекрыть наследуемые стили */
+}
+
+html,
+body {
+  background-color: var(--background-color);
+}
+
+/* Стили скроллбара */
+::-webkit-scrollbar {
+  width: 0.3em;
+  height: 0.3em;
+}
+
+::-webkit-scrollbar-track {
+  opacity: 0;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: var(--scroll-color);
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.048);
+}
+
+::-webkit-scrollbar-corner {
+  display: none;
+  opacity: 0;
+}
+
+.btn.btn-primary {
+  border: none;
+  background-color: var(--primary-color);
+}
+
+[data-theme='dark'] .btn.btn-primary:hover,
+[data-theme='dark'] .btn.btn-primary:not(:disabled):not(.disabled):active {
+  background-color: #0f5f74;
+}
+
+[data-theme='light'] .btn.btn-primary:hover,
+[data-theme='light'] .btn.btn-primary:not(:disabled):not(.disabled):active {
+  background-color: #145d7b;
+}
+
+.theme-button {
+  background-color: var(--button-background) !important;
+  color: var(--button-text-color) !important;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+[data-theme='dark'] .theme-button:hover {
+  background-color: #0f5f74;
+}
+
+[data-theme='light'] .theme-button:hover {
+  bbackground-color: #145d7b;
+}
+
+select {
+  border-radius: 30px;
+  padding: 0.125rem 0.25rem;
+  background-color: var(--tertiary-background-color);
+  color: var(--secondary-text-color);
+  border: none;
+}
+
+label {
+  margin: 0;
+}
+
+#eventDisplay {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.form-control,
+.form-control:focus {
+  color: var(--text-color);
+  background-color: var(--tertiary-background-color);
+  border: 1px solid var(--border-color);
+}
+
+
+