Theme runkit embed

Hey,

I’d like to use embed on my personal website but I’d like to have the embed Runkit tool in my website’s colours and branding, how does one go about theming the Runkit tool?

4 Likes

Looking for this also! :grinning:

Hi @matimenich & @xavierakram,

I’m Pieter from the RunKit team. Great idea—we hear you and plan on adding support for themes and custom themes soon. I’ll update this thread when we have more to share!

Pieter

Great @pieter! Looking forward to it!

This and even more configurations are available already, but they are not documented. Using theme (string), styles (object) and gutterStyle (string) are some of those settings, although I haven’t figured out what themes are available apart from stripe-light and what keys the styles object supports apart from runButtonBackground

I reverse engineered (lul big deal with js) the settings, it appears to be these:

{controlsBackground:"rgba(247,247,247,1.0)",controlsBorderColor:"#e4e9ef",controlsColor:"#bbb",editedColor:"#326ba4",hoverColor:"#5e7ca1",logoColor:"#888",runButtonBackground:"#00c72b",runButtonBorderColor:"#11b53c",runButtonColor:"#fff",runButtonHoverBackground:"#00c72b",runButtonHoverBorderColor:"#11b53c",runButtonHoverColor:"#fff"}

You’ll need to stringify that object to

{"controlsBackground":"#070707","controlsBorderColor":"#424242","controlsColor":"#444","editedColor":"#01579b","hoverColor":"#1e88e5","logoColor":"#777","runButtonBackground":"#1B5E20","runButtonBorderColor":"#2e7d32","runButtonColor":"#81C784","runButtonHoverBackground":"#1B5E20","runButtonHoverBorderColor":"#2e7d32","runButtonHoverColor":"#81C784"}

and pass it urlencoded as styles to Runkit.create. Doesn’t affect codemirror theming tho.

Hello,

Looking to see if there is an update on custom theme support.

Any update on being able to apply a different style or theme?

Any update @pieter. I will appreciate if there is a way to change the background from white for usability. Thanks