walt

Walt is a minimal documentation theme based on writ.css. It features classless styles for semantic HTML and supports light and dark mode based on system settings.

Stylesheet

You can include the Walt stylesheet in your project in the following ways:

• Copy the stylesheet from GitHub:

  https://github.com/codesue/walt/blob/main/walt.css

• Install from npm:

  npm install --save walt.css

• Link to a CDN:

  <link rel="stylesheet" href="https://unpkg.com/walt.css/walt.css" />

Code syntax highlighting

For code syntax highlighting in Walt, I recommend using highlight.js with Catppuccin palettes. Use Macchiato for the dark color scheme and Latte for the light color scheme. For example, you may add the following to your HTML files:

<link rel="stylesheet" href="//unpkg.com/@catppuccin/highlightjs/css/catppuccin-macchiato.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="//unpkg.com/@catppuccin/highlightjs/css/catppuccin-latte.css" media="(prefers-color-scheme: light)">

In a stylesheet or style tag, unset the background in code blocks styled by highlight.js to maintain uniform background colors in code blocks and inline code:

.hljs,
code.hljs {
  background: unset;
}

You may also want to update the text color of comments if they no longer have enough contrast with their backgrounds:

code .hljs-comment {
  color: var(--color-secondary-text);
}

MkDocs theme

Walt is available as an MkDocs theme that features:

• classless styles for semantic HTML based on writ.css
• light mode and dark mode based on system settings
• an emoji favicon for browsers that support svg site icons
• code syntax highlighting using highlight.js

You can install it from PyPI using:

pip install mkdocs-walt

See the mkdocs directory to learn how to install and use Walt in your MkDocs projects.

Contributing

Coming soon!

License

Copyright © 2023 Suzen Fylke. Distributed under the MIT License.

Acknowledgements

Walt uses writ.css for styles and examples use writ's reference html page.

Walt also uses Catppuccin for code block syntax highlighting and dark mode color palettes.