Product Updates
Integration Patterns

HubSpot Theme Changer: How We Built a Custom Dark Mode Chrome Extension

Jack Tolley Jack Tolley
HubSpot Theme Changer: How We Built a Custom Dark Mode Chrome Extension

HubSpot does not have dark mode. If you have ever worked a late session in your portal, you know how much that matters.

So I built one.

The Problem

HubSpot’s interface is bright. Really bright. If you are working across multiple monitors, switching between a dark IDE or Slack and a blinding white CRM is jarring. And if you are in a timezone where your working hours overlap with the evening — which is the case for a lot of international teams — you are staring at a white screen for hours.

There is no native setting to change this. No theme picker, no appearance toggle, nothing in account settings.

What HubSpot Theme Changer Does

HubSpot Theme Changer is a free Chrome extension that gives you full control over how HubSpot looks.

  • Dark Mode — a proper dark theme across Contacts, Deals, Marketing, Settings, and every other HubSpot page
  • Light Mode — the clean default, if you prefer it during the day
  • Custom Themes — pick your own colours to match your brand or personal preference
  • Instant Apply — changes take effect immediately, no page reload
  • Persistent — your choice is remembered across sessions and browser restarts

It works across all HubSpot pages. Contacts, Deals, Tickets, Workflows, Settings — the theme follows you everywhere.

How We Built It

This was an experiment in using AI for something it is genuinely bad at: UI.

My first approach was to use a Playwright MCP to loop through HubSpot pages, identify CSS rules, and add them to the extension programmatically. It was painfully slow — minutes per page — and the AI could barely identify the right elements. Every fix broke something else.

So I tried a different angle:

  1. Claude one-shot a webcrawler that gathered 1,000 HubSpot URLs
  2. From those URLs I created a JSON map of every visible element and its styles
  3. Then I used those maps to generate the theme rules

That approach — converting a visual problem into a text problem — is what made it work. What would have taken weeks of manual CSS inspection was done in a day.

The result is not perfect. Some pages have edge cases, and the voices in the demo video are a little robotic. But the core experience is solid, and because the entire theme system is built from code, I can iterate on it quickly. Improve a transition, swap an asset, fix a timing issue — and apply the change everywhere at once.

The Response

The feedback has been genuinely surprising. We hit two 5-star reviews within the first few weeks, and usage grew faster than anything else we have shipped.

It turns out people really do want to control how their CRM looks. Dark mode is not a nice-to-have for late-night workers — it is a daily comfort thing.

Try It

HubSpot Theme Changer is free. No account needed, no data sent to external servers. Everything runs locally in your browser.

Install from the Chrome Web Store: HubSpot Theme Changer

Learn more: here

If you have a HubSpot page where the theme breaks or looks off, let us know — we are actively improving coverage.

See It in Action

Here are some examples of the extension applied across different HubSpot pages and themes.

Contacts

Dark mode — contacts

Red theme — contacts

Orange theme — contacts

Purple theme — contacts

Workflows

Dark mode — workflows

Green theme — workflows

Rose theme — workflows

Purple theme — workflows

Settings

Orange theme — settings

Dark mode — settings

Teal theme — settings

Dark blue theme — settings