Style every overlay with a theme

What a theme is

A theme holds your channel’s colours, images and sounds for widgets: the fonts, the text and accent colours, the panel behind each piece, its rounding and spacing, the backgrounds behind panels, chat lines and alert cards, picture frames around them, the art and sound of alerts, the style of each part — a chat name, an alert’s title — and, if you want, some custom CSS of your own. Every overlay draws with a theme, so changing the theme restyles every overlay that uses it, live in OBS, without touching a Browser Source. A custom graphic follows the theme too when its code uses it (Match your overlay's theme).

Your channel always has at least one theme, My theme, and one theme is the Active one. Every overlay follows the Active theme unless you pin it to another, so switching the Active theme changes the look of your whole stream in one step.

You need an overlay to try this on. Add an overlay to OBS takes you from New overlay to a Browser Source; everything below happens in an overlay’s editor.

1. Open a theme

1. Open any overlay in Studio. Under Layers, the compact Theme · My theme entry names the theme this overlay uses and says Follows Active or Pinned to this overlay.
2. Press that theme entry to edit it without losing your selected layer. The right panel names the theme and says Theme · Shared. Back to followed by the layer’s name returns to its settings; your layout and canvas zoom stay put. While this editor stays open, returning to a scope restores its open sections and position.
3. To manage or preview another theme, choose Theme at the top of the left panel, or Manage themes in the shared editor. The manager lists your themes, the Active one first. Active marks the theme unpinned overlays follow, and This overlay marks the one the overlay you are editing draws with. Each theme has a small sample of its colours and type; a theme with a panel frame shows it round its sample (Put a frame around panels, chat lines and cards).
4. Click a theme to preview and edit it. This does not make it Active or pin the overlay. If it differs from the overlay’s assigned theme, Studio names both: “The canvas previews Capsule; this overlay uses My theme.” Returning to the layer’s settings restores its actual overlay theme.

2. Change a theme’s look

1. Press the theme entry under Layers, or open a theme in the manager. Check the named theme and Theme · Shared scope before editing. Clicking empty canvas opens Overlay settings · Local, where Edit My theme opens the assigned theme instead.
2. Open Appearance, then open Typography for the fonts, Colours & panel for the colours and the panel, or Background & spacing for the spacing, border, frames and backgrounds. The canvas follows as you type.
3. For finer control, open Theme CSS in the shared theme editor. It applies to every overlay using that theme. The overlay’s Overlay CSS lives separately under Overlay settings, applies to that overlay only, and wins when the two disagree.
4. Press Publish, review the named changes and confirm Publish. Every overlay using the theme updates in OBS within a few seconds.

Under Colours & panel, Drop shadow puts a soft shadow behind a layer's panel, including the card of a Leaderboard, Poll, Now playing, Supporter ticker, Goal bar, Queue, Stream Boss, Support Jar or giveaway. A panel with nothing to see, with Panel opacity at 0 and no background or frame, gets no shadow.

Alert designs · Shared theme is a separate section in this editor. Choose one of that theme’s existing alert designs there to change its message, media, layout and timing. These are shared design edits, not local layer overrides. The selected overlay layer keeps its own assigned design.

Theme edits are draft changes like any other edit: they wait in your draft, the chip in the top bar counts them, and nothing reaches OBS until you publish. Arrange your overlay explains the draft, Publish and History.

3. Add a theme

Open Theme and press Add a theme under your themes. Choose Browse marketplace for a ready-made look, or Create new theme to make your own.

1. For a ready-made theme, choose Browse marketplace. The Marketplace opens with Themes selected: Bloopbot’s Studio, Capsule, Scoreboard and Minimal, and themes other streamers designed.
2. Open a theme and look over its review, then press Add. The theme joins your themes; nothing on stream changes until you make it Active and publish. Some themes bring overlays and scene screens too, which appear on Overlays.
3. Return to your overlay’s Theme tab, open the theme and press Switch & publish, or Make Active and publish when you are ready (Switch the Active theme).

To make your own, press Create new theme. New theme opens for editing with Studio’s default look, and is saved to your draft. Use Rename to name it and open Appearance in the shared editor. It becomes Active only when you choose Make Active or Switch & publish. Creation is unavailable when your theme allowance is full: free a place first, or browse Marketplace to swap in a theme (How many themes you can keep).

To start from a theme you already have, open it in Theme and select Duplicate. The copy, named like My theme copy, is in your draft; select Rename to name it, and open Appearance from there.

If you connect an AI assistant with overlay permissions, you can ask it to copy one of your themes or start from Studio, Capsule, Scoreboard or Minimal, then adjust the theme's look in your Studio draft. Ask it to show a picture of an overlay in the draft theme, refine the look, and preview again. Open the new theme in Theme to review it yourself before you publish.

The same chat, follow alert, leaderboard, goal and poll over a racing stream show how each of Bloopbot’s themes treats busy footage:

The gameplay frame is by SuperTuxKart contributors, used under CC BY 1.0.

A theme you add is a starting point. You can change its colours and type under Appearance, and its Parts and Motion in their own sections, and each overlay can override a field for one layer. Your My theme and any other theme keep their appearance when you add one.

Import a theme with a bundle

You can bring in a theme on its own, or as part of a bundle with flows and overlays. Open Marketplace, press Paste a link or drop a file, drop the .bloop.zip file, and check its review. For a theme on its own, the review says it adds the theme and lists the art and sounds it carries. Press Add. Your existing flows, widgets and Active theme stay as they are. Drop the same theme file again and nothing is added twice.

To use the theme, open a widget editor, choose the theme in the Theme tab, then use Switch & publish. New widgets follow the Active theme. Standard alert layers on those widgets use the theme’s matching image and sound. A theme can also supply defaults for new custom alerts; if you give a custom alert its own image or sound, that choice wins. Switching themes changes the images and sounds the alert inherits, as well as its colours. Select an alert layer to edit a matching theme design, then publish to update every widget using that theme. If the review says there is no room for another theme, it offers to swap it in: see How many themes you can keep.

Add a theme from the Marketplace

The Marketplace lists every theme: Bloopbot’s own Studio, Capsule, Scoreboard and Minimal, and community themes other streamers designed. A community theme says Community and names its designer, and shows the designer’s pictures; every one is reviewed before it is listed, and its images and sounds come into your media library when you add it, in a folder named after the listing under Marketplace. To share a theme of your own, see Publish a theme.

Each of Bloopbot’s themes comes with overlays drawn in it — a chat box, an alerts overlay with follow, sub, cheer and raid alerts, and a goal bar — and four full-screen scene screens, so you can add a whole look in one go.

1. Open Marketplace and pick Themes. The Theme tab’s Add a theme → Browse marketplace opens this list too (Add a theme).
2. Open a theme and look it over in its review: one sentence saying what adding it does, and What you get, such as the theme, its overlays and its scene screens.
3. Press Add. The theme joins your themes, and its overlays and scene screens appear on Overlays.
4. At your plan’s theme limit the review swaps the new theme into your draft in place of your Active one and keeps the old one in History (How many themes you can keep).
5. To use it, switch to it from Studio’s Theme tab (Switch the Active theme).

Adding never changes your Active theme, unless it swaps one in at your limit, and then only in your draft. OBS keeps drawing your current look until you switch and publish.

When Bloopbot or a designer improves a theme you added, it is marked Update ready under Marketplace → Installed:

• If you have not changed your copy, Update puts the new version into your draft. Nothing on stream changes until you publish; then every overlay using the theme restyles in OBS within a few seconds. History keeps the version that was live.
• If you changed your copy, it asks “You changed Neon. Keep your version?” with Keep mine and Use the new one. Use the new one puts the new version into your draft in place of your changes; History keeps your published version.

More on updates is in Update what you added.

For example, on a Free channel: open Marketplace, pick Themes, open Capsule and press Add. Capsule is Active in your draft, its overlays and scene screens are on Overlays, and your old theme is in History. Publish, and every overlay that follows the Active theme turns Capsule in OBS.

If something is not as expected:

• Nothing changed in OBS after adding: adding a theme never switches the Active one. Switch to it in the Theme tab, and publish after a swap.
• The review says you already have it: an identical theme is on your channel, so it is not added twice.
• No Update though a newer version is out: you changed your copy, so it asks Keep mine or Use the new one instead, and an update never overwrites your work without asking.
• A community theme says one of its files is not available right now: nothing was added. Try again later. If it says the file was taken down, the theme can’t be added.

Scene screens

Scene screens are full-screen overlays for the moments between your gameplay: Starting soon, Be right back, Stream ending and Just chatting. Each fills the whole 1920 × 1080 canvas with the theme’s backdrop, and each belongs in its own OBS scene:

The same four layouts are on Overlays → Add as ready-made overlays (Start from a ready-made overlay): a theme’s scene screens are those layouts in its own backdrop.

Your channel keeps one of each. They arrive with a theme you add, and you find them on Overlays, under Scene screens. Their text, panels, countdowns, camera frame and backdrop colours follow your Active theme, like any overlay.

Screens you added before 27 September 2026 keep the layout they came with, and their camera frame and backdrop keep the colours of the theme you added them from; updating that theme does not change them. To give one the new layout that follows your theme, use Use Studio’s layout… (or the theme you want) under Scene screens (Use another theme’s layout), or add that screen from Overlays → Add and keep Restyle my screen.

Add the scene screens

Scene screens arrive with a theme: they are in its review’s What you get. You find them on Overlays, under Scene screens, below your overlays.

1. Add a theme from the Marketplace (Add a theme from the Marketplace).
2. Open Overlays. Under Scene screens, each screen has a row: its name, Add to your OBS scene Be Right Back (or whichever scene it belongs to) and a copy icon (Copy URL).
3. For each row, open that scene in OBS, add a Browser Source, press the copy icon (Copy URL) and paste it into the source’s URL. Set Width to 1920 and Height to 1080. The URL is copied, never shown, because it carries the screen’s private key.

The checklist stays on Overlays, so you can copy a URL again whenever you need it. To add all four scenes to OBS at once instead, see Import the scenes into OBS.

Just chatting needs your camera on top. The screen’s backdrop covers the whole canvas, so in the Just Chatting scene put your camera source above this Browser Source in OBS’s Sources list, and size it to the frame on the left.

When you already have scene screens

Adding another theme never adds a second screen for a scene you already have. Your screen, its URL and its layout stay exactly as they are, and it takes nothing from your plan. To give it the new theme’s layout, see below.

Adding Starting soon, Be right back, Stream ending or Just chatting from Overlays → Add when you have that screen asks first: Restyle my screen gives your screen that layout on the same URL.

Use another theme’s layout

Switching your Active theme restyles the text, panels and backdrop colours on your scene screens, but never swaps a screen’s layout. To give your screens another theme’s layout:

1. Open Overlays. Under Scene screens, press Use Capsule’s layout… (or the theme you want). There is a button for each theme that has a layout for a screen you hold.
2. Tick the screens to change. Each takes the theme’s layers and backdrop; its name, its URL and the theme it follows stay the same.
3. Press Use this layout. The change is in your draft; OBS still shows the old layout.
4. Press Publish, review the named changes and confirm Publish. When that theme is on your channel but not Active, Switch & publish also makes it Active in the same step. The review also lists other waiting draft parts; leave any part unticked to keep it for later.

Nothing in OBS needs changing: every screen keeps its URL, and an open Browser Source shows the new layout within a few seconds. History keeps the layout you had, so Restore to draft and Publish bring it back.

For example: you added Studio. Press Use Capsule’s layout…, leave only Be right back ticked, press Use this layout, then Publish. Your Be Right Back scene in OBS now shows Capsule’s layout, and your other three screens keep Studio’s.

If a scene screen looks wrong

• The Just Chatting scene shows no camera: the screen covers the whole canvas. Move your camera source above the Browser Source in OBS’s Sources list.
• A scene screen looks cut off or small: set the Browser Source to 1920 × 1080 and your OBS canvas to 1920 × 1080.
• A new theme changed a screen’s colours but not its layout: adding and switching themes never change a layout. Use Use Capsule’s layout… (or the theme you want) under Scene screens, then Publish.
• There is no Scene screens section on Overlays: you have no scene screen yet. Add a theme that brings them, such as Studio, first.
• The copy icon (Copy URL) is greyed out: the page is still loading your screens. Wait a moment, or reload the page.
• The layout changed in the Studio but not in OBS: it is waiting in your draft. Press Publish, review the named changes and confirm Publish.

Import the scenes into OBS

Instead of adding four Browser Sources by hand, you can download your scene screens as an OBS scene collection and import it.

1. Open Overlays. Under Scene screens, press Download OBS scenes. Your browser saves bloopbot-scenes.json.
2. In OBS, open Scene Collection → Import, choose that file and press Import.
3. Open Scene Collection again and pick Bloopbot scenes. OBS adds it as a new collection and does not switch to it by itself.

The collection holds four scenes, Starting Soon, Be Right Back, Stream Ending and Just Chatting, each with one Browser Source at 1920 × 1080 showing that scene screen. It is made for a 1920 × 1080 canvas. Add your camera to Just Chatting yourself, above its Browser Source, and your microphone and other sources as you like. The file follows the scene collection format of OBS Studio 30 to 32, and was built against what OBS Studio 32.2 imports.

The file contains your private widget links — don’t share it. Anyone who has it can open your scene screens. If you make a new URL for one of them, the old file stops working for that screen: download it again.

Already have a scene collection you want to keep? Importing always makes a new one, so use the copy-URL checklist instead and paste each URL into your existing scenes.

4. Switch the Active theme

1. Open the theme you want in the Theme tab.
2. Select the check icon (Make Active) to switch in your draft, then look over your overlays and press Publish.
3. Or press Switch & publish to change Active and open the publish review. Review the waiting parts and their impact before confirming Publish.

Every overlay that follows the Active theme restyles in OBS at once. The previous theme is kept, so switching back is the same two steps. Scene screens restyle too, but keep their layout and backdrop; Use another theme’s layout changes those.

5. Pin one overlay to a theme

With two or more themes, one overlay can keep its own theme while the rest follow the Active one — a starting soon screen in a calmer look, for example.

1. Click an empty part of the canvas so nothing is selected.
2. In Overlay settings · Local, open This overlay uses and change its selection from Active theme to the theme you want. It is shown as (pinned).
3. Press Publish, review the theme assignment and confirm Publish. Switching the Active theme later leaves this overlay alone.

You can also pin from the Theme tab: open the theme and select the pin icon (Pin to this overlay), or the crossed-out pin icon (Unpin: follow Active) to undo it. Deleting a theme an overlay is pinned to moves that overlay back to the Active theme.

6. Give one layer its own values

A layer draws with its overlay’s theme, field by field, and can change any field for itself.

1. Select the layer and open Layer appearance · Local in the right panel. It says which theme it follows, for example Follows My theme. Open Colours & panel for the accent colour.
2. Change a field — the accent colour, say. That field now belongs to this layer: Reset to theme appears under it, a dot marks its group, and every other field keeps following the theme.
3. Press Reset to theme under a field to hand it back, or the reset icon (Reset all to theme) in Layer appearance · Local for every field at once.

Because a layer keeps only the fields you changed, a later change to the theme still reaches every field that layer did not change.

7. Put a background behind panels, chat lines and cards

A theme holds three backgrounds, under Appearance → Background & spacing. Each one can be None, a Colour, a Gradient or an Image from your media library, with its own Opacity and Blur:

• Panel background goes behind every layer’s panel: a label’s card, a goal bar, a chat box, Now playing and a giveaway.
• Chat line and event row background goes behind each chat line and each poll, prediction or hype train card — the “bubble” look.
• Alert card background goes behind every alert card.

1. With the theme open (step 2), open Background & spacing under Appearance.
2. Pick a type. A Gradient starts with two colour stops: set its Shape (Linear or Radial), its Angle, and each stop’s colour, Position and Opacity; Add a stop takes it up to four. For an Image, press Choose picture to preview an existing picture or Upload to add one here. Then set its Fit (Cover, Contain, Stretch or Tile) and Position.
3. Press Publish, review the named changes and confirm Publish. Every overlay using the theme picks the background up.

A background is drawn over the panel colour, so at part Opacity it tints the panel. Set Panel opacity to 0 to see the background alone. On a single layer, open Layer appearance · Local → Background & spacing for the same three fields, each with Reset to theme; a layer can switch a theme’s background off for itself by choosing None. Only the backgrounds its type draws are shown — a chat box has a panel and chat lines, an alert layer has cards.

A theme’s backgrounds are never videos: a theme is on every overlay that uses it, so a video there would play behind every panel of every overlay. A looping video goes on one overlay, or on one layer’s panel — Arrange your overlay shows how.

7a. Put a frame around panels, chat lines and cards

A frame is a picture drawn as a border: an ornate gold edge, a neon outline, a torn-paper edge. It goes round the same three places as a background, and each has its own control under Appearance → Background & spacing:

• Panel frame, just under Border width and Border colour, goes round the panel of each layer that draws one: a Label, Chat, Countdown, Goal bar, Leaderboard, Now playing and the other panel layers. It also goes round a Poll card, the End credits panel, an Image layer’s picture, and a Box or Circle shape. A Divider takes no frame, and neither does a Minigames layer, so a theme’s frame leaves them as they are.
• Chat line and event row frame, under it, goes round each chat line, in every chat layout (Bubbles, Lines or Compact), and each poll, prediction, hype train or ad break card in an event stack.
• Alert card frame, with the backgrounds, goes round every alert card.

A frame picture is cut into nine pieces: the four corners are drawn as they are, and the sides stretch or tile to fit, so one picture fits a box of any size. Use a PNG or WebP with a see-through middle, so the panel’s own colour and background still show inside the frame. A PNG, JPEG, GIF or WebP works; SVG pictures, videos and sounds are not accepted. Choose and upload media says which pictures suit a frame.

1. With the theme open (step 2), open Background & spacing under Appearance.
2. Under the frame you want, press Image. Press Choose picture to pick a picture you already have, or Upload to add one. The picker lists images only. None takes the frame away again.
3. Set Corner size to the size of your picture’s corners, in pixels. A picture with 32-pixel corners takes 32. Left blank, each side is cut a third of the way in. Press Edit each side to give the top, right, bottom and left their own sizes, and Link the sides to bring them together again.
4. Set Frame width, how thick the frame is drawn, from 0 to 64 pixels. It starts at 16. Set it to the corner size and the corners are drawn at the size you made them; smaller draws them smaller. Frame outset, from 0 to 64, moves the frame outwards past the edge of the box, so it does not cover what is inside.
5. Under Sides, choose how the sides fill their length: Stretch, Tile, Tile, fitted (scaled so a whole number of tiles fit) or Tile, spaced (small gaps instead of scaling). Tick Draw the middle of the picture only when the middle of your picture is meant to cover the panel; left off, the middle stays empty.
6. Look at the small preview under the controls, and at the canvas, which draws the frame on your overlay as you type. Then press Publish. Every overlay using the theme wears the frame in OBS within a few seconds.

While a frame is on, its Frame width takes the place of Border width for that box, including a Border you set on the box’s part under Parts; a part with a frame of its own keeps its own width. If the picture cannot be loaded, the box is drawn with its plain border again.

The same picture can go in all three places, or each can have its own. The small theme samples in the Theme tab wear the theme’s panel frame, so you can tell themes apart at a glance.

A frame belongs to a theme like a colour does. On a single layer, open Layer appearance · Local → Background & spacing for the same frames, each with Reset to theme; a layer can switch a theme’s frame off for itself by choosing None (Arrange your overlay shows how). Only the frames a layer’s type draws are shown: a chat box has a panel and chat lines, an alert layer has cards, a Poll, End credits, Image or Shape layer has a panel frame only, and a Minigames layer has none. A part that draws a box, such as a chat line or an alert card, also takes a Frame of its own under Box in Parts (Style one part at a time).

8. Style one part at a time

Every kind of layer is made of named parts: a chat box has a Name, a Message, Badges and each Line; an alert has its Card, Picture, Title, Subtitle and Viewer message; a goal bar has its Label, Track, Fill and Readout. Parts styles each one on its own, with no CSS.

1. Select a layer and open Parts · Layer. Each row summarises its style.
2. Point at a row: that part is outlined on the canvas, so you can see which piece it is.
3. Click the row to open it. Part · Title, for example, names the selected part. Back to parts returns to the list.
4. Under Type, press Font to pick from every Google Font. Type to search, or filter by Sans, Serif, Display, Handwriting or Mono; each name is shown in its own font. Then set Size, Weight, Letter case, Letter spacing and Line height. An empty box reads Auto and keeps the part’s usual look.
5. Under Colour, choose Solid for one colour or Gradient for a colour run across the letters, set the same way as a background gradient.
6. Under Text effects, pick a preset: None, Soft, Hard, Neon or Outline 2px. Each tile shows its effect. Open Adjust to set a Shadow, an Outline or a Glow by hand.
7. Parts that draw a box — a chat line, an alert card, a goal bar’s track and fill — also take a Fill (solid or gradient), a Border, Corners and a Frame (Put a frame around panels, chat lines and cards), and every part has Spacing folded underneath. Open Box and find Frame, below Border colour: press Image and choose a picture, and it is drawn round that one box instead of the theme’s frame. On a layer, a box with no frame of its own says Uses the theme’s frame while the theme has one for it. To switch that frame off for the box, press None: the layer keeps a None of its own, the frame goes completely, no picture and no thick edge are left, and the box goes back to its plain border. Reset to theme hands the theme’s frame back. When you edit the theme’s own parts in Theme · Shared, the box says the same while the theme has a frame for it. None then keeps that one box free of the theme’s frame in every overlay using the theme, Image gives it a frame of its own, and Use the theme’s frame takes either choice back.
8. Press Publish, review the named changes and confirm Publish.

Each field names its source: Local override, From My theme, or Widget default when the theme has no value for it. In the shared theme editor, a theme’s own part value says Defined in My theme. Selecting a part outlines it on a matching layer in the canvas; if the theme has no matching layer here, Studio says so. On a layer, a part style belongs to that layer, field by field, just like its other fields: a dot and Reset to theme mark each field it changed, the reset icon under the part (Reset this part to theme) hands the whole part back, and the header counts the changed part fields with the rest. To style a part for every overlay using the theme, open the shared theme editor and Parts: choose the kind under Style the parts of, then open a part as above.

9. Highlight the name in an alert

Parts that show a $(name) or another $(…) value — an alert’s Title and Subtitle, a label’s Text, a goal bar’s Label — can draw each value in a style of its own, the way a viewer’s name stands out in an alert.

1. Open the Highlighted values part and give it a colour, a font or an effect.
2. An alert’s Title and Subtitle highlight their values straight away: Highlight values is on for them. On a label or a goal bar, open the part and turn Highlight values on.
3. Test the alert, or publish. The viewer’s name now draws in the highlight style and the rest of the title keeps its own.

Custom CSS still has the last word: a rule in Overlay CSS for the same part — .w-chat-name { color: #ff6ad5; }, say — wins over a part style, just as it wins over the rest of the theme (Arrange your overlay).

10. Make chat lines, rows and media move

A theme also decides how things come and go: chat lines, the rows of an event list, and files a Play media flow shows. Until you choose, each keeps its usual motion — a chat line slides up, an event row slides down, media fades.

1. Open the theme entry under Layers, then Motion in the Theme · Shared editor.
2. Under Chat lines, Event list rows or Media, pick a tile for Coming in and one for Going out. Point at a tile to watch it play first. The first tile, for example Slide up, is the usual motion.
3. Set Direction, Duration and Easing underneath, as for an alert.
4. Under Idle motion, pick Float, Pulse, Shimmer or Breathe glow to keep every layer gently moving while it’s on screen, and a Speed — Slow unless you change it.
5. Press Publish, review the named changes and confirm Publish.

A layer can change any of these for itself: select it and open Motion · Layer. An alert’s Idle and letters is there; its card entrance, exit and timing stay under Layout & timing · Shared design. A dot and Reset to theme mark each one it changed, as for its other fields. A chat box warns when its lines come in and go out for longer than its Message lifetime lets them stay.

A media file’s way in and way out share its time on screen: when the two are longer than the file is shown, both play faster so the file is still gone on time.

11. Make letters move

Most text parts can move letter by letter. Open a part under Parts and pick under Letters: Wave, Wiggle, Bounce, Pulse, Tada, Rubber band and Jelly loop while the text is shown; Typewriter types it in once. On the Highlighted values part it moves just the $(…) values — the viewer’s name in an alert — and a layer’s Motion section offers that one directly. A chat box’s Name can; its Line and Message can’t, since a busy chat would be hundreds of moving letters — style those with a line entrance instead. Letters stay still in text written in right-to-left or joined scripts, such as Arabic or Hebrew, so it always reads correctly, and in any part longer than 200 letters. Screen readers still read the whole text.

A computer set to reduce motion sees fades instead of movement, still letters and no idle motion. OBS never asks for reduced motion, so your stream shows what you chose.

How many themes you can keep

How many themes your channel can keep depends on your plan: 1 on Free, 5 on Free+, 15 on Plus, and on Pro as many as you like. Your themes together can take up to 8 MB, room for thousands of ordinary themes. Every style control, every theme and every setting on this page works on every plan; only the number of themes differs. What your plan includes lists yours as Widget themes under Limits. The Theme tab says how many you have, for example 1 of 1 theme on your plan, and the Marketplace review explains what happens when you add a theme at your limit.

A theme you delete in the Theme tab still counts until you publish: delete it and publish, and its place is free for a theme you add, which then joins the others instead of swapping one out.

At your limit, adding a theme from Marketplace still works: it swaps in.

1. Choose Add a theme → Browse marketplace in the Theme tab, then open the theme you want. Its review says how many themes your plan holds, for example Your plan holds 1 theme, and that the new theme takes your Active theme’s place in your draft, with the old one kept in History.
2. Press Add. The new theme is Active in your draft, and nothing on stream changes yet.
3. Look your overlays over, then press Publish.

When what you add brings flows as well as a theme, such as a full pack, the review asks instead: Swap themes is chosen, and Add without the look adds everything except the theme.

At your limit the Theme tab offers no Duplicate: a copy would have nowhere to go. Delete a theme you no longer use and publish, or swap one in from Marketplace.

Adding a theme from the Marketplace at your limit swaps it into your draft the same way (Add a theme from the Marketplace).

Swapping is restorable. History in the top bar lists the version you published before the swap; Restore to draft puts its themes back, and publishing restores the old look. A restore keeps any theme you added since that version while your plan has room for it — under a new name, such as Capsule 2, if the version has a theme with the same name — so delete one yourself in the Theme tab if you don’t want it.

A worked example

A cosy daytime look and a high-contrast look for competitive nights, on a Plus channel:

1. Choose Add, search for Scoreboard, press Add on its row, then Add in its review. In the Theme tab, open Scoreboard, select the pencil icon (Rename) and call it Ranked nights.
2. With Ranked nights open, set the accent to your team colour under Appearance.
3. Press Publish, review the named changes and confirm Publish. A new theme is not Active, so My theme stays marked Active and your usual look stays on stream; Ranked nights is saved for later.
4. On a ranked night, open Ranked nights and press Switch & publish, then review and confirm Publish. Every overlay that follows the Active theme — your gameplay overlay, your alerts, your chat box — changes in OBS at once.
5. Your starting soon overlay is pinned to My theme, so it keeps the cosy look either way.

What you should see

• The Theme tab listing every theme, the Active one first and marked Active, and the overlay’s own theme marked This overlay.
• The canvas previewing a theme as soon as you open it, before anything is published.
• After confirming Switch & publish, every overlay that follows the Active theme changing in OBS within a few seconds, with no change to its Browser Source — and pinned overlays staying as they were.
• A changed layer field showing a dot and Reset to theme, and every other field of that layer following the theme.
• A theme’s chat line background behind every chat line and event card on the overlays that use it, once published.
• A theme’s frame picture drawn round each panel, chat line or alert card you gave one, with its corners as drawn and its sides stretched or tiled, on the canvas as you edit and in OBS once published.
• This overlay uses always available in Overlay settings · Local, including when your channel has one theme.
• A part you style — a chat name in a Google Font, an alert title with an outline — looking the same on the canvas and, once published, in OBS, with every other part as it was.
• An alert’s viewer name drawn in the Highlighted values style once that part has a style.
• Chat lines, event rows and media coming and going with the theme’s motion once published, and a layer with idle motion gently moving in OBS.

If something looks wrong

• A theme change shows on the canvas but not in OBS: theme edits wait in your draft like any edit. Press Publish, review the named changes and confirm Publish.
• A theme you add takes your Active theme’s place instead of joining it: your channel is at its plan’s theme limit, so it swaps into your draft. Publish to keep it. To keep both, delete a theme you no longer use in the Theme tab and publish first, then add.
• The editor says Your add changed the draft: a theme or overlay you added changed your draft while the editor also held changes of its own. Load theirs shows the draft with what you added; Keep mine saves your other changes on top of it, and keeps what you added.
• The duplicate icon (Duplicate) is missing from a theme’s buttons: your channel is at its theme limit, so a copy would have nowhere to go.
• The bin icon (Delete) is greyed out: that theme is Active. Make another theme Active first.
• One layer ignores a theme change: it overrides that field. Select it and press Reset to theme beside the field, or the reset icon (Reset all to theme).
• One overlay ignores the Active theme: it is pinned. Open Overlay settings · Local → This overlay uses and choose Active theme.
• Your custom CSS stops a theme colour showing: the overlay’s Overlay CSS is drawn after the theme and wins. Remove the rule from Overlay CSS, or move it into Theme CSS.
• The chip reads Not saved — fix the highlighted fields after editing a theme: a value was refused, and the message sits beside the field. Fix it and the draft saves again.
• Video is greyed out in a theme’s backgrounds: a theme takes colours, gradients and images only. Put the video on the overlay itself or on one layer’s panel.
• A frame shows on the canvas but not in OBS: it is waiting in your draft. Press Publish, review the named changes and confirm Publish.
• A frame does not show at all: check that Image is chosen and a picture is picked, that Frame width is not 0, and that the picture is not marked Missing file (it was deleted from your media library; pick it again). A layer can also switch the theme’s frame off for itself with None: select it and press Reset to theme under the frame. The Layer appearance · Local section only lists the frames a layer’s type draws, so a layer without a chat line frame shows no such control.
• Every logo or picture on your overlays suddenly wears the frame: an Image layer takes the theme’s Panel frame like any panel. Select the layer and press None under Panel frame to keep that one plain.
• A frame round a Circle is square: a frame picture is drawn round the layer’s box and does not bend with rounded corners. Use a Box with its own Border instead, or press None on the circle.
• The frame’s corners look squashed or stretched: Corner size does not match the corners in your picture. Set it to their size in pixels, and set Frame width near the same number so the corners are drawn at the size you made them. A blank Corner size cuts a third in, which suits a picture whose corners are about that big.
• The frame’s sides look blurry or badly repeated: try another choice under Sides. Stretch suits a plain edge; Tile, fitted or Tile, spaced suit a pattern.
• A frame is hidden by, or clashes with, a background: the background is drawn under the frame and shows through its see-through parts and its middle. Set the background to None or a plain colour, lower its Opacity, or use a frame picture whose see-through parts are meant to show it. If the middle of your frame covers the panel, untick Draw the middle of the picture.
• A frame picture is refused, or the picker does not list it: a frame needs a PNG, JPEG, GIF or WebP picture. SVG pictures, videos and sounds are not accepted, and the picker lists images only. Save the art as a PNG or WebP with a see-through middle and upload it again.
• A background image shows as nothing: the file was deleted from your media library, or is still uploading. Pick it again under the background’s Image.
• A background hides the panel colour you chose: the background is drawn over it. Lower the background’s Opacity, or set it to None.
• A part style shows on the canvas but a rule in Overlay CSS undoes it: custom CSS is drawn last and wins. Take the rule out, or make the change in Parts instead.
• Highlighted values look like the rest of the title: the Highlighted values part has no style yet, or the part’s Highlight values switch is off. Give the part a colour, and check the switch.
• A Google Font shows as a plain font in OBS: the OBS computer could not reach Google Fonts. The part draws in its Fallback font until it can.
• A part’s font is refused with Use at most 8 Google Fonts: a theme’s parts can use up to 8 different Google Fonts, and so can the layers of one overlay. The editor counts them under Font as you get close. Pick a font another part already uses, or clear one.
• Letters with an effect look spaced out or break oddly: each letter is drawn on its own, so very tight Letter spacing can crowd them. Loosen it a little, or choose None under Letters.
• Letters on gradient text lose their colour while they move: a gradient is painted across the whole part and does not follow each moving letter. Use a solid colour on a part whose letters move.
• Motion shows in the editor but not on the preview in your browser: your computer is set to reduce motion, so you see fades. OBS shows the motion.
• Gradient text cannot share a part with a fill: gradient text is painted where a fill would go. Remove the fill, or style the part around it — a chat Line holds the Name, for example.