# Dark Themes Integration Proposal

Some monochrome or highly saturated custom themes (like Matrix or Cyberpunk) can make syntax highlighting difficult to read due to low contrast. To fix this, we can implement industry-standard developer dark themes. These themes are mathematically tuned for high contrast, legibility, and reduced eye strain during long writing sessions.

Here is a curated list of dark themes we can build into BATF:

| Theme Name | Background | Primary Accent | Accent Contrast | Aesthetic Description |
| :--- | :--- | :--- | :--- | :--- |
| **One Dark** | `#282c34` | `#c678dd` (Purple) | **Very High** | The classic Atom/VS Code default. Soft slate gray background with balanced, highly legible pastel tokens. |
| **Nord** | `#2e3440` | `#88c0d0` (Ice Blue) | **High** | A cool, clean, arctic-inspired theme. Uses muted blue-gray tones with crisp frost and green highlights. |
| **Dracula** | `#282a36` | `#ff79c6` (Pink) | **High** | High-contrast gothic palette. Uses a deep dark background with vibrant pink, yellow, and cyan tokens. |
| **Tokyo Night** | `#1a1b26` | `#7aa2f7` (Blue) | **Very High** | Modern Japanese neon-inspired theme. Deep navy/blue-indigo background with bright, highly readable highlights. |
| **Monokai** | `#272822` | `#f92672` (Pink) | **Very High** | The classic high-contrast theme. Dark charcoal background with vivid, high-saturation pink, green, and yellow accents. |
| **Gruvbox Dark** | `#282828` | `#fabd2f` (Yellow) | **Medium-High** | Retro warm-toned palette. Light-brown charcoal background with soft, earthy red, green, and yellow highlights. |

---

## 🎨 Palette Breakdown for Key Themes

````carousel
```ini
[One Dark Color Scheme]
Background: #282c34 (Warm Slate)
Text: #abb2bf (Soft Gray)
Keywords: #c678dd (Chalky Purple)
Strings: #98c379 (Sage Green)
Numbers: #d19a66 (Light Orange)
Comments: #5c6370 (Muted Slate)
```
<!-- slide -->
```ini
[Nord Color Scheme]
Background: #2e3440 (Arctic Slate)
Text: #d8dee9 (Frosted White)
Keywords: #81a1c1 (Frost Blue)
Strings: #a3be8c (Nordic Green)
Numbers: #b48ead (Muted Purple)
Comments: #4c566a (Polar Gray)
```
<!-- slide -->
```ini
[Tokyo Night Color Scheme]
Background: #1a1b26 (Storm Indigo)
Text: #a9b1d6 (Muted Silver)
Keywords: #bb9afc (Neon Purple)
Strings: #9ece6a (Lime Green)
Numbers: #ff9e64 (Sunset Orange)
Comments: #565f89 (Steel Blue)
```
````

---

## 🛠️ How We Can Implement Them

We can integrate these themes directly using **CSS Variables**. This means we don't have to load external stylesheets for each theme. We simply declare the theme-specific variables at the top of [style.css](file:///mnt/docker/batf/public/style.css) (just like we did for `Dracula` and `Matrix`) and map the CodeMirror classes directly to them. 

This ensures that selecting a theme updates the entire application (toolbar, login, background, code blocks, and editor text) instantly and consistently.