How do you change dendron preview theme with custom css ?

[akharrou]

Which docs page should be improved?

https://wiki.dendron.so/notes/0fbg5vbv5jzb0623pbi4v3t/

Which area does your issue apply to?

• Basics: Fundamental Dendron features, installation, getting started etc.
• Editing: Editing your notes, Markdown, frontmatter, images, templates, links, note refs, etc.
• Retrieving: Finding your notes, lookup, lookup modifiers, etc.
• Navigating: Navigating across notes, graph view, go to shortcuts, etc.
• Organizing: Maintaining your notes, hierarchies, schemas, journals, tags, users, tasks, special notes, vaults, workspaces, multi-vault, etc.
• Refactoring: Restructuring your notes, Dendron Doctor, refactor hierarchy, move/rename notes, rename header, etc.
• Sharing: Publishing and sharing your notes, git, team workflows, etc.
• Transferring/syncing: Importing/exporting your notes, pods, etc.
• Extending note and workspace functionality, note type system, note traits, hooks, custom pods, etc.
• Dendron community
• Other (please describe in the issue description below)

What should be fixed/improved?

• Fix outdated docs
• Extend docs (tutorials, workflows, etc.)
• Add docs (new features, etc.)
• Clarification needed
• Add/update screenshots
• Fix broken formatting, wikilink, and/or note references
• Other (please describe in the issue description below)

Issue description

I followed what's stated and it just doesn't do anything.

Suggested fix, improvements or additions

No response

[akharrou]

I modified dendron.yml by adding theme: custom under the preview field, and added a custom.css file with the given example, then reloaded dendron preview and nothing happened.

.
├── custom.css
├── dendron.code-workspace
├── dendron.yml
└── notes
    ├── assets
    ├── root.md
    └── root.schema.yml

2 directories, 5 files

with the following dendron.yml:

...
preview:
    theme: custom
    ...
...

with the following custom.css:

body {
  /* The background color of the preview. */
  background-color: #fff;
}

body,
h1,
h2,
h3,
h4 {
  /* Text color for the text, not including links. */
  color: #ffffff;
}

a,
a:hover,
a:active {
  /** Color for links, except ones that have been already visited. */
  color: #b2f7ef;
}