Merge pull request #63 from Larguma/main

theme: add catppuccin mocha/latte

Author: lklynet

README.md

@@ -52,7 +52,7 @@ A completely decentralized chat system built directly on top of the swarm topolo
 ### 3. Visualizations
 *   **Particle Map:** Visualizes approximate peer locations (if enabled).
 *   **Themes:** Built-in theme switcher (Hypermind, Hypermind Classic, Nord, Solarized, Tokyo Night, etc).<br>
-    <img src="assets/images/hypermind-theme.png" width="100" alt="Hypermind" /> <img src="assets/images/hypermind-classic-theme.png" width="100" alt="Hypermind Classic" /> <img src="assets/images/nord-dark-theme.png" width="100" alt="Nord" /> <img src="assets/images/solarized-light-theme.png" width="100" alt="Solarized" /> <img src="assets/images/tokyo-night-theme.png" width="100" alt="Tokyo Night" /> <img src="assets/images/volcano-theme.png" width="100" alt="Volcano" />
+    <img src="assets/images/hypermind-theme.png" width="100" alt="Hypermind" /> <img src="assets/images/hypermind-classic-theme.png" width="100" alt="Hypermind Classic" /> <img src="assets/images/nord-dark-theme.png" width="100" alt="Nord" /> <img src="assets/images/solarized-light-theme.png" width="100" alt="Solarized" /> <img src="assets/images/tokyo-night-theme.png" width="100" alt="Tokyo Night" /> <img src="assets/images/volcano-theme.png" width="100" alt="Volcano" /> <img src="assets/images/catppuccin-mocha-theme.png" width="100" alt="Catppuccin Mocha" /> <img src="assets/images/catppuccin-latte-theme.png" width="100" alt="Catppuccin Latte" />
 
 ---
 

THEMES.md

@@ -24,6 +24,14 @@
 
 ![Volcano theme screenshot](assets/images/volcano-theme.png)
 
+### Catppuccin Mocha
+
+![Catppuccin mocha theme screenshot](assets/images/catppuccin-mocha-theme.png)
+
+### Catppuccin Latte
+
+![Catppuccin latte theme screenshot](assets/images/catppuccin-latte-theme.png)
+
 # Contributing custom themes
 
 1. Fork `main` and clone locally to your device.
@@ -40,7 +48,9 @@
         'nord-dark.css',
         'solarized-light.css',
         'volcano.css',
-        'new-theme.css' /* always add to the end of the list
+        'catppuccin-mocha.css',
+        'catppuccin-latte.css',
+        'new-theme.css' // always add to the end of the list
     ];
    ```
 4. Change the colors as you desire. Reference [`index.html`](public/index.html) and [`style.css`](public/style.css) as needed.

assets/images/catppuccin-latte-theme.png

@@ -978,6 +978,8 @@ const themes = [
   "nord-dark.css",
   "solarized-light.css",
   "volcano.css",
+  "catppuccin-mocha.css",
+  "catppuccin-latte.css",
 ];
 
 let currentThemeIndex = 0;

assets/images/catppuccin-mocha-theme.png

@@ -0,0 +1,43 @@
+:root {
+    --color-count: #8839ef;
+    --color-particle: #7287fd;
+    --color-particle-link: rgba(114, 135, 253, 0.15);
+    --color-pulse: #ea76cb;
+    --color-theme-toggle: #7287fd;
+    --color-theme-toggle-hover: #8839ef;
+    --color-bg-main: #eff1f5;
+    --color-bg-overlay: rgba(239, 241, 245, 0.8);
+
+    --color-text-default: #4c4f69;
+    --color-text-main-label: #179299;
+    --color-text-footer: #6c6f85;
+    --color-text-footer-hover: #179299;
+    --color-text-debug: #8c8fa1;
+    --color-text-debug-link: #8c8fa1;
+    --color-text-debug-link-hover: #179299;
+    --color-text-anchor-link: #6c6f85;
+
+    --color-modal-bg: #eff1f5;
+    --color-modal-border: #dce0e8;
+    --color-modal-title: #8839ef;
+    --color-modal-close-btn: #8c8fa1;
+    --color-modal-close-btn-hover: #d20f39;
+    --color-modal-stat-div: #e6e9ef;
+    --color-modal-stat-label: #6c6f85;
+    --color-modal-stat-value: #179299;
+    --color-modal-footer: #8839ef;
+
+    --color-terminal-bg: rgba(230, 233, 239, 0.9);
+    --color-terminal-border: #dce0e8;
+    --color-terminal-shadow: rgba(0, 0, 0, 0.3);
+    --color-terminal-input-text: #4c4f69;
+    --color-terminal-input-divider: #ccd0da;
+    --color-terminal-output-message: #5c5f77;
+    --color-terminal-tab-arrow: #7287fd;
+    --color-terminal-tab-arrow-hover: #8839ef;
+    --color-terminal-tab-bg-hover: #ccd0da;
+    --color-terminal-status-message: #9ca0b0;
+    --color-terminal-scrollbar: #7287fd;
+    --color-terminal-scrollbar-hover: #8839ef;
+    --color-terminal-text-default: #7287fd;
+}

public/app.js

@@ -0,0 +1,43 @@
+:root {
+    --color-count: #cba6f7;
+    --color-particle: #b4befe;
+    --color-particle-link: rgba(180, 190, 254, 0.15);
+    --color-pulse: #f5c2e7;
+    --color-theme-toggle: #b4befe;
+    --color-theme-toggle-hover: #cba6f7;
+    --color-bg-main: #1e1e2e;
+    --color-bg-overlay: rgba(30, 30, 46, 0.8);
+
+    --color-text-default: #cdd6f4;
+    --color-text-main-label: #94e2d5;
+    --color-text-footer: #a6adc8;
+    --color-text-footer-hover: #94e2d5;
+    --color-text-debug: #7f849c;
+    --color-text-debug-link: #7f849c;
+    --color-text-debug-link-hover: #94e2d5;
+    --color-text-anchor-link: #a6adc8;
+
+    --color-modal-bg: #1e1e2e;
+    --color-modal-border: #11111b;
+    --color-modal-title: #cba6f7;
+    --color-modal-close-btn: #7f849c;
+    --color-modal-close-btn-hover: #f38ba8;
+    --color-modal-stat-div: #181825;
+    --color-modal-stat-label: #a6adc8;
+    --color-modal-stat-value: #94e2d5;
+    --color-modal-footer: #cba6f7;
+
+    --color-terminal-bg: rgba(24, 24, 37, 0.9);
+    --color-terminal-border: #11111b;
+    --color-terminal-shadow: rgba(0, 0, 0, 0.3);
+    --color-terminal-input-text: #cdd6f4;
+    --color-terminal-input-divider: #313244;
+    --color-terminal-output-message: #bac2de;
+    --color-terminal-tab-arrow: #b4befe;
+    --color-terminal-tab-arrow-hover: #cba6f7;
+    --color-terminal-tab-bg-hover: #313244;
+    --color-terminal-status-message: #6c7086;
+    --color-terminal-scrollbar: #b4befe;
+    --color-terminal-scrollbar-hover: #cba6f7;
+    --color-terminal-text-default: #b4befe;
+}