Add New Themes: XMR & Neon

src/index.html

@@ -1049,6 +1049,8 @@ <h2 style="margin-top: 40px">Choose Theme</h2>
           <option value="chatstr">Chatstr</option>
           <option value="gifverse">Cosmic</option>
           <option value="pivx">Keep it Purple</option>
+          <option value="cyberpunk">Neon</option>
+          <option value="monero">XMR</option>
         </select>
 
         <!-- Voice Settings Section -->

src/js/settings.js

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

src/themes/chatstr/dark.css

@@ -55,6 +55,9 @@
   20%, 80% { background-color: rgba(205, 61, 211, 0.18); }
 }
 
+.image-viewer-close {
+  border: 1px solid var(--primary-color);
+}
 
 .attachment-panel {
   background: #0a0a0a;
@@ -302,7 +305,8 @@ select:disabled {
 
 /* File Preview Overlay Theme */
 .file-preview-container {
-  border-color: rgba(177, 136, 226, 0.2);
+  border-color: var(--primary-color);
+  background: #0A0A0A;
 }
 
 .file-preview-icon-container {
@@ -315,8 +319,8 @@ select:disabled {
 }
 
 .file-preview-option {
-  background: rgba(177, 136, 226, 0.05);
-  border: 1px solid rgba(177, 136, 226, 0.1);
+  background: #171717;
+  border: 1px solid #47474750;
 }
 
 .file-preview-btn-send {