# How to collapse code blocks and switch their theme in Confluence

> The Code blocks for Confluence template adds a language bar, a Collapse button and a Dark/Light theme to every code block, in your own browser.

Published 2026-09-28, updated 2026-09-28 · Confluence · https://skins.dev/blog/confluence-code-blocks/

Asked for since 18 April 2021: Atlassian's Confluence tracker (CONFCLOUD-72003), https://jira.atlassian.com/browse/CONFCLOUD-72003 (591 votes).

**Confluence Cloud's code block has no way to collapse it and no choice of background or colours. The Code blocks for Confluence template adds a bar to every code block on a page with its language, its line count, a Collapse button and a Dark/Light theme switch, in your own browser.**

## Steps

1. In Skins Studio, open **Explore**, pick **Code blocks for Confluence** and click **Create App**.
2. On a Confluence page, open the **Skins** side panel from the browser toolbar. The **Code blocks** skin is listed under **On this page**.
3. Switch it on. The page reloads with a bar above every code block.

<iframe class="demo-film" src="/how/template-film.html?t=confluence-code-blocks" title="Turning on the Code blocks for Confluence template" loading="lazy"></iframe>

## What you get

- A bar on every code block showing its language, guessed from the code (Shell, JSON…), and its line count.
- A Collapse/Expand button on each block.
- Blocks longer than 20 lines start collapsed.
- A Dark/Light theme switch with syntax colours for strings, flags and numbers.
- The theme you pick applies to every code block.

## Limits

- It changes how code blocks look in your browser, not the page itself. Readers who don't use the skin see the default block.
- The language is guessed from the code, not set by the page's author.
- Authors can't choose colours per block or highlight specific lines.
- It doesn't add a title field to code blocks.

## Other options

- **Marketplace code-block apps**: apps from the Atlassian Marketplace add their own code macros. An admin has to install them.
- **Expand around a long block**: put the code block inside Confluence's Expand element. It collapses the block for everyone who reads the page.
- **Atlassian's customer interviews**: on 2026-09-18 Atlassian's Confluence product team asked on the ticket for customer interviews about code-block themes and colours. No feature has been announced.
- **Ask Atlassian**: vote on the ticket. Its status is Gathering Interest.

Try Skins: https://skins.dev/ · Install: https://skins.dev/docs/install/