Getting started
Click the Stylebot icon in the toolbar, then Style this page. Or press alt+shift+M on any tab, or right-click an element and choose Stylebot → Style Element.
Click the picker, hover the page and click an element. Press ↑ before clicking to select its parent instead. Then change it in Basic, or write CSS in Code. Changes save as you make them and load every time you visit the site.
- Fonts
- Search 400 Google Fonts and Stylebot loads the one you pick, or type any font installed on your computer.
- Editor position
- In Chrome and Edge the editor opens in the side panel. Use Position in its ⋯ menu to open it in a separate window or dock it in the page. Firefox has no side panel.
- Turning a style off
- Use the switch in the popup, or alt+shift+S. The style is kept, just not applied.
Profiles
A profile is a separate stylesheet for the same site, so you can keep more than one look and switch between them. Only one is applied at a time, and every site starts with Default.
Click the profile name next to the site in the editor's header to create, rename, duplicate or delete profiles. Switch between them there or in the popup, where No style turns styling off for the site. New profiles start empty.
Command line
The stylebot command lets a coding agent like Claude Code, Codex or Cursor restyle sites right in your browser, using your own subscription instead of an API key. It's the best way to have an agent style a site, and you can run the commands yourself too.
- Setup
- Install the CLI, connect it to your browsers, then turn on Let apps on this computer control Stylebot in Options. The command line page walks through each step. Chrome and Edge only for now.
- Claude Code
- Add the Stylebot plugin and ask for a change with
/stylebot, such as a dark theme for a site. - Privacy
- Command line access is off until you turn it on. Stylebot and the CLI talk only to each other, on this computer; an agent sends what it reads to its own provider.
Chat
Chat is ideal for quick fixes. Describe the change you want in the Chat tab and Stylebot writes the CSS. You can pick an element to point it at something, or attach a screenshot to show what you mean. For bigger changes, like a whole new theme, use the command line.
- Bring your own key
- Connect a Claude, OpenAI or Gemini API key. Keys are saved on this computer only and never synced. Messages go straight from your browser to the provider.
- Where changes go
- Each change is applied right away and added to the current profile's stylesheet. Click Added N lines to see it in Code, or undo it from the chat.
- Cost
- The token count under the message box shows what the conversation has used, with an estimated cost.
Readability and grayscale
Both are in the Presets tab and stack with your own changes. Readability turns a site's articles into a clean reading view, with a choice of theme, font, size and width; it leaves pages that aren't articles alone. Grayscale removes color from the site, at any strength.
Sync, backup and history
- Google Drive sync
- Connect Google Drive in Options. Your styles, including profiles, sync every 30 minutes and right after you edit. Stylebot only sees the files it creates in your Drive, and there is no Stylebot server.
- Conflicts
- If a style changed on two computers, your newer edit is kept and the other version is saved in a comment, so nothing is lost.
- Backup
- Export and import all your styles as JSON from Options.
- Version history
- Every change on this computer is kept in Options, including ones that arrive through sync. Restore any earlier version, for some sites or all of them.
URL rules
By default, Stylebot matches styles to websites by domain name. Edit a style's URL in Options and use these patterns for anything more specific.
**Matches any character sequence.*Matches any character sequence until a / is found.,Separates a list of patterns. A URL matches if any pattern matches.^At the start of a URL, turns it into a regular expression.Examples
docs.google.com- The domain docs.google.com or any of its subdomains.
docs**- Any URL beginning with docs.
docs*.google.com- docs.google.com, docs1.google.com, docs2.google.com and so on.
*.ycombinator.com- news.ycombinator.com and apps.ycombinator.com.
docs.google.com, spreadsheets.google.com- Either domain, or any of their subdomains.
^http://www.reddit.com/$- The Reddit homepage only.
*- Every site. Useful for styles you want everywhere.
Keyboard shortcuts
Global shortcuts work on any page Stylebot can style; change them in your browser's shortcut settings, linked from Options. For the editor's own shortcuts, press ? in the editor.
Help and support
Found a bug or have an idea? Open an issue on GitHub. Stylebot is free and open source, maintained since 2011. If it's useful to you, you can support it by buying me a coffee.