How Stylebot Profiles Work for Saving and Switching Styles

Updated

Stylebot profiles let you store more than one look for the same website and switch between them in a click. The panel shows a profile selector next to the site name (the example shows harbourpost.example / Default), with a Create profile option beside it. You style the page once inside a profile, and Stylebot writes the CSS and reloads that style every time you return to the site. This works in the desktop Chrome, Firefox, and Edge extensions.

What a profile actually holds

A profile is a named set of CSS rules tied to one site. Everything you change through the visual controls or the code editor lands in the profile that's currently selected, so two profiles on the same site can look completely different without overwriting each other.

The panel's Default profile is the one you start with. Custom profiles you create sit alongside it and are picked from the same selector.

Saving a look

  1. Open the site you want to restyle.
  2. Open the editor with the Stylebot icon or Alt+Shift+M.
  3. Click an element to select it — the fields show its current styles.
  4. Adjust it with the Basic controls (text, font, size, line height, color, decoration, alignment, background, box, effects) or switch to Code and write CSS directly.
  5. Choose Create profile, give it a name, and make your changes inside it.

Because the CSS is written as you edit, there's no separate save step for the styling itself — the profile keeps what you've applied and loads it on your next visit.

Switching between looks

Use the profile selector in the panel to move between Default and any custom profile you've made. The page updates to the selected profile's rules immediately, which makes it practical to keep, say, a stripped-down reading view and a dark variant of the same site and flip between them depending on what you're doing.

Practical notes

  • Profiles are per site. A profile created on one domain doesn't carry to another, so each site keeps its own set of looks.
  • Presets and Hide/Reset in the panel are quick starting points inside whichever profile is active — they don't create a new profile on their own.
  • The CLI follows the same model. With @stylebot/cli installed, commands like stylebot css set harbourpost.example < night.css apply a stylesheet to an open tab, and stylebot outline lists the elements on the page so you know what to target. This is useful when a coding agent is doing the restyling rather than you clicking through the panel.

If you only ever want one look per site, the Default profile is enough and you can ignore profiles entirely. Create additional profiles when you want to keep two or more distinct appearances for the same site and switch without redoing the work.