From 3ffd89ebe6837c0429462e76212720a5a658f95f Mon Sep 17 00:00:00 2001
From: Nicolas Perrin <nicolas@perrinn.com>
Date: Sat, 9 Aug 2025 21:11:20 +0100
Subject: [PATCH] feat: add theme variables and toggle

---
 src/app/app.component.ts     |  9 ++++--
 src/app/chat.component.ts    |  6 ++--
 src/app/login.component.ts   |  2 +-
 src/app/profile.component.ts | 16 +++++------
 src/styles.css               | 54 ++++++++++++++++++++++++------------
 5 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 34d8bf0..59b9bbd 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -12,7 +12,8 @@ import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/comp
       <div style="width:320px;display:block;margin: 0 auto">
         <img src="./../assets/App icons/Perrinn_02.png" style="cursor:pointer;float:left;width:30px;margin:5px 45px 5px 5px" (click)="router.navigate(['profile','all'])">
         <span class="material-icons" style="float:left;margin:5px 45px 5px 45px;font-size:30px;cursor:pointer" (click)="router.navigate(['directory'])">list</span>
-        <span class="material-icons-outlined" style="float:left;margin:5px 45px 5px 45px;font-size:30px;height:30px;cursor:pointer" onclick="window.open('https://discover.perrinn.com','_blank')">info</span>
+         <span class="material-icons-outlined" style="float:left;margin:5px 45px 5px 45px;font-size:30px;height:30px;cursor:pointer" onclick="window.open('https://discover.perrinn.com','_blank')">info</span>
+         <span class="material-icons" style="float:left;margin:5px 45px 5px 45px;font-size:30px;cursor:pointer" (click)="toggleTheme()">brightness_6</span>
       </div>
       <div class="separator" style="width:100%;margin:0px"></div>
     </div>
@@ -32,7 +33,7 @@ import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/comp
     </div>
   `,
 })
-export class AppComponent {
+  export class AppComponent {
 
   constructor(
     public router:Router,
@@ -53,4 +54,8 @@ export class AppComponent {
     fullScreenImage.src = '';
   }
 
+  toggleTheme() {
+    document.body.classList.toggle('light-theme');
+  }
+
 }
diff --git a/src/app/chat.component.ts b/src/app/chat.component.ts
index d6229a8..456a0f5 100644
--- a/src/app/chat.component.ts
+++ b/src/app/chat.component.ts
@@ -63,7 +63,7 @@ import firebase from 'firebase/compat/app'
           <img [src]="chatLastMessageObj?.recipients[recipient]?.imageUrlThumb" style="float:left;object-fit:cover;height:25px;width:25px;margin:3px 3px 3px 10px">
           <div style="float:left;margin:10px 5px 3px 3px;font-size:12px;line-height:10px;font-family:sans-serif">{{chatLastMessageObj?.recipients[recipient]?.name}}</div>
         </div>
-        <div style="float:left;cursor:pointer;margin:10px 15px 3px 3px;font-size:12px;line-height:10px;font-family:sans-serif;color:#D85140" (click)="removeRecipient(recipient,chatLastMessageObj?.recipients[recipient]?.name)">X</div>
+        <div style="float:left;cursor:pointer;margin:10px 15px 3px 3px;font-size:12px;line-height:10px;font-family:sans-serif;color:var(--accent-color)" (click)="removeRecipient(recipient,chatLastMessageObj?.recipients[recipient]?.name)">X</div>
       </li>
     </ul>
     <input style="width:60%;margin:10px" maxlength="500" (keyup)="refreshSearchLists()" [(ngModel)]="searchFilter" placeholder="Add member">
@@ -154,7 +154,7 @@ import firebase from 'firebase/compat/app'
           <div *ngIf="message.payload?.imageUrlThumbUser&&(isMessageNewUserGroup(message.payload?.user,message.payload?.serverTimestamp||{seconds:UI.nowSeconds*1000})||first)" style="float:left;width:60px;min-height:10px">
             <img [src]="message.payload?.imageUrlThumbUser" (error)="UI.handleUserImageError($event, message.payload)" style="cursor:pointer;display:inline;float:left;margin:0 10px 10px 10px; object-fit:cover; height:35px; width:35px" (click)="router.navigate(['profile',message.payload?.user])">
           </div>
-          <div [style.background-color]="(message.payload?.user==UI.currentUser)?'#222C32':'black'"
+          <div [style.background-color]="(message.payload?.user==UI.currentUser)?'var(--primary-color)':'black'"
                 style="cursor:text;margin:0 10px 5px 60px;user-select:text;border-color:#5BBF2F"
                 [style.border-style]="(message.payload?.text.includes(UI.currentUserLastMessageObj?.name))?'solid':'none'">
             <div>
@@ -255,7 +255,7 @@ import firebase from 'firebase/compat/app'
       <div *ngIf="!draftMessage&&!imageDownloadUrl" style="float:right;width:10%;cursor:pointer">
         <input type="file" name="chatImage" id="chatImage" class="inputfile" (change)="onImageChange($event)" accept="image/*">
         <label class="buttonUploadImage" for="chatImage" id="buttonFile">
-        <span class="material-icons-outlined" style="margin:15px 5px 5px 5px;font-size:30px;color:#B0BAC0">photo_camera</span>
+        <span class="material-icons-outlined" style="margin:15px 5px 5px 5px;font-size:30px;color:var(--secondary-color)">photo_camera</span>
         </label>
       </div>
     </div>
diff --git a/src/app/login.component.ts b/src/app/login.component.ts
index d0f6b5a..55a0ac6 100644
--- a/src/app/login.component.ts
+++ b/src/app/login.component.ts
@@ -41,7 +41,7 @@ import { first } from 'rxjs/operators';
             <input maxlength="500" [(ngModel)]="name" name="name" type="text" placeholder="First name (one word) *" (keyup)="messageUser=''" #n="ngModel" pattern="[A-Za-z0-9]{2,}" required/>
             <button type="button" class="buttonWhite" style="font-size:14px;text-align:center;line-height:25px;width:200px;padding:4px;margin:10px auto" (click)="register(email,password,passwordConfirm,name)" [disabled]="f.invalid">Register</button>
           </div>
-          <div *ngIf="messageUser" style="text-align:center;padding:10px;color:#D85140">{{messageUser}}</div>
+          <div *ngIf="messageUser" style="text-align:center;padding:10px;color:var(--accent-color)">{{messageUser}}</div>
         </form>
       </div>
     </div>
diff --git a/src/app/profile.component.ts b/src/app/profile.component.ts
index 3c9a81d..77a7c37 100644
--- a/src/app/profile.component.ts
+++ b/src/app/profile.component.ts
@@ -52,10 +52,10 @@ import { ChangeDetectorRef } from '@angular/core'
           </div>
         </div>
       </div>
-      <div class="buttonBlack" style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='inbox'?'#B0BAC0':'black'" (click)="mode='inbox';refreshMessages()">inbox</div>
-      <div class="buttonBlack" style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='history'?'#B0BAC0':'black'" (click)="mode='history';refreshMessages();refreshChart()">history</div>
-      <div class="buttonBlack" style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='chain'?'#B0BAC0':'black'" (click)="mode='chain';refreshMessages()">chain</div>
-      <div class="buttonBlack" style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='forecast'?'#B0BAC0':'black'" (click)="mode='forecast';refreshMessages()">forecast</div>
+      <div class="buttonBlack" style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='inbox'?'var(--secondary-color)':'black'" (click)="mode='inbox';refreshMessages()">inbox</div>
+      <div class="buttonBlack" style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='history'?'var(--secondary-color)':'black'" (click)="mode='history';refreshMessages();refreshChart()">history</div>
+      <div class="buttonBlack" style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='chain'?'var(--secondary-color)':'black'" (click)="mode='chain';refreshMessages()">chain</div>
+      <div class="buttonBlack" style="float:left;width:74px;margin:5px;font-size:11px" [style.border-color]="mode=='forecast'?'var(--secondary-color)':'black'" (click)="mode='forecast';refreshMessages()">forecast</div>
       <div class="buttonBlack" *ngIf="UI.currentUser&&UI.currentUser!=focusUserLastMessageObj?.user" (click)="newMessageToUser()" style="clear:both;width:250px;margin:5px;font-size:11px">New message to {{focusUserLastMessageObj?.name}}</div>
       <div class="separator" style="width:100%;margin:0px"></div>
     </div>
@@ -152,13 +152,13 @@ import { ChangeDetectorRef } from '@angular/core'
               </div>
               <div *ngIf="UI.currentUser&&(UI.currentUserLastMessageObj?.createdTimestamp/1000)<message.payload.doc.data()?.serverTimestamp?.seconds" style="float:right;margin:5px 0 0 0;width:35px;height:20px;line-height:20px;font-size:10px;text-align:center"
                 (click)="readFlagClick(message.payload.doc.id,(message.payload.doc.data()?.reads||{})[UI.currentUser])"
-                [style.background-color]="(message.payload.doc.data()?.reads||{})[UI.currentUser]?'#131B20':(message.payload.doc.data()?.recipients[UI.currentUser]?.mentionMessages||message.payload.doc.data()?.text.includes(UI.currentUserLastMessageObj?.name))?'#5BBF2F':message.payload.doc.data()?.recipients[UI.currentUser]?'#38761D':'#B0BAC0'"
-                [style.color]="(message.payload.doc.data()?.reads||{})[UI.currentUser]?'#131B20':whitesmoke">
+                [style.background-color]="(message.payload.doc.data()?.reads||{})[UI.currentUser]?'var(--surface-color)':(message.payload.doc.data()?.recipients[UI.currentUser]?.mentionMessages||message.payload.doc.data()?.text.includes(UI.currentUserLastMessageObj?.name))?'#5BBF2F':message.payload.doc.data()?.recipients[UI.currentUser]?'#38761D':'var(--secondary-color)'"
+                [style.color]="(message.payload.doc.data()?.reads||{})[UI.currentUser]?'var(--surface-color)':whitesmoke">
                 {{message.payload.doc.data()?.recipients[UI.currentUser]?.unreadMessages}}
               </div>
               <div *ngIf="UI.currentUser&&(UI.currentUserLastMessageObj?.createdTimestamp/1000)>message.payload.doc.data()?.serverTimestamp?.seconds" style="float:right;margin:5px 0 0 0;width:35px;height:20px;line-height:20px;font-size:10px;text-align:center 0 0 3px"
-                [style.background-color]="'#B0BAC0'"
-                [style.color]="'#B0BAC0'">
+                [style.background-color]="'var(--secondary-color)'"
+                [style.color]="'var(--secondary-color)'">
                 {{message.payload.doc.data()?.recipients[UI.currentUser]?.unreadMessages}}
               </div>
               <div style="float:right;margin-top:10px;color:#999;font-size:11px;margin-right:10px;width:40px">{{UI.formatSecondsToDhm1(math.max(0,(UI.nowSeconds-message.payload.doc.data()?.serverTimestamp?.seconds)))}}</div>
diff --git a/src/styles.css b/src/styles.css
index b0db970..20af25b 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,12 +1,30 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
+
+:root {
+  --primary-color: #222C32;
+  --secondary-color: #B0BAC0;
+  --accent-color: #D85140;
+  --surface-color: #131B20;
+  --scrollbar-thumb-color: var(--secondary-color);
+}
+
+body.light-theme {
+  --primary-color: #FFFFFF;
+  --secondary-color: #222C32;
+  --accent-color: #38761D;
+  --surface-color: #EEEEEE;
+  --scrollbar-thumb-color: #888888;
+}
+
 *, *:before, *:after {
   box-sizing: border-box;
-  font-family: verdana;
+  font-family: 'Roboto', sans-serif;
   font-weight: 100;
   margin: 0;
   padding: 0px;
   font-size: 13px;
   line-height: 20px;
-  border-color:#222C32;
+  border-color: var(--primary-color);
   border-radius:2px;
   border-width:thin;
   overflow: hidden;
@@ -22,15 +40,15 @@
     height: 5px;
 }
 *::-webkit-scrollbar-thumb {
-    background-color:#B0BAC0;
+    background-color: var(--scrollbar-thumb-color);
 }
 *::-webkit-scrollbar-track {
-    background-color: #131B20;
+    background-color: var(--surface-color);
 }
 body {
   border: 0;
-  background-color:#222C32;
-  color: #B0BAC0;
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
   overscroll-behavior-x: none;
   touch-action: pan-y;
 }
@@ -42,7 +60,7 @@ body {
 }
 #login {
   width: 10000px;
-  font-family: 'RobotoDraft', 'Roboto', sans-serif;
+  font-family: 'Roboto', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   display: table-cell;
@@ -79,7 +97,7 @@ a:visited {
 .menu .iconSmall .activity {
   height: 12px;
   width: 12px;
-  background-color:#D85140;
+  background-color:var(--accent-color);
   position: absolute;
   top: 1px;
   left: 34px;
@@ -103,14 +121,14 @@ a:visited {
 .listLight .activity {
   height: 12px;
   width: 12px;
-  background-color:#D85140;
+  background-color:var(--accent-color);
   position: absolute;
   top: 0px;
   right: 0px;
   z-index: 1000;
 }
 .listLight .selected {
-  background-color: #222C32;
+  background-color: var(--primary-color);
 }
 .buttonBlack {
   cursor: pointer;
@@ -162,7 +180,7 @@ a:visited {
   text-align:center;
   border-style:solid;
   padding:3px;
-  border-color:#131B20;
+  border-color:var(--surface-color);
   border-radius: 4px;
   transition: 0.1s ease;
   border-width: 1px;
@@ -185,7 +203,7 @@ button {
   border: 0;
   padding: 7px;
   margin: 10px;
-  color: #B0BAC0;
+  color: var(--secondary-color);
   -webkit-transition: 0.3s ease;
   transition: 0.3s ease;
   text-align:center;
@@ -193,7 +211,7 @@ button {
 }
 input {
   background-color:#2D3941;
-  color: #B0BAC0;
+  color: var(--secondary-color);
   width: 90%;
   border-style:solid;
   padding: 10px;
@@ -218,7 +236,7 @@ input {
   font-size: 10px;
   background: #1db217;
   box-sizing: border-box;
-  color: #131B20;
+  color: var(--surface-color);
   text-align: center;
 }
 
@@ -273,7 +291,7 @@ hr {
   margin: 0 auto;
   width: 100%;
   max-width: 800px;
-  background-color: #131B20;
+  background-color: var(--surface-color);
   border-style: solid;
   border-width: 0 1px 0 1px;
   user-select:none;
@@ -321,7 +339,7 @@ progress {
   appearance:none;
   width:100%;
   height:3px;
-  background-color: #131B20;
+  background-color: var(--surface-color);
 }
 progress::-webkit-progress-bar {
   background-color: transparent; width: 100%;
@@ -423,7 +441,7 @@ img {
   outline: thin solid;
   border-radius: 4px;
   color: whitesmoke !important;
-  background-color: #222C32;
+  background-color: var(--primary-color);
   width: 155px;
   height: 35px;
   margin: 5px;
@@ -450,7 +468,7 @@ img {
 }
 
 .socialmediabutton:hover {
-  background-color: #131B20;
+  background-color: var(--surface-color);
   transition: 0.1s ease;
 }