Merge pull request #8 from fga-eps-mds/123-us04-mudar-para-tema-dark-…

…mode 123 us04 mudar para tema dark mode
fga-eps-mds · Jan 13, 2025 · ac9982b · ac9982b
2 parents 562a205 + 41ffa0d
commit ac9982b
Showing 12 changed files with 7,970 additions and 76 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -121,7 +121,7 @@ import { NotificationsComponent } from './pages/notifications/notifications.comp
     FavoriteVideosComponent,
     WatchLaterVideosComponent,
     NotificationsComponent,
-    ControleSuperAdminComponent
+    ControleSuperAdminComponent,
   ],
 
   providers: [

diff --git a/src/app/components/background/background.component.css b/src/app/components/background/background.component.css
@@ -3,6 +3,7 @@
   color: #0087ce;
   border: none;
 }
+
 :host ::ng-deep .p-button:hover {
   background-color: transparent;
   color: #0087ce;
@@ -11,18 +12,18 @@
 }
 
 :host ::ng-deep .notification-badge-wrapper {
-  pointer-events: none; 
+  pointer-events: none;
   position: relative;
-  top: -1em; 
-  left: -1.8em; 
+  top: -1em;
+  left: -1.8em;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 :host ::ng-deep .notification-badge {
-  background-color: red; 
-  color: white; 
+  background-color: red;
+  color: white;
   border-radius: 50%;
   padding: 0.7em 0.5em;
   font-size: 0.7em;
@@ -31,6 +32,7 @@
   min-width: 1.5em;
   text-align: center;
 }
+
 .tooltip-container {
   position: relative;
   /* Necessário para posicionar a tooltip */
@@ -73,4 +75,86 @@
   border-width: 6px;
   border-style: solid;
   border-color: #686565ee transparent transparent transparent;
+}
+
+.dark-theme-switch {
+  position: absolute;
+  /* Use absolute para controlar a posição relativa ao menu */
+  top: 50%;
+  /* Centraliza verticalmente */
+  right: 33%;
+  /* Centraliza horizontalmente */
+  transform: translate(-50%, -50%);
+  /* Ajusta para o centro real */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  /* Espaço entre o texto e o botão */
+}
+
+
+@media (max-width: 768px) {
+  .dark-theme-switch {
+    top: 50%;
+    /* Mantém a centralização vertical */
+    left: 50%;
+    /* Mantém a centralização horizontal */
+    transform: translate(-50%, -50%);
+  }
+}
+
+.dark-mode-toggle {
+  display: flex;
+  align-items: center;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 34px;
+  height: 20px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 20px;
+}
+
+.slider:before {
+  position: absolute;
+  content: '';
+  height: 14px;
+  width: 14px;
+  left: 3px;
+  bottom: 3px;
+  background-color: #3D3D3D;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked+.slider {
+  background-color: #0087ce;
+}
+
+input:checked+.slider:before {
+  transform: translateX(14px);
+  background-color: white;
+}
+
+body.dark-mode {
+  background-color: #121212;
 }
diff --git a/src/app/components/background/background.component.html b/src/app/components/background/background.component.html
@@ -1,64 +1,91 @@
 <div class="w-full flex flex-col min-h-screen justify-between">
-  <nav class="w-full fixed top-0 left-0 z-50 bg-white">
+  <nav class="w-full fixed top-0 left-0 z-50">
     <div class="pt-10 flex justify-center items-center">
       <a [routerLink]="['/catalog']">
         <img alt="simbolo-unb" src="../../../assets/Icone-unbtv.svg" class="h-10" />
       </a>
     </div>
+
+
+
+
+
+
     <div *ngIf="
         getActualRoute() !== '/login' && getActualRoute() !== '/loginsocial'
       ">
       <div class="flex flex-row items-center justify-center pl-3">
-        <ul class="flex flex-row gap-1 text-xs">
-          <div *ngIf="getActualRoute() === '/stream'">
-            <li class="font-bold text-[#00A550]">
-              <a [routerLink]="['/stream']">Agora na TV</a>
-            </li>
+        <div class="flex flex-col">
+          <div class="flex self-end mr-10 mb-4 justify-end"> 
+
+             <!-- Alternador de Tema --->
+              <div class="flex flex-row items-center gap-2">
+                <img alt="sol" *ngIf="!isDarkMode" src="../../../assets/sun.svg" class="h-7" />
+                <img alt="lua" *ngIf="isDarkMode" src="../../../assets/moon.svg" class="h-7" />
+                <label class="switch">
+                  <input 
+                  type="checkbox" 
+                  [checked]="isDarkMode" 
+                  (change)="toggleDarkMode($event)" />
+                  <span class="slider"></span>
+                </label>
+              </div>
+
           </div>
-          <div *ngIf="getActualRoute() !== '/stream'">
-            <li class="text-blue-brand">
-              <a [routerLink]="['/stream']">Agora na TV</a>
-            </li>
-          </div>
-          <div class="mx-2 text-blue-brand">|</div>
-          <div *ngIf="getActualRoute() === '/catalog'">
-            <li class="font-bold text-[#00A550]">
-              <a [routerLink]="['/catalog']">Programas</a>
-            </li>
-          </div>
-          <div *ngIf="getActualRoute() !== '/catalog'">
-            <li class="text-blue-brand">
-              <a [routerLink]="['/catalog']">Programas</a>
-            </li>
-          </div>
-          <div class="mx-2 text-blue-brand">|</div>
-          <div *ngIf="getActualRoute() === '/sua-unbtv'">
-            <li class="font-bold text-[#00A550]">
-              <a [routerLink]="['/sua-unbtv']">Sua UnBTV</a>
-            </li>
-          </div>
-          <div *ngIf="getActualRoute() !== '/sua-unbtv'">
-            <li class="text-blue-brand">
-              <a [routerLink]="['/sua-unbtv']">Sua UnBTV</a>
-            </li>
-          </div>
-          <div class="mx-2 text-blue-brand">|</div>
-          <div *ngIf="getActualRoute() === '/suggestAgenda'">
-            <li class="font-bold text-[#00A550]">
-              <a [routerLink]="['/suggestAgenda']">Pauta</a>
-            </li>
-          </div>
-          <div *ngIf="getActualRoute() !== '/suggestAgenda'">
-            <li class="text-blue-brand">
-              <a [routerLink]="['/suggestAgenda']">Pauta</a>
-            </li>
-          </div>
-        </ul>
-        <div class="card flex justify-content-center mx-2">
-          <p-menu #menu [model]="items" [popup]="true"></p-menu>
-          <button pButton type="button" (click)="menu.toggle($event)" label="&#9776;" class="menu-button"></button>
-          <div class="notification-badge-wrapper" *ngIf="hasNotifications">
-            <div class="notification-badge"></div> <!-- Badge sem o número -->
+
+          <div class="flex flex-row items-center justify-center">
+            <ul class="flex flex-row gap-1 text-xs">
+              <div *ngIf="getActualRoute() === '/stream'">
+                <li class="font-bold text-[#00A550]">
+                  <a [routerLink]="['/stream']">Agora na TV</a>
+                </li>
+              </div>
+              <div *ngIf="getActualRoute() !== '/stream'">
+                <li class="text-blue-brand">
+                  <a [routerLink]="['/stream']">Agora na TV</a>
+                </li>
+              </div>
+              <div class="mx-2 text-blue-brand">|</div>
+              <div *ngIf="getActualRoute() === '/catalog'">
+                <li class="font-bold text-[#00A550]">
+                  <a [routerLink]="['/catalog']">Programas</a>
+                </li>
+              </div>
+              <div *ngIf="getActualRoute() !== '/catalog'">
+                <li class="text-blue-brand">
+                  <a [routerLink]="['/catalog']">Programas</a>
+                </li>
+              </div>
+              <div class="mx-2 text-blue-brand">|</div>
+              <div *ngIf="getActualRoute() === '/sua-unbtv'">
+                <li class="font-bold text-[#00A550]">
+                  <a [routerLink]="['/sua-unbtv']">Sua UnBTV</a>
+                </li>
+              </div>
+              <div *ngIf="getActualRoute() !== '/sua-unbtv'">
+                <li class="text-blue-brand">
+                  <a [routerLink]="['/sua-unbtv']">Sua UnBTV</a>
+                </li>
+              </div>
+              <div class="mx-2 text-blue-brand">|</div>
+              <div *ngIf="getActualRoute() === '/suggestAgenda'">
+                <li class="font-bold text-[#00A550]">
+                  <a [routerLink]="['/suggestAgenda']">Pauta</a>
+                </li>
+              </div>
+              <div *ngIf="getActualRoute() !== '/suggestAgenda'">
+                <li class="text-blue-brand">
+                  <a [routerLink]="['/suggestAgenda']">Pauta</a>
+                </li>
+              </div>
+            </ul>
+            <div class="card flex justify-content-center mx-2">
+              <p-menu #menu [model]="items" [popup]="true"></p-menu>
+              <button pButton type="button" (click)="menu.toggle($event)" label="&#9776;" class="menu-button"></button>
+              <div class="notification-badge-wrapper" *ngIf="hasNotifications">
+                <div class="notification-badge"></div> <!-- Badge sem o número -->
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -67,7 +94,7 @@
   <div class="flex-grow p-3 mt-40 mb-auto">
     <ng-content></ng-content>
   </div>
-  <footer class="flex flex-row items-center justify-center gap-3 py-6 px-3 md:py-10 sticky bottom-0 bg-white z-20">
+  <footer class="flex flex-row items-center justify-center gap-3 py-6 px-3 md:py-10 sticky bottom-0">
     <div>
       <a [href]="
             mobileDevide ? 'tel:+556131072775' : 'https://unbtv.unb.br/contato'

diff --git a/src/app/components/background/background.component.ts b/src/app/components/background/background.component.ts
@@ -14,6 +14,9 @@ export class BackgroundComponent implements OnInit, OnDestroy {
   mobileDevide: boolean = true;
   hasNotifications: boolean = false; // Indica se há notificações
   private intervalSubscription: Subscription | null = null;
+  // Variável para armazenar o estado atual do tema
+  isDarkMode: boolean = false;
+
 
   constructor(
     private notificationService: NotificationService,
@@ -22,7 +25,11 @@ export class BackgroundComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     console.log('BackgroundComponent initialized');
-
+    // Verificações para o Dark Mode e Persistência de Dados
+    const savedTheme = localStorage.getItem('theme');
+    this.isDarkMode = savedTheme === 'dark';
+    this.applyTheme();
+    // Configurar o menu inicial
     this.items = [
       {
         label: 'Perfil',
@@ -35,7 +42,7 @@ export class BackgroundComponent implements OnInit, OnDestroy {
       },
     ];
 
-    // Atualiza as notificações imediatamente com base no serviço
+    // Assinar notificações
     this.notificationService.recommendedVideosCount$.subscribe((count) => {
       this.hasNotifications = count > 0; // Verifica se há notificações
       this.updateNotificationLabel();
@@ -85,6 +92,29 @@ export class BackgroundComponent implements OnInit, OnDestroy {
     }
   }
 
+  toggleDarkMode(event: Event): void {
+    const isChecked = (event.target as HTMLInputElement).checked;
+
+    if (isChecked) {
+      document.documentElement.classList.add('dark-theme');
+      this.isDarkMode = true;
+      localStorage.setItem('theme', 'dark'); // Salvando o estado atual no localStorage
+    } else {
+      document.documentElement.classList.remove('dark-theme');
+      this.isDarkMode = false;
+      localStorage.setItem('theme', 'light'); 
+    }
+  }
+
+  applyTheme(): void {
+    if (this.isDarkMode) {
+      document.documentElement.classList.add('dark-theme');
+    } else {
+      document.documentElement.classList.remove('dark-theme');
+    }
+    this.cdr.detectChanges(); // Atualiza a interface se necessário
+  }
+
   updateNotificationCount(response: any): void {
     if (response?.recommend_videos) {
       const count = response.recommend_videos.length;

diff --git a/src/app/pages/category-table/category-table.component.css b/src/app/pages/category-table/category-table.component.css
@@ -63,7 +63,7 @@ nav ul li {
 
 nav ul li a {
   text-decoration: none;
-  color: #1d1d1d;
+  color: var(--text-color);
   font-size: 1.1em;
 }
 

diff --git a/src/app/pages/grid/grid.component.html b/src/app/pages/grid/grid.component.html
@@ -13,15 +13,15 @@
             <caption></caption>
             <thead>
               <tr>
-                <th class="padded-cell" style="color: #3c3c3b;">Horário</th>
-                <th class="text-left" style="color: #3c3c3b;">Atividade</th>
+                <th class="padded-cell">Horário</th>
+                <th class="text-left">Atividade</th>
 
               </tr>
             </thead>
             <tbody>
               <tr *ngFor="let item of schedule">
-                <td class="padded-cell" style="color: #3c3c3b;">{{ item.time }}</td>
-                <td class="text-left" style="color: #3c3c3b;">{{ item.activity }}</td>
+                <td class="padded-cell">{{ item.time }}</td>
+                <td class="text-left">{{ item.activity }}</td>
               </tr>
             </tbody>
           </table>

diff --git a/src/app/pages/profile/profile.component.html b/src/app/pages/profile/profile.component.html
@@ -4,16 +4,16 @@
     *ngIf="user">
     <div class="text-center font-bold text-sm text-blue-brand">Perfil</div>
 
-    <div class="flex flex-col justify-center items-center gap-2 pt-3 text-[12px] text-[#3c3c3b]">
-      <span class="w-full font-bold" style="color: #3c3c3b;">
+    <div class="flex flex-col justify-center items-center gap-2 pt-3 text-[12px]">
+      <span class="w-full font-bold">
         {{ user.name }}
       </span>
-      <span class="w-full font-normal" style="color: #3c3c3b;">
+      <span class="w-full font-normal">
         {{ user.email }}
       </span>
     </div>
 
-    <div class="w-full h-8 flex justify-center items-center font-normal text-[12px] text-[#3c3c3b]">
+    <div class="w-full h-8 flex justify-center items-center font-normal text-[12px]">
       {{ connection }}
     </div>
   </div>