Version 0.1.16

Released: August 26, 2025

Theme System Enhancements

Custom "Magical" Theme with Dark Mode

Added a beautiful custom theme that captures the essence of Django Spellbook with warm, earthy tones:

Light Mode

• Primary: Saddle brown (#8b4513) - rich, warm brown
• Background: Light tan (#f0e6d2) - soft parchment color
• Surface: Cream (#fff9e6) - elevated content areas
• Accent: Amber (#f59e0b) - calls to action

Dark Mode

• Primary: Peru (#cd853f) - lighter brown for visibility
• Background: Very dark brown (#1a1410) - deep, rich darkness
• Surface: Dark brown (#2c241c) - card backgrounds
• Text: Light tan (#f0e6d2) - inverted for readability

# settings.py
MAGICAL_THEME_CONFIG = {
    'name': 'magical',
    'modes': {
        'light': {
            'colors': {
                'primary': '#8b4513',
                'background': '#f0e6d2',
                # ... full color palette
            }
        },
        'dark': {
            'colors': {
                'primary': '#cd853f',
                'background': '#1a1410',
                # ... dark mode colors
            }
        }
    }
}

HTMX-Powered Theme Switcher

Features

• Instant preview of color palettes without page reload
• Session persistence - themes are saved per user session
• Mode toggle - switch between light and dark modes
• Visual feedback - smooth animations and transitions
• Reset to default - one-click return to magical theme

Technical Implementation

# views.py
@csrf_exempt
@require_http_methods(["POST"])
def set_theme(request):
    theme = request.POST.get('theme', 'magical')
    mode = request.POST.get('mode', 'light')
    request.session['theme'] = theme
    request.session['mode'] = mode
    # Return partial template with HX-Refresh header

Theme-Aware Component Styling

Updated Components

All site components now properly use CSS variables for theming:

1. Navigation & Headers
   - Mode toggle button with sun/moon icons
   - Theme-aware header colors
   - Proper hover states

2. Sidebar & TOC
   - Background uses var(--background-color)
   - Borders use var(--primary-color)
   - Active items use opacity variants
   - Hover states adapt to theme

3. Code Blocks
   - Dark backgrounds with theme text colors
   - Syntax highlighting that adapts to theme
   - Proper contrast in both light and dark modes

4. Content Areas
   - Surface colors for cards and elevated content
   - Text colors that ensure readability
   - Link colors that stand out appropriately

Home Page Improvements

Markdown-Based Content

The "Get Started" section now uses Django Spellbook's own markdown rendering:

# views.py
from django_spellbook.parsers import render_spellbook_markdown_to_html

def home(request):
    with open(markdown_path, 'r') as f:
        markdown_content = f.read()
    get_started_html = render_spellbook_markdown_to_html(markdown_content)

Benefits

• Proper syntax highlighting with theme colors
• Consistent styling across all pages
• Easy content updates via markdown
• Automatic theme adaptation

---

Full documentation available at Django Spellbook Docs