Theming - Zen

Theming

←18 / 30→

Use the explicit hooks instead of positional selectors. Style the visible navbar through .vyasa-navbar-card, not #site-navbar > *.

Copied

.vyasa-navbar-card {
  background-color: #0f766e !important;
  color: #f8fafc !important;
}

.vyasa-footer-card {
  background-color: #1f2937 !important;
  color: #f8fafc !important;
}

#site-navbar a,
#site-footer a {
  color: #f8fafc;
}

#site-navbar a:hover,
#site-footer a:hover {
  color: #e2e8f0;
}

.dark .vyasa-navbar-card { background-color: #0b3b3a !important; }
.dark .vyasa-footer-card { background-color: #111827 !important; }

Back to doc view

2	✦
3	✦ > 1) Where to put your CSS
4	✦ > 1) Where to put your CSS > Root-level CSS (site-wide)
5	✦ > 1) Where to put your CSS > Folder-level CSS (scoped)
6	✦ > 1) Where to put your CSS > Folder-level global CSS
7	✦ > 1) Where to put your CSS > Example mental model
8	✦ > 2a) Built-in previous/next navigation
9	✦ > 2) How to find the section scope class
10	✦ > 3) DOM map (what you can target)
11	✦ > 3) DOM map (what you can target) > How to find selectors for obscure elements
12	✦ > 3) DOM map (what you can target) > What to do after you find a selector
13	✦ > 3) DOM map (what you can target) > Page structure
14	✦ > 3) DOM map (what you can target) > Sidebars
15	✦ > 3) DOM map (what you can target) > Mobile panels
16	✦ > 3) DOM map (what you can target) > Markdown content
17	✦ > 4) Global theming (background, typography, links)
18	✦ > 5) Navbar and footer
19	✦ > 6) Sidebars and TOC
20	✦ > 7) Code blocks and inline code
21	✦ > 8) Mermaid diagrams
22	✦ > 9) Footnotes / sidenotes
23	✦ > 10) Tabs
24	✦ > 11) Images and media
25	✦ > 12) Change behavior (JS + HTML)
26	✦ > 12) Change behavior (JS + HTML) > Option A: Custom JS
27	✦ > 12) Change behavior (JS + HTML) > Option B: Inline HTML/JS in Markdown
28	✦ > 13) Advanced: change the HTML structure
29	✦ > 14) Troubleshooting

5) Navbar and footerURL copied