Theming - Zen

Theming

←17 / 30→

4) Global theming (background, typography, links)URL copied

Put this in root custom.css to define a new global look:

Copied

/* Global background + text */
html, body {
  background-color: #f6f3ee !important;
  color: #1f2937 !important;
}

#page-container,
#main-content {
  background-color: transparent;
  color: inherit;
}

.dark html, .dark body {
  background-color: #0b0f14 !important;
  color: #e2e8f0 !important;
}

/* Typography */
body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  line-height: 1.7;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
}

/* Links */
a { color: #0f766e; }
a:hover { color: #115e59; }

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