Merge pull request #67 from ggfevans/feature/dracula-theme

feat: add Dracula dark & light themes

Author: lklynet

README.md

@@ -51,8 +51,11 @@ 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/catppuccin-mocha-theme.png" width="100" alt="Catppuccin Mocha" /> <img src="assets/images/catppuccin-latte-theme.png" width="100" alt="Catppuccin Latte" />
+*   **Themes:** Built-in theme switcher (Hypermind, Hypermind Classic, Nord, Solarized, Tokyo Night, etc).
+
+    <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" /><br>
+    <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" /><br>
+    <img src="assets/images/dracula-theme.png" width="100" alt="Dracula" /> <img src="assets/images/alucard-theme.png" width="100" alt="Alucard" />
 
 ---
 

THEMES.md

@@ -32,6 +32,14 @@
 
 ![Catppuccin latte theme screenshot](assets/images/catppuccin-latte-theme.png)
 
+### Dracula
+
+![Dracula theme screenshot](assets/images/dracula-theme.png)
+
+### Alucard
+
+![Dracula Light theme screenshot](assets/images/dracula-light-theme.png)
+
 # Contributing custom themes
 
 1. Fork `main` and clone locally to your device.
@@ -50,6 +58,8 @@
         'volcano.css',
         'catppuccin-mocha.css',
         'catppuccin-latte.css',
+        'dracula.css',
+        'dracula-light.css',
         'new-theme.css' // always add to the end of the list
     ];
    ```

assets/images/dracula-light-theme.png

@@ -3,7 +3,11 @@ services:
     build: .
     image: hypermind
     container_name: hypermind
-    network_mode: host
+    #network_mode: host
+    ports:
+      - "3000:3000"
     restart: unless-stopped
     environment:
       - PORT=3000
+      - ENABLE_CHAT=true
+      - ENABLE_MAP=true

assets/images/dracula-theme.png

@@ -980,6 +980,8 @@ const themes = [
   "volcano.css",
   "catppuccin-mocha.css",
   "catppuccin-latte.css",
+  "dracula.css",
+  "dracula-light.css",
 ];
 
 let currentThemeIndex = 0;

docker-compose.dev.yml

@@ -0,0 +1,43 @@
+:root {
+    --color-count: #644ac9;
+    --color-particle: #a3144d;
+    --color-particle-link: rgba(163, 20, 77, 0.15);
+    --color-pulse: #036a96;
+    --color-theme-toggle: #a3144d;
+    --color-theme-toggle-hover: #036a96;
+    --color-bg-main: #fffbeb;
+    --color-bg-overlay: rgba(255, 251, 235, 0.8);
+
+    --color-text-default: #1f1f1f;
+    --color-text-main-label: #644ac9;
+    --color-text-footer: #6c664b;
+    --color-text-footer-hover: #644ac9;
+    --color-text-debug: #6c664b;
+    --color-text-debug-link: #6c664b;
+    --color-text-debug-link-hover: #644ac9;
+    --color-text-anchor-link: #6c664b;
+
+    --color-modal-bg: #fffbeb;
+    --color-modal-border: #cfcfde;
+    --color-modal-title: #a3144d;
+    --color-modal-close-btn: #6c664b;
+    --color-modal-close-btn-hover: #cb3a2a;
+    --color-modal-stat-div: #cfcfde;
+    --color-modal-stat-label: #6c664b;
+    --color-modal-stat-value: #036a96;
+    --color-modal-footer: #644ac9;
+
+    --color-terminal-bg: rgba(255, 251, 235, 0.9);
+    --color-terminal-border: #cfcfde;
+    --color-terminal-shadow: rgba(0, 0, 0, 0.3);
+    --color-terminal-input-text: #036a96;
+    --color-terminal-input-divider: #cfcfde;
+    --color-terminal-output-message: #3d3d3d;
+    --color-terminal-tab-arrow: #a34d14;
+    --color-terminal-tab-arrow-hover: #036a96;
+    --color-terminal-tab-bg-hover: #cfcfde;
+    --color-terminal-status-message: #8a8a8a;
+    --color-terminal-scrollbar: #b8b8b8;
+    --color-terminal-scrollbar-hover: #8a8a8a;
+    --color-terminal-text-default: #a34d14;
+}

public/app.js

@@ -0,0 +1,43 @@
+:root {
+    --color-count: #bd93f9;
+    --color-particle: #ff79c6;
+    --color-particle-link: rgba(255, 121, 198, 0.15);
+    --color-pulse: #8be9fd;
+    --color-theme-toggle: #ff79c6;
+    --color-theme-toggle-hover: #8be9fd;
+    --color-bg-main: #282a36;
+    --color-bg-overlay: rgba(40, 42, 54, 0.8);
+
+    --color-text-default: #f8f8f2;
+    --color-text-main-label: #bd93f9;
+    --color-text-footer: #6272a4;
+    --color-text-footer-hover: #bd93f9;
+    --color-text-debug: #6272a4;
+    --color-text-debug-link: #6272a4;
+    --color-text-debug-link-hover: #bd93f9;
+    --color-text-anchor-link: #6272a4;
+
+    --color-modal-bg: #282a36;
+    --color-modal-border: #44475a;
+    --color-modal-title: #ff79c6;
+    --color-modal-close-btn: #6272a4;
+    --color-modal-close-btn-hover: #ff5555;
+    --color-modal-stat-div: #44475a;
+    --color-modal-stat-label: #6272a4;
+    --color-modal-stat-value: #8be9fd;
+    --color-modal-footer: #bd93f9;
+
+    --color-terminal-bg: rgba(40, 42, 54, 0.9);
+    --color-terminal-border: #44475a;
+    --color-terminal-shadow: rgba(0, 0, 0, 0.3);
+    --color-terminal-input-text: #8be9fd;
+    --color-terminal-input-divider: #44475a;
+    --color-terminal-output-message: #50fa7b;
+    --color-terminal-tab-arrow: #ffb86c;
+    --color-terminal-tab-arrow-hover: #8be9fd;
+    --color-terminal-tab-bg-hover: #44475a;
+    --color-terminal-status-message: #6272a4;
+    --color-terminal-scrollbar: #bd93f9;
+    --color-terminal-scrollbar-hover: #8be9fd;
+    --color-terminal-text-default: #ffb86c;
+}