Add a dark mode to Marketo Designer

Andrew_Cook · ‎07-09-2019

One of my biggest issues when it comes to coding landing pages/ emails is the white screen that plagues the Marketo Designer. It would be really cool to add the option to switch on "dark mode" to make coding easier as the black screen helps with coloring and finding/fixing errors.

I'm not entirely sure if this already is a feature - but I haven't been able to find it and I think it would be an awesome asset to add for people who tend to code a lot and don't have the resources outside of Marketo.

What do you guys think?

Casey_Grimes · ‎07-09-2019

Given that I don't know how viable this is in terms of product roadmap, your best bet on this one might be to make a Tampermonkey script or Stylus declarations that inserts some overriding CSS for a dark mode (and hey, maybe even share it so it can be collaborated on).

Dave_Roberts · ‎07-11-2019

It's really crude, but you could open the Inspector console in Chrome and use the [+] icon in the top right of the elements panel to create a new "inspector stylesheet" in your session. This'll create a new rule on the top line of the right panel body#ext4-ext-gen1026 and there will be a link to the inspector-stylesheet:1. Click on the highlighted link to the stylesheet and it'll jump you to the "Sources" tab (shown in the bottom screenshot) where this new rule will show up written as CSS. You can delete that new rule and copy/paste the CSS there to change the background black and remove the grey shadow from behind the text so it's more crisp and easier to read.

Here's the code you'd want to use to create the look below (dark mode)

.CodeMirror-sizer {
 background-color: #000000;
}
.CodeMirror-sizer * {
 text-shadow:none !important;
}‍‍‍‍‍‍

This makes the background color black and removes the text-shadow from all elements inside that container.

You could take this a step further and re-color the individual elements (teal, pink, greens...) using a similar approach. You'd want to inspect those elements and get the class and colors that create the existing color scheme and then override them in the inspector stylesheet with new colors.

Here's an example that'll change the teal text into red text:

.cm-s-solarized .cm-attribute{ color:#ff0000; }‍

The downside is that when you refresh the screen, you'd need to go back into the console to and re-apply this. It could be written into a script that deployed these styles, but you'd still need to copy/paste that script into the console and execute it to add a new <style> tag to the <head> containing all the different color variations you'd like to replace. Maybe one-step quicker than doing it via CSS, but still something you'd need to apply everytime you refreshed the window.

Andrew_Cook · ‎07-11-2019

Thank you so much, Dave! You gave me some fantastic instructions! I'll be using this trick from now on.

kh-lschutte · ‎02-04-2020