CSS Custom Theme

In Short

1: Create custom.css

• Create file named custom.css
• Place it right next to dendron.yml file (at workspace level).

2: Modify Dendron Yaml

For Preview

preview:
    theme: custom

For Publishing

publishing:
    theme: custom

Dendron Doc

• Customize Publish Theme
• Preview

My CSS Snapshot

My CSS Snapshot

Could be behind the latest. But a pretty good starting point to try CSS custom theme out.

Refer to parent not css-custom-theme for links on how to use this.

:root {
    --my-margin-top: 5px;
    --my-margin-bottom: 5px;
    --my-central-thought-font-size: 1.5em;
}
 
/*--------------------------------------------------------------------------------*/
/* ELEMENT OVERRIDES */
h1{
    text-align: center;
}
h2{
    font-weight: 300;
}
 
summary {
    font-size: 1.1em;
}
 
/*noinspection CssUnresolvedCustomProperty*/
details[open].bordered-when-open {
    border: 2px solid black;
    padding: 10px;
    margin-top: var(--my-margin-top);
    margin-bottom: var(--my-margin-bottom);
    border-radius: 5px;
}
 
/*--------------------------------------------------------------------------------*/
/* CLASSES */
.centered {
    text-align: center;
}
 
/*noinspection CssUnresolvedCustomProperty*/
.bordered {
    border: 2px solid black;
    padding: 10px;
    margin-top: var(--my-margin-top);
    margin-bottom: var(--my-margin-bottom);
    border-radius: 5px;
}
 
/*noinspection CssUnresolvedCustomProperty*/
.central-thought {
    font-family: Papyrus, fantasy;
    font-size: var(--my-central-thought-font-size);
    font-style: italic;
    font-weight: bold;
    margin-top: var(--my-margin-top);
    margin-bottom: var(--my-margin-bottom);
}
 
/*noinspection CssUnresolvedCustomProperty*/
.central-thought-centered {
    text-align: center;
    font-family: Papyrus, fantasy;
    font-size: var(--my-central-thought-font-size);
    font-style: italic;
    font-weight: bold;
    margin-top: var(--my-margin-top);
    margin-bottom: var(--my-margin-bottom);
}

Link to original