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">