# Panel Extension Guidelines

Designing a panel extension for the area below the Twitch video player

Source: https://dev.twitch.tv/docs/extensions/designing/panel-extension-guidelines/

A panel extension appears in the panel area below the video player. Panel Extensions remain active even when the channel is not live.

Follow these guidelines for Panels:

* **Online/offline** — Consider how panels work offline, as well as online. Panels can provide a continued reason for viewers to stay on a stream, even if the streamer is offline.
* **Uses beyond game content** — Since panels do not reside on video content, they do not have to be as tightly coupled to the streamer’s content as other types of Extensions. Panels are great for displaying high-level stats about the stream, gear a streamer uses, or other enjoyable content that has no relationship to the content they stream. Panels also can be treated like a mobile web app, housing a game or productivity app..
* **Layout** — Panel Extensions are limited to 318px wide x 496px high, to avoid iframe scrolling. Within these limits, try to allow 10px of inner padding for any text within your extension, for maximum readability.
* **Light vs. dark mode** — Twitch allows users to switch between the default light theme and a dark theme. Responding to this preference ensures your extension does not stand out in a channel UI when users change their preferences. Below are example palettes we use for Twitch to support light and dark mode. You can listen for a user switching between light and dark mode using the [onContext](https://dev.twitch.tv/docs/extensions/reference.md#oncontext)JavaScript helper function.<br><br>If you want to support light and dark mode, we recommend the following background colors:

  <table><tbody><tr><th>Attribute Name</th><th>Light Mode Background Color</th><th>Dark Mode Background Color</th></tr><tr><td>Background Color</td><td>White #fff</td><td>Twitch Dark Purple #201c2b</td></tr><tr><td>Background Color - Accent</td><td>Twitch Purple #6441A4</td><td>Twitch Purple #6441A4</td></tr></tbody></table>

  <br>Here are recommended text colors, when supporting light and dark mode:<br>

  <table><tbody><tr><th>Attribute Name</th><th>Light Mode Text Color</th><th>Dark Mode Text Color</th></tr><tr><td>Default Text</td><td>Twitch Dark Grey #232127</td><td>Twitch Light Grey #e5e3e8</td></tr><tr><td>Links</td><td>Twitch Purple #6441A4</td><td>Twitch Light Purple #e2dbf0</td></tr><tr><td>Text Overlays</td><td>Twitch Light Grey #e5e3e8</td><td>Twitch Light Grey #e5e3e8</td></tr></tbody></table>