Drafts Action Directory

Dark-Light Preview (with custom css)

Posted by homme, Last updated: 2018-07-03 17:11:34 UTC

Markdown preview which builds some css styles based on current dark or light mode.

CSS Theme is inspired by Day One, Things 3 and Atom. You can modify it in script as you like.

Based on https://actions.getdrafts.com/a/1Ct

Install

Steps

  • script

    // create theme sensitive css for preview
    
    if (app.themeMode == 'dark') {
    	var css = "body { background: #191c20; color: #a9b0bd; } h1 { font-weight: bold; color: #5f739a;line-height:1.3;} h2 { font-weight: bold; color: #eacb92;} h3 { font-weight: bold; color: #2fb88c;} strong,b{color: #d19a66;} em,i{ color: #c678dd;} a {color: #0cbbea;text-decoration:none;} code,pre {font-size:14px;} pre { overflow: auto; width: auto; background-color: #242729; border: 1px solid #3c3c3c; border-radius: 3px; padding: 15px; color: #a9b0bd; }  pre code { overflow: auto; width: auto; background-color: #242729; color: #a9b0bd; border: none; padding: 0; white-space:pre-wrap; word-wrap:break-word; }  code { background-color: #242729; border: 1px solid #3c3c3c; border-radius: 3px; padding: 1px 2px 1px 2px; color: #a9b0bd; } td, th {padding: .5em;border: 1px solid #7b7e85;border-collapse:collapse;width: 90%;}thead {background: #3b3e43;} blockquote {color: #108293;font-style:italic;border-left: 4px solid #3e4451;padding:0 18px;} hr {border:none; border-bottom: 1px dotted #2b3037;}div.footnotes{font-size:14px}";
    
    draft.setTemplateTag("bodystyle", css);
    }
    else {
    	var css = "body { background: #fff; color: #777777; } h1 { color: #313131; font-weight: bold; line-height:1.3;} h2 { color: #ea4c89; font-weight: bold; } h3 { color: #0099cc; font-weight: bold; } strong,b {color: #d19a66;} em,i{ color: #c678dd;} a {color: #00a5d8;text-decoration:none;} code,pre {font-size:14px;} pre { overflow: auto; width: auto; background-color: #f2f9f7; border: 1px solid #d5ece4; border-radius: 3px; padding: 15px; color: #7f835d; }  pre code { overflow: auto; width: auto; background-color: #f2f9f7; color: #7f835d; border: none; padding: 0; white-space:pre-wrap; word-wrap:break-word; }  code { background-color: #f2f9f7; border: 1px solid #d5ece4; border-radius: 3px; padding: 1px 2px 1px 2px; color: #7f835d; } table {margin: 1em;border-collapse: collapse;width: 90%;}td, th {padding: .5em;border: 1px solid #d5ece4;}thead {background: #f6f6f7;} blockquote {color: #bcbdbf;font-style:italic;border-left: 4px solid #b6e5e1;padding:0 18px;} hr {border:none; border-bottom: 1px dotted #b6e5e1;}div.footnotes{font-size:14px}";
    	draft.setTemplateTag("bodystyle", css);
    }
  • htmlpreview

    <!DOCTYPE html>
    <html dir="auto">
    <head>
    <title>Preview</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    @charset "utf-8";
    
    html { 
    	font-size:97%;
    	font-family: "Avenir";
            line-height:1.6;
    }
    body {
    	margin:0;
    	padding:1em;
    }
    [[bodystyle]]
    
    img {
    	max-width: 100%;
    	height: auto;
    }
    
    @media (max-device-width: 480px) { 
    
    } 
    @media (min-device-width: 481px) { 
    	body {
    		margin:auto;
    		max-width:600px;
    	} 
    }
    
    </style>
    </head>
    <body>
      %%[[draft]]%%
    </body>
    </html>
    

Comments

Actions available in the Action Directory are uploaded by community members. Use appropriate caution reviewing downloaded actions before use.