Theme runkit embed


#1

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?


#2

Looking for this also! :grinning:


#3

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


#4

Great @pieter! Looking forward to it!


#5

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


#6

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.