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. Each Embedded Pen has a theme.
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. There is nothing wrong with that! It’s just not as customized to your site as it could be.
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.
How many themes do I get?
Everyone starts with three themes: our two built-in themes, Light and Dark, and a customizable personal default theme. PRO users can create unlimited embed themes!
Can I see some examples?
Sure, here’s an embedded Pen that was designed to look good right here on the CodePen blog:
And here’s one built to match the design at CSS-Tricks:
And here are the default dark and light themes:
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.