Dark-Light Preview (with custom css)

Action

Posted by homme, Last update almost 6 years 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

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

Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.

After Success	Nothing
Notification	Error
Log Level	Error