Skip to content

Latest commit

 

History

History
144 lines (101 loc) · 4.3 KB

README.md

File metadata and controls

144 lines (101 loc) · 4.3 KB

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

  • 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.