DEVONthink is a very powerful document managment system. DEVONthink To Go is the mobile counterpart. The default theme for markdown and web is plain with just layout changes. However, we can customise this with custom CSS styles. I have customised the style based on my i-am-zen blog theme. Here is the theme file, i-am-zen.css.

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: normal;
    font-size: 16px;
    margin: 1em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0.5em 0 0.5em 0;
    font-weight: 550;
}
h1 {
    font-size: 24px;
}
h2 {
    font-size: 22px;
}
h3 {
    font-size: 20px;
}
h4 {
    font-size: 18px;
}
h5 {
    font-size: 16px;
}
h6 {
    font-size: 14px;
}
strong {
    font-weight: 600;
}
ol,
ul {
    margin-left: 2em;
    margin-bottom: 1em;
}
li {
    margin-top: 0.5em;
    line-height: 1.25;
}
p {
    margin: 0.75em 0;
}
blockquote {
    margin: 1em;
    padding-left: 0.75em;
}
table {
    border-collapse: collapse;
}
td, th {
    padding: 0.5em;
}
iframe {
  border: none;
}
pre,
code {    
    font-family: Menlo,"Andale Mono",Monaco,Consolas,"Courier New",Courier,monospace;
    font-size: 15px;
    margin-bottom: 1em;
}

/* theme */

body {
    background: #000813;
    color: #a2aaa0;
}
a {
    text-decoration: none;
    color: #328cde;
}
a:hover {
    color: #c4992a;
    text-decoration: underline;
}
a:visited {
    color: #347ab8;
}
hr {
    border: 1px dashed #0b3c55;
}
blockquote {
    border-left: 3px solid #194708;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #269470;
}
ul li::marker {
    color: #066a49;
}
td, th {
    border: 1px solid #1c454d;
}
::selection {
  color: #c4992a;
  background: #435e3a;
}

code,
:not(pre)>code[class*=language-] {
    font-size: 16px;
    color: #699;
    background-color: transparent;
    font-size: 15px;
}
code[class*=language-],
pre[class*=language-] {
    background-color: #001317;
    color: #acb5ab;
    font-size: 14px;
    line-height: 1.5;
}

Configuring custom markdown theme in DEVONthink 3

Under Settings > Files > Markdown > Style Sheet, specify the location of the custom CSS style.

With this, the theme will render like below.

Configuring custom markdown theme in DEVONthink To Go 3

Open Settings from the DTTG 3 app and scoll down to DOCUMENTS section, open Markdown Settings and paste the custom CSS theme.

With this, the theme will render markdown file like below.

Custom style for web

We can include the same CSS as custom style for html web pages. For this, first copy paste the i-am-zen.css file into the database. Then get the link by right clicking and selecting Copy Item Link. This will give a link like x-devonthink-item://03AA07BF-8965-4400-900F-95A1BD24F859. Use this as link href like <link rel="stylesheet" href="x-devonthink-item://03AA07BF-8965-4400-900F-95A1BD24F859">. With this, the html page will use the i-am-zen.css in the current database as the CSS style.