Contributing a Theme

This guide walks you through some of the tips and tricks necessary to create a showmy.chat theme. It assumes you've already set up the project locally. If you haven't, follow the Getting Started guide first!

A showmy.chat theme is a stylesheet — currently, theme authors have no control over the markup or scripts. This may change later, but until then, the only way to influence how the chat overlay appears is through CSS.

Chat Markup

Below is an example of the markup that might be rendered for a given chat:

<ul data-twitch-chat="Lana_Lux">
    <li
        data-twitch-message="f8daad98-195a-47c6-bde9-2af4c32c3ac0"
        data-twitch-sender="someanticsdev"
        data-twitch-sender-roles="broadcaster"
        data-twitch-sender-color="#4C1074"
        style="--twitch-sender-color: #4C1074"
    >
        <div class="twitch-chat-sender">
            SomeAnticsDev
        </div>
        <div class="twitch-chat-message">
            <mark data-twitch-mentioned-user="bendmyers">@BenDMyers</mark> Thanks for coming! 
            <img alt=":)" data-twitch-emote=":)" src="http://static-cdn.jtvnw.net/emoticons/v1/1/3.0">
        </div>
    </li>

<li data-twitch-message="875245a3-67a0-466b-8392-482d40f5805a" data-twitch-sender="serotta_cyclist" data-twitch-sender-roles="subscriber vip" data-twitch-sender-color="#B22222" style="--twitch-sender-color: #B22222"><div class="twitch-chat-sender">serotta_cyclist</div><div class="twitch-chat-message">LERP VS Dotween??</div></li><li data-twitch-message="45ce5a60-a233-428e-8e30-8102aeffbed6" data-twitch-sender="pennant235" data-twitch-sender-roles="subscriber" data-twitch-sender-color="#1E90FF" style="--twitch-sender-color: #1E90FF"><div class="twitch-chat-sender">pennant235</div><div class="twitch-chat-message">look at the pill people go</div></li><li data-twitch-message="7261ade3-323c-42c4-abae-7b428fb37df6" data-twitch-sender="thatmanrobin" data-twitch-sender-roles="subscriber"><div class="twitch-chat-sender">thatmanrobin</div><div class="twitch-chat-message"><mark data-twitch-mentioned-user="Geo3D">@Geo3D</mark> yeah it's difficulty <img alt=":/" data-twitch-emote=":/" src="http://static-cdn.jtvnw.net/emoticons/v1/555555585/3.0"> Still trying though</div></li><li data-twitch-message="bd7590d3-51b9-4a5b-be05-9180eca4eaa0" data-twitch-sender="Danoli3" data-twitch-sender-color="#8A2BE2" style="--twitch-sender-color: #8A2BE2"><div class="twitch-chat-sender">Danoli3</div><div class="twitch-chat-message">cool ideas</div></li><li data-twitch-message="9a158693-49d4-48ca-a908-feb15e0f06e7" data-twitch-sender="Protutybe" data-twitch-sender-roles="subscriber"><div class="twitch-chat-sender">Protutybe</div><div class="twitch-chat-message">this rocket is so cute</div></li><li data-twitch-message="ae64336f-66b0-4dd6-bbdd-20df2fec6b9e" data-twitch-sender="creativesteve619" data-twitch-sender-roles="subscriber" data-twitch-sender-color="#FF69B4" style="--twitch-sender-color: #FF69B4"><div class="twitch-chat-sender">creativesteve619</div><div class="twitch-chat-message">Jammies</div></li><li data-twitch-message="7a682d0c-b4c6-478b-8edb-70af6f7a704a" data-twitch-sender="thatmanrobin" data-twitch-sender-roles="subscriber"><div class="twitch-chat-sender">thatmanrobin</div><div class="twitch-chat-message"><mark data-twitch-mentioned-user="serotta_cyclist">@serotta_cyclist</mark> <img alt="lanaluHi2" data-twitch-emote="lanaluHi2" src="http://static-cdn.jtvnw.net/emoticons/v1/300223252/3.0"> <img alt="lanaluHi2" data-twitch-emote="lanaluHi2" src="http://static-cdn.jtvnw.net/emoticons/v1/300223252/3.0"> Yes possibly switch to jam sadly</div></li><li data-twitch-message="6ab8851c-18fc-4ff8-9477-0980424e3409" data-twitch-sender="thatmanrobin" data-twitch-sender-roles="subscriber"><div class="twitch-chat-sender">thatmanrobin</div><div class="twitch-chat-message"><mark data-twitch-mentioned-user="serotta_cyclist">@serotta_cyclist</mark> running out of time heh</div></li><li data-twitch-message="475ef380-6891-4136-ab91-fc8141c56d68" data-twitch-sender="Ori_ConceptArts" data-twitch-sender-roles="subscriber" data-twitch-sender-color="#1E90FF" style="--twitch-sender-color: #1E90FF"><div class="twitch-chat-sender">Ori_ConceptArts</div><div class="twitch-chat-message"><mark data-twitch-mentioned-user="serotta_cyclist">@serotta_cyclist</mark> DoTween much better</div></li><li data-twitch-message="2276c052-72f1-46cb-a890-9a81e4d59087" data-twitch-sender="serotta_cyclist" data-twitch-sender-roles="subscriber vip" data-twitch-sender-color="#B22222" style="--twitch-sender-color: #B22222"><div class="twitch-chat-sender">serotta_cyclist</div><div class="twitch-chat-message"><mark data-twitch-mentioned-user="thatmanrobin">@thatmanrobin</mark> I eXcited see result, another day i say go for it!! <img alt=":)" data-twitch-emote=":)" src="http://static-cdn.jtvnw.net/emoticons/v1/1/3.0"></div></li>
    <li
        data-twitch-message="bb5282a6-c3b7-4b82-b2cb-15db80a78783"
        data-twitch-sender="Geo3D"
        data-twitch-sender-roles="mod subscriber"
        data-twitch-sender-color="#FF7F50"
        style="--twitch-sender-color: #FF7F50"
    >
        <small data-twitch-message-reply="7261ade3-323c-42c4-abae-7b428fb37df6">
            Replying to @thatmanrobin: @Geo3D yeah it's difficulty :/ Still trying though
        </small>
        <div class="twitch-chat-sender">
            Geo3D
        </div>
        <div class="twitch-chat-message">
            <mark data-twitch-mentioned-user="thatmanrobin">@thatmanrobin</mark> Same <img alt="HahaSweat" data-twitch-emote="HahaSweat" src="http://static-cdn.jtvnw.net/emoticons/v1/301108037/3.0">
        </div>
    </li>
</ul>