A CSS stylesheet switcher for Guided LPs

Sanford Whiteman -

Sorta surprised no one else has come up with this yet (that I know of). Here's a quick way to let your users switch between 2 stylesheets:

<meta class="mktoBoolean" mktoName="CSS Theme" id="cssTheme" default="true"
  true_value_name="Dark" true_value="" 
  false_value_name="Light" false_value="stylesheet">
<link rel="stylesheet${cssTheme}" title="Dark Styles" 
  href="https://example.com/css/dark.css">
<link rel="${cssTheme}" title="Light Styles" 
  href="https://example.com/css/light.css">

Check it out!

How it works

This is a textbook Marketo hack: head-shakingly tricky, should be unnecessary, but it's trustworthy.

It works because because browsers identify a CSS stylesheet as a <link> element whose rel attribute either

  • is the single string "stylesheet"
  • is a space-separated list of strings, one of which is exactly "stylesheet"

In other words, if you mess with the rel you can turn a <link> into a generic HTML element that is just sitting there in the page (it's not fetched as a stylesheet).

So when cssTheme is true, you get this HTML:

And when cssTheme is false, you get this:

("stylesheetstylesheet" ain't the same as "stylesheet"!)

Beyond 2 themes

If you have more than 2 stylesheets, you have use multiple mktoBoolean vars and slightly adjust the method. The 'sheets aren't forced to be mutually exclusive this way (though that can be a good thing, depending on what you're trying to do):

<meta class="mktoBoolean" mktoName="Red Styles" id="stylesheetEnableRed" 
  true_value="" false_value="alternate" default="false">
<meta class="mktoBoolean" mktoName="Green Styles" id="stylesheetEnableGreen" 
  true_value="" false_value="alternate" default="false">
<meta class="mktoBoolean" mktoName="Blue Styles" id="stylesheetEnableBlue" 
  true_value="" false_value="alternate" default="false">
<link rel="${stylesheetEnableRed} stylesheet" title="Red Styles" 
  href="https://example.com/css/red.css">
<link rel="${stylesheetEnableGreen} stylesheet" title="Green Styles" 
  href="https://example.com/css/green.css">
<link rel="${stylesheetEnableBlue} stylesheet" title="Blue Styles" 
  href="https://example.com/css/blue.css">