Skip to content

v1.2.0 - Comprehensive Theming & Customization System

Choose a tag to compare

View all tags
@kunwar-shah kunwar-shah released this 11 Nov 10:48
· 48 commits to main since this release
v1.2.0
df83ebb
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

🎨 v1.2.0 - Comprehensive Theming & Customization System

This is a major feature release introducing complete theming and customization capabilities to Claudex, along with monetization support via GitHub Sponsors and Ko-fi.

✨ Major Features

🎨 Theming System (10 Professional Themes)

  • Classic - Nostalgic bluish-gray aesthetic (original Claudex design)
  • Default - Professional black/white/slate
  • Emerald - Current branding color (teal green)
  • shadcn/ui themes: Blue, Green, Purple, Orange, Red, Rose, Yellow
  • HSL color system for dynamic theming
  • Real-time theme switching via CSS variables

🔤 Advanced Typography (29 Font Families)

  • Framework fonts: Inter (default), Geist (shadcn/ui), System
  • Popular: Roboto, Open Sans, Poppins, Montserrat, Lato
  • Modern: DM Sans, Work Sans, Manrope, Outfit, Jakarta Sans, Lexend
  • Friendly: Nunito, Ubuntu, Raleway, Quicksand, Karla
  • Display: Space Grotesk, Oswald, Bebas Neue, Archivo
  • Serif: Playfair Display, Merriweather
  • Visual preview grid showing fonts in actual typefaces

📏 Granular Font Sizing (5 Options)

  • Small: 14px - Compact view
  • Small-Medium: 15px
  • Medium: 16px (default)
  • Medium-Large: 17px
  • Large: 18px - Maximum readability
  • Smooth scaling across entire application

🎯 Border Radius Control

  • Sharp: No border radius
  • Rounded: 0.5rem (default)
  • Extra Rounded: 1rem
  • Applied to all cards, buttons, and components

💖 Monetization Ready

  • GitHub Sponsors button in footer
  • Ko-fi support
  • Donation section in README
  • Subtle, non-intrusive placement

📸 Screenshots

Theme Selector

Theme Selector

Font Family Preview

Font Preview

Font Size & Border Radius

Font Settings

Settings Modal

Settings

🛠️ Technical Implementation

Architecture

  • React Context API: Global settings state management
  • localStorage persistence: All settings saved automatically
  • CSS custom properties: Runtime theme switching
  • HSL color system: Dynamic color calculations
  • Visual font previews: Inline font-family styles
  • Optimized images: 70% file size reduction (pngquant + optipng)

Settings System

  • SettingsContext.jsx - State management with 29 font mappings
  • SettingsModal.jsx - Comprehensive settings UI
  • CSS variables: --font-family, --base-font-size, --border-radius
  • BrowserRouter fix for proper context provider hierarchy

Bug Fixes

  • Fixed context provider hierarchy (switched to BrowserRouter)
  • Fixed font preview not showing different fonts
  • Fixed theme preview showing current theme instead of preview colors
  • Fixed user message text color on dark backgrounds
  • Fixed white text on colored backgrounds for all nested elements

📦 What's Included

New Files (10):

  • 8 theme CSS files (classic, default, green, orange, red, rose, yellow, dark)
  • SettingsContext.jsx - Settings state management
  • SettingsModal.jsx - Settings UI
  • Screenshot automation script (Playwright)

Modified Files (28):

  • README.md - v1.2.0 showcase + monetization
  • Footer.jsx - Support button + v1.2
  • main.jsx - BrowserRouter fix
  • design-system.css - 10 new font imports
  • 24 component files - Theme support

Screenshots (4):

  • Optimized from 560KB → 173KB (69% reduction)
  • Professional 2x2 grid layout in README
  • Playwright automated capture

🚀 Installation & Usage

Install/Upgrade

```bash

If already installed

npm install -g claudex@latest

Or clone and build

git clone https://github.com/kunwar-shah/claudex.git
cd claudex
npm install
npm run build
npm start
```

Access Settings

  1. Click Settings icon in header
  2. Select theme, font, size, and border radius
  3. Click Save Changes
  4. Settings persist automatically

📊 Metrics

  • Files changed: 83
  • Insertions: 22,717
  • Deletions: 1,801
  • Commits: 6
  • Themes: 10 professional options
  • Fonts: 29 with visual preview
  • Font sizes: 5 granular options
  • Screenshots: 4 (optimized to 173KB)

🎯 Coming in v1.3.0

Settings sections marked "Soon" (non-functional in v1.2.0):

  • Search & Index settings
  • Session management settings
  • Display preferences
  • Data & Privacy controls
  • Advanced configuration

These will be enabled in future releases based on roadmap.

💖 Support This Project

Claudex is free and open source. If it saves you time:

  • ⭐ Star the repo - Help others discover Claudex
  • 💸 GitHub Sponsors - Support development
  • ☕ Ko-fi - Buy me a coffee

🔗 Links

Full Changelog: v1.1.1...v1.2.0

🎨 Generated with Claude Code

Assets 2
Loading