Code Theme Builder

A VS Code theme builder with live previews, presets, import/export, saved themes, accessibility checks, and a small Node.js JSON-file backend.

Features

• Built-in presets: Catppuccin Mocha, Dracula, One Dark, Monokai, and GitHub Dark
• Live preview for JavaScript, Python, HTML, CSS, and Java
• Color controls for editor background, foreground, keywords, strings, comments, functions, numbers, and classes
• Contrast checker for foreground/background readability
• Random palette generator
• Save, load, rename, and delete themes with localStorage
• Publish themes to a backend gallery
• Load, like, delete, and track downloads for backend themes
• Import existing VS Code theme JSON files
• Copy CSS variables
• Copy complete VS Code theme JSON
• Download a ready-to-use .json theme file
• Shareable theme links using URL parameters
• Preview font selector

Tech Stack

• HTML5
• CSS3
• Vanilla JavaScript
• localStorage
• Browser FileReader API
• Node.js backend
• Local JSON file database

Run Locally

Frontend-only mode:

Open index.html in your browser.

If the backend is running, the frontend can also connect to it when opened directly from index.html.

Full backend mode:

npm start

Then open:

http://localhost:3000

No npm packages are required because the backend uses built-in Node.js modules.

If port 3000 is already busy, the server will try the next available port, such as:

http://localhost:3001

Backend API

GET    /api/health
GET    /api/themes
POST   /api/themes
GET    /api/themes/:id
PUT    /api/themes/:id
DELETE /api/themes/:id
POST   /api/themes/:id/like
POST   /api/themes/:id/download

Theme data is stored in:

data/themes.json

Safe Data Handling

The backend validates theme names and color values, limits JSON request size, prevents path traversal when serving files, and stores only theme data. No passwords, tokens, or payment data are used.