Vitepress logo sizing

Skill LaWebcapsule/d9-skills/skills/vitepress-logo-sizing

Fix VitePress logo distortion in dark mode by setting explicit CSS height instead of unset.From its SKILL.md

Install

npx -y skills add LaWebcapsule/d9-skills --skill vitepress-logo-sizing

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

2.0 KB, 400 tokens by cl100k_base, as published. Nobody here has run it

Skill: VitePress Logo Sizing

Purpose

When replacing the default VitePress logo with a custom SVG, the logo can appear distorted (stretched or squished) in dark mode. This happens because VitePress's default CSS sets height: unset on the logo image in certain theme variants, which removes the height constraint and lets the SVG expand to its intrinsic aspect ratio.

Triggers

Custom logo SVGs are being added to a VitePress site
The logo looks correct in light mode but distorted in dark mode (or vice versa)
CSS overrides exist in .vitepress/theme/overrides.css

Actions

In .vitepress/theme/overrides.css, find the logo image rule
Replace height: unset with an explicit height: height: 36px (adjust as needed)
Test both light and dark mode to verify the logo renders correctly
If using separate light/dark logos, ensure both SVGs have the same viewBox dimensions

/* BAD — causes distortion in dark mode */
.VPNavBarTitle .logo {
  height: unset;
}

/* GOOD — explicit height prevents distortion */
.VPNavBarTitle .logo {
  height: 36px;
}

Errors Prevented

Logo distortion in dark mode: The logo stretches vertically or horizontally depending on the SVG's intrinsic dimensions. Not immediately obvious during development if you only test in one theme mode. Took 1h to identify the CSS rule causing it because the issue is in an override file, not in the main config.

Restrictions

The exact pixel value depends on your logo's aspect ratio — 36px is a starting point
If you use width instead of height, test on mobile viewports where the nav bar is narrower
This applies to VitePress 1.x — future versions may handle logo sizing differently

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.