[SOLVED] "Code" font sizes don't match (light / dark theme)

General
1

Light: 14px

code {
	/* ... */
	font-size: 14px;
	/* ... */
}

light
light1436×170 14.2 KB

Dark: 15.75px

@media (prefers-color-scheme: dark) {
	pre>code {
		/* ... */
		font-size: var(--base-font-size-smaller);
		/* ... */
	}
}

dark
dark1444×230 18 KB

@AmberV probably

1 Like
2

Thanks! These are all perceptually looking the same to me now, in Light, Light with dynamic dark mode, and Dark. I couldn’t actually find a static font size declaration like in your first example—but it didn’t have any, so that might be a browser fallback (or maybe a fundamental theme fallback as my themes are a subset of the stock look). All modes are now explicitly set to use the variable scaling as determined by interface settings in one’s site preferences.

2 Likes
3

Thanks, that was quick! Both use font-size: var(--base-font-size-smaller); now and look identical (size-wise)! :+1:

(Can’t tell where it came from before, it was just the last / top entry in developer tools and I didn’t bother digging further.)