llama-stack/docs/_static/css/my_theme.css
Christian Zaccaria 9f27578929
fix: improve Mermaid diagram visibility in dark mode (#2092)
# What does this PR do?
Closes #2078 

Previously, the Agent Execution Loop diagram was barely visible in dark
mode:


![image](https://github.com/user-attachments/assets/78567334-c57f-4cd0-ba93-290b20ed3aba)

I experimented with styling individual classes, but ultimately found
that adding an off-white background provides the best visibility in both
dark and light modes:


![image](https://github.com/user-attachments/assets/419d153a-d870-410b-b635-02b95da67a3d)

[//]: # (If resolving an issue, uncomment and update the line below)
[//]: # (Closes #[issue-number])

## Test Plan

The documentation can be built locally by following the docs:
https://llama-stack.readthedocs.io/en/latest/contributing/index.html#building-the-documentation

[//]: # (## Documentation)
2025-05-02 13:09:45 -07:00

35 lines
647 B
CSS

@import url("theme.css");
.wy-nav-content {
max-width: 90%;
}
.wy-nav-side {
/* background: linear-gradient(45deg, #2980B9, #16A085); */
background: linear-gradient(90deg, #332735, #1b263c);
}
.wy-side-nav-search {
background-color: transparent !important;
}
.hide-title h1 {
display: none;
}
h2, h3, h4 {
font-weight: normal;
}
html[data-theme="dark"] .rst-content div[class^="highlight"] {
background-color: #0b0b0b;
}
pre {
white-space: pre-wrap !important;
word-break: break-all;
}
[data-theme="dark"] .mermaid {
background-color: #f4f4f6 !important;
border-radius: 6px;
padding: 0.5em;
}