Drafts Action Directory

Dark-Light Preview (with custom css)

Posted by homme, Last update 12 months ago

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>
    

Options

  • After Success Nothing
    Notification Error
    Log Level Error

Comments

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