CSS - Docs Practice

Code block styling

How this was built

Mintlify renders code blocks with Shiki and exposes syntax colors as CSS variables when styling.codeblocks.theme is set to css-variables in docs.json.custom.css at the project root is picked up automatically — no import needed — and overrides those --mint-token-* variables, swaps the font to JetBrains Mono, and adds a themed border, glow, and scrollbar.--mint-token-* are inherited CSS custom properties, so wrapping a code block in <div className="theme-name"> overrides the palette for just that block — the site-wide default in :root stays untouched everywhere else.

Aurora — colors & fonts

Background #0f172a
Keyword #c084fc
Function #60a5fa
String #4ade80
Constant / parameter #fbbf24
Comment #64748b (italic)
Font: JetBrains Mono

// comments get a muted, italic treatment
const greet = (name) => {
  const message = `Hello, ${name}!`;
  return message.trim();
};

export const isReady = true;

# same palette, different language
def greet(name: str) -> str:
    message = f"Hello, {name}!"
    return message.strip()

is_ready = True

Sunset — colors & fonts

Background #1a1025
Keyword #ff6b9d
Function #ffa94d
String #ffd93d
Constant / parameter #ff8787
Comment #9a7f8f (italic)
Font: JetBrains Mono

// warm palette: pink keywords, orange functions, yellow strings
const launch = (destination) => {
  const eta = `arriving at ${destination} soon`;
  return eta.toUpperCase();
};

# warm palette: pink keywords, orange functions, yellow strings
def launch(destination: str) -> str:
    eta = f"arriving at {destination} soon"
    return eta.upper()

Ocean — colors & fonts

Background #0a1e26
Keyword #4fd1c5
Function #63b3ed
String #81e6d9
Constant / parameter #f6ad55
Comment #5c8a99 (italic)
Font: JetBrains Mono

// cool palette: teal keywords, sky-blue functions, aqua strings
const dive = (depth) => {
  const status = `descending to ${depth}m`;
  return status.toUpperCase();
};

# cool palette: teal keywords, sky-blue functions, aqua strings
def dive(depth: int) -> str:
    status = f"descending to {depth}m"
    return status.upper()

Hover interactive cards

How this was built

Mintlify renders each <Card> as a plain .card div inside a .card-group grid — both real, stable class names, not scoped/hashed, so custom.css can target them directly.Each card below is individually wrapped in its own <div className="card-tilt"> (or card-glow / card-lift), and each wrapper class defines exactly one effect, scoped as .card-tilt .card:hover: tilt is a perspective() + rotateX/rotateY transform and nothing else, glow is a radial box-shadow halo with no movement, and lift is a straight translateY(-14px) with a grounding drop shadow — no rotation or glow on either. The icon (an SVG using a CSS mask, not a fill) recolors on all three via .card:hover svg.It’s pure CSS — no JavaScript — so the tilt is a fixed angle rather than one that follows the cursor.

Tilt

Hover for a 3D rotation only.

Glow

Hover for a soft accent halo only.

Lift

Hover to lift straight off the page.

Custom scrollbar

How this was built

Two APIs, set globally on html in custom.css, cover every browser: Firefox reads the standard scrollbar-width / scrollbar-color properties, while Chrome, Safari, and Edge use the older ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb pseudo-elements. Setting both themes the scrollbar everywhere on the site — including the browser window’s own scrollbar, not just inside a bounded container like the one below.Code blocks keep the separate, thinner scrollbar from the “Code block styling” section above — pre::-webkit-scrollbar wins there since a tag + pseudo-element selector beats the sitewide ::-webkit-scrollbar rule on specificity.

Scroll inside this box
Same green theme as the rest of the site
Firefox: scrollbar-width + scrollbar-color
Everywhere else: ::-webkit-scrollbar*
Applied globally on html, so the browser window’s own scrollbar matches too
Rounded thumb, transparent track
Hover the thumb for a brighter green
Almost there
Last one — you found the bottom