[Frontend] Add Themes & Update Stylization (#36)

* Add new themes and theme variable updates

* Fix hardcoded color in group member hover effect

---------

Co-authored-by: JSKitty <mail@jskitty.cat>

Author: YuurinBee

src/index.html

@@ -717,6 +717,8 @@ <h2 style="margin-top: 40px">Choose Theme</h2>
         <select id="theme-select">
           <option value="vector">Vector</option>
           <option value="chatstr">Chatstr</option>
+          <option value="gifverse">Cosmic</option>
+          <option value="pivx">Keep it Purple</option>
         </select>
 
         <!-- Voice Settings Section -->

src/js/settings.js

@@ -680,7 +680,7 @@ async function selectFile() {
  * @param {string} mode - The theme mode, i.e: light, dark
  */
 function applyTheme(theme = 'vector', mode = 'dark') {
-  document.body.classList.remove('vector-theme', 'chatstr-theme');
+  document.body.classList.remove('vector-theme', 'chatstr-theme', 'gifverse-theme', 'pivx-theme');
   document.body.classList.add(`${theme}-theme`);
 
   domTheme.href = `/themes/${theme}/${mode}.css`;

src/main.js

@@ -4270,7 +4270,7 @@ function renderInviteItem(invite) {
     const divInvite = document.createElement('div');
     divInvite.classList.add('chatlist-contact', 'chatlist-invite');
     divInvite.id = `invite-${invite.id || invite.welcome_event_id || groupId}`;
-    divInvite.style.borderColor = '#59fcb3';
+    divInvite.style.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--icon-color-primary').trim();
 
     // Avatar container with group placeholder
     const divAvatarContainer = document.createElement('div');
@@ -4457,7 +4457,7 @@ function renderChat(chat) {
 
     // The Chat container (The ID is the Contact's npub)
     const divContact = document.createElement('div');
-    if (nUnread) divContact.style.borderColor = '#59fcb3';
+    if (nUnread) divContact.style.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--icon-color-primary').trim();
     divContact.classList.add('chatlist-contact');
     divContact.id = `chatlist-${chat.id}`;
 
@@ -4567,7 +4567,7 @@ function renderChat(chat) {
     }
     // Apply 'Unread' final styling
     if (nUnread) {
-        pTimeAgo.style.color = '#59fcb3';
+        pTimeAgo.style.color = getComputedStyle(document.documentElement).getPropertyValue('--icon-color-primary').trim();
     } else {
         // Add 'read' class for smaller font size when no unread messages
         pTimeAgo.classList.add('read');

src/styles.css

@@ -1920,7 +1920,7 @@ html, body {
 }
 
 #chat-input-send.active .icon {
-  background-color: #59fcb3;
+  background-color: var(--icon-color-primary);
   opacity: 1;
 }
 
@@ -3662,6 +3662,7 @@ input[type="checkbox"]:checked + .neon-toggle:before {
 /* Style options to match whisper model */
 #theme-select option {
   background: #161616;
+  text-align: center;
   padding: 10px;
 }
 
@@ -3681,6 +3682,13 @@ select:focus::-ms-value {
   margin-right: auto;
 }
 
+/* Sound Notification Selection container styles */
+#notif-sound-select option {
+  background: #161616;
+  padding: 10px;
+  text-align: center;
+}
+
 /* Delete model button with trash bin icon */
 .btn-delete-model {
   position: absolute;
@@ -4788,6 +4796,8 @@ select:disabled:hover {
 .relay-dialog-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #fff;
+  transform: scale(1.1);
+  transition: transform 0.25s ease;
 }
 
 .relay-dialog-content {
@@ -8836,6 +8846,7 @@ hr {
 .notif-custom-container {
   display: flex;
   align-items: center;
+  text-align: center;
   margin-bottom: 10px;
 }