Unlimited Embed Themes

What are Embed Themes?

CodePen allows you to embed the Pens you create here on other websites. These are called Embedded Pens. It can be as simple as copy-and-pasting a bit of code into the HTML of that other site! You get access to this code from the Embed Builder.

In the Embed Builder, you are able to customize the colors and overall look of an Embedded Pen. You do this through themes.

Do Pens have to have a theme?

All Embedded Pens have a theme, even if you don’t explicitly choose one. In that case it will be the default theme, but with custom themes you can match the look to your site.

How many themes do I get?

Everyone starts with our two built-in themes, Light and Dark. PRO users can create unlimited embed themes!

What kinds of design aspects can I control with a theme?

Literally anything. Through the Embed Builder, there are controls for customizing colors, borders, and what to show/hide. This makes it very easy to get started customizing the most common things you’ll need to style in a theme.

As a PRO member, you can also hide the tab bar at the top of the embed or add a Custom CSS file. This means you have total design control over the look of your themes. The only thing you don’t have direct access to is the HTML of the Embedded Pen itself, but all the class names / style hooks you need are there.

Can I see some examples?

Sure, here’s an embedded Pen that was designed to look good right here on the CodePen blog:

See the Pen CodePen Logo as Inline SVG by CodePen (@codepen) on CodePen.

And here’s one built to match the design at CSS-Tricks:

See the Pen CodePen Logo as Inline SVG by CodePen (@codepen) on CodePen.

And here are the default dark and light themes:

See the Pen CodePen Logo as Inline SVG by Chris Coyier (@chriscoyier) on CodePen

What happens to my custom themes if I downgrade my subscription?

Your custom embed themes will be unavailable. Any Pens using those themes will revert to the default theme. If you renew your subscription, the themes will be reactivated.

Was this article helpful?

YesNo