🚧 Adicionando a funcionalidade de dark mode com a classe "dark-theme"

Co-authored-by: João Marcos Moraes de Andrade <[email protected]>

src/app/app.module.ts

@@ -121,7 +121,7 @@ import { NotificationsComponent } from './pages/notifications/notifications.comp
     FavoriteVideosComponent,
     WatchLaterVideosComponent,
     NotificationsComponent,
-    ControleSuperAdminComponent
+    ControleSuperAdminComponent,
   ],
 
   providers: [

src/app/components/background/background.component.html

@@ -1,10 +1,11 @@
 <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'
       ">
@@ -67,7 +68,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'

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;
 }
 

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>

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>

src/app/pages/stream-view/stream-view.component.html

@@ -10,7 +10,7 @@
     ></iframe>
   </div>
   <div
-    class="min-w-full flex flex-col justify-center gap-3 font-custom text-[#3C3C3B]"
+    class="min-w-full flex flex-col justify-center gap-3 font-custom"
   >
     <span class="text-center text-[14px] font-medium">
       {{ todaysDate }} • {{ weekDay }}
@@ -23,7 +23,7 @@
         *ngFor="let schedule of schedules; let i = index"
         class="w-full h-7 flex items-center gap-2"
         [ngClass]="{
-          'font-bold text-[#00A550]': currentProgram && i === highlightedIndex
+          'font-bold': currentProgram && i === highlightedIndex
         }"
       >
         <div>{{ schedule.time }}</div>

src/app/pages/video-viewer/video-viewer.component.html

@@ -12,7 +12,7 @@
   </div>
   <div class="flex justify-center flex-col gap-6 p-3 m-3">
     <div class="title-button-container max-w-full flex justify-between items-center">
-      <h4 class="font-custom font-bold text-gray-800">
+      <h4 class="font-custom font-bold ">
         {{ video.title }}
       </h4>
       <div class="button-container" *ngIf="userId!==''">
@@ -37,25 +37,25 @@ <h4 class="font-custom font-bold text-gray-800">
       </div>
     </div>
     <div
-      class="max-w-full max-h-full flex text-[12px] font-custom text-gray-800"
+      class="max-w-full max-h-full flex text-[12px] font-custom"
     >
       <div>
         <span
           *ngIf="!showDescription && videoDescription.length > characterLimit"
-          class="clamped-description text-gray-800"
+          class="clamped-description "
           [innerHTML]="videoDescription"
         ></span>
         <button
           *ngIf="!showDescription && videoDescription.length > characterLimit"
-          class="font-bold text-gray-800"
+          class="font-bold "
           (click)="expandDescription()"
         >
           Mostrar
         </button>
 
         <span *ngIf="showDescription" [innerHTML]="videoDescription"></span>
         <div *ngIf="showDescription">
-          <button class="font-bold text-gray-800" (click)="expandDescription()">
+          <button class="font-bold " (click)="expandDescription()">
             Mostrar menos
           </button>
         </div>