ChatGPT Color Tweak

Customizable color themes for ChatGPT, delivered as a lightweight browser extension built with WXT and TypeScript.

What it does (precisely): when you choose colors in the popup, the extension injects a <style> tag into the active ChatGPT tab and sets CSS Custom Properties (variables) on :root (e.g., --theme-user-msg-bg, --theme-submit-btn-bg). The extension persists your picks in browser.storage.local and re-applies them whenever you visit chatgpt.com.

---

Table of Contents

• Features
• User Guide
  • Quick Start (load the extension)
  • Common Workflows
  • Resetting
• Developer Guide
  • Project Structure
  • Installation
  • Development Build Process
  • Production Build Process
• Disclaimer

---

Features

• Base color picker
  Pick a base hex color to influence multiple areas at once.

• Granular overrides (Advanced Settings)
  Toggle and override specific regions:

  • User message (--theme-user-msg-*)
  • Submit button (--theme-submit-btn-*)
  • Secondary buttons (--theme-secondary-btn-*)
  • Text selection background (--theme-user-selection-bg)

• Smart text contrast
  For colored elements, the extension computes a readable text color (#000 or #fff) using colord (pickTextColorFor).

• Auto-selection color
  If you enable selection but don’t pick a color, the extension derives a desaturated tone from your base color (computeSelectionColorFrom).

• State persistence
  Your theme is saved in browser.storage.local and re-applied automatically on subsequent visits.

User Guide

Quick Start (load the extension)

• Chrome

  1. Extract the zip to a folder.
  2. Open chrome://extensions and enable Developer mode.
  3. Click “Load unpacked” and select the extracted folder.

• Firefox

  1. Extract the zip to a folder.
  2. Open about:debugging#/runtime/this-firefox.
  3. Click “Load Temporary Add-on…” and choose the extracted folder’s manifest.json.
  4. Note: This installs temporarily (it’s removed on restart).

Common Workflows

• Set a base theme

  1. Open ChatGPT in a tab.
  2. Click the extension icon → Color Tweak popup.
  3. Pick a Base color. Changes are applied immediately to the active tab (and persisted).

• Enable/disable advanced areas

  • Expand Advanced Settings.
  • Toggle a switch (e.g., User message) to enable an override.
  • If enabled, you can pick a color for that specific area.

• Persist across sessions

  • The extension stores your Theme in browser.storage.local and re-applies it automatically.

Resetting

• Click Reset in the popup to clear the stored theme and remove the injected style tag from the current tab.

---

Developer Guide

Project Structure

├── .gitignore
├── entrypoints
│   ├── content.ts         # Content script: resolves theme → injects CSS vars on :root
│   └── popup
│       ├── index.html     # Popup UI markup
│       ├── main.ts        # Popup logic: state, storage, messaging, validation
│       └── style.css      # Popup styling
├── package.json
├── tsconfig.json
├── utils
│   └── color.ts           # Color helpers: contrast, selection derivation, hex validation
└── wxt.config.ts          # WXT config & WebExtension manifest options

Installation

# Clone and install
bun install

# (Optional) Type-check only
bun run compile

Development Build Process

# Chromium (default target)
bun run dev

# Firefox
bun run dev:firefox

• WXT launches a temporary extension profile with hot reloading.
• Open chatgpt.com and open the popup to test.

Production Build Process

# Build production bundles
bun run build

# Produce store-ready zip packages
bun run zip
# or specifically for Firefox
bun run build:firefox
bun run zip:firefox

Disclaimer

This project is not affiliated with OpenAI or the ChatGPT product. Names and domains are used solely to describe where the extension operates.