Extensions Overview
This section explores various Asciidoctor extensions and third-party integrations. Some work seamlessly with the dark theme, others may need additional styling. Toggle between light and dark modes to see how each renders.
Use the Search box in the top bar on composed demos (powered by @antora/lunr-extension).
Try queries such as installation, dark, or title:configuration.
Fixture pages
| Page | Topic |
|---|---|
|
|
|
|
LaTeX math via MathJax or KaTeX |
|
Themed SVG + Kroki pipeline |
|
Sequence diagrams in the same artifact pipeline |
|
Video embeds and HTML passthrough |
|
Keyboard, menu, and button UI macros |
|
Font Awesome via |
|
Lead, small, big, and custom CSS roles |
Extension supplements promoted to docs/fixtures/unchecked appear under Extensions when a playbook composes them and sets the matching AsciiDoc attribute (see site-nav-tree fixture READMEunchecked).
What Needs Extra Work?
Some extensions require additional dark mode CSS:
| Extension | Status | Notes |
|---|---|---|
Tabs ( |
Works |
Inherits theme colors |
Search ( |
Works |
Input + dropdown styled in |
STEM / Math |
Works |
SVG/HTML inherits text color |
Kroki / Diagrams |
Partial |
Diagram colors are hardcoded in source |
Video embeds |
Works |
Player has own chrome |
HTML Passthrough |
Manual |
Inline styles override theme |
Keyboard macros |
Works |
Styled by theme |
Menu/Button macros |
Works |
Styled by theme |
Font icons |
Works |
Inherits text color |
Custom roles |
Partial |
Standard roles styled; custom need CSS |
Extending for Your Content
To style custom elements in dark mode, add selectors to your CSS:
/* Your custom component */
html.dark-theme .my-custom-widget {
background-color: #25262b;
color: #c1c2c5;
border-color: #373a40;
}
/* Dark-mode-aware diagram wrapper */
html.dark-theme .diagram-wrapper svg {
filter: invert(0.85) hue-rotate(180deg);
}
The filter: invert() hue-rotate() trick can make light-themed diagrams readable in dark mode, though colors will shift.
|