All embeds have a theme, which controls the style of the CodePen header, tabs, and other style details on your embed. Embedded Pens have a default theme. We also have two built-in themes anyone can use: Light and Dark. Every CodePen member also gets a customizable, personal default theme. PRO members can create unlimited embed themes, and have access to a few extra-special theme customization options.
When you change one of your embed themes, all of the Pens that use that theme will be updated at the same time. For example, if you redesign your website, you can update your CodePen embed theme to match it. All of your embedded Pens will update with your new theme immediately.
Example
Default Theme
The default theme (data-theme-id="0") is based around various CodePen grays.
Built-In Themes
Light
Dark
Theme Builder
You can get to the Embed Theme Builder from your user menu in the header.
The Embed Theme Builder can be used to create new themes (and edit existing themes) which customize the look and feel of your Embedded Pens. All controls are on the left, ranging from animations, to colors, to border appearances.
Remember, changes to your embed themes will apply directly to all the Pens that use the theme, including any Pens you embedded before changing the theme. This is by design — if you update the design of your website, you can update the design of theme to match it.
PRO Themes
PRO users can:
- Created an unlimited number of Embed Themes.
- Customize the tab bar’s visibility (i.e. hiding it entirely)
- Apply custom CSS to the embed
With the custom CSS, any styling is possible. We’ve seen radical changes to the design and layout of embeds with this feature.
Override Embed Code HTML Attributes
You’ll notice in the HTML embed code, there are data-* attributes (e.g. data-theme-id="178"). These attributes control which Pen is embedded and how it looks and behaves. These attributes have the power to override anything set in the theme itself, much like how inline styles override styles set in CSS. Here’s a list of all the available attribute overrides:
| Attribute | Example Value | Default | Notes |
|---|---|---|---|
| data-theme-id | 319 | 0 | May also be “light” or “dark” |
| data-slug-hash | gfdDu | n/a | Required |
| data-user | chriscoyier | n/a | Not required |
| data-default-tab | html | result | html/css/js/result |
| data-height | 250 | 300 | Not a part of themes, also takes “100%” if you want your iframe to expand to its container. |
| data-animations | run | run | run/stop-after-5 |
| data-border | none | none | none/thin/thick |
| data-border-color | #000000 | #000000 | Hex Color Code |
| data-tab-bar-color | #3d3d3e | #3d3d3e | Hex Color Code |
| data-tab-link-color | #76daff | #76daff | Hex Color Code |
| data-active-tab-color | #cccccc | #cccccc | Hex Color Code |
| data-active-link-color | #000000 | #000000 | Hex Color Code |
| data-link-logo-color | #ffffff | #ffffff | Hex Color Code |
| data-class | my-special-class | Added to <iframe> of embed | |
| data-custom-css-url | http://cpdn.io/url.css | ||
| data-preview | true | none | |
| data-zoom | 0.5 | 1 | Can be 1, 0.5, or 0.25 |