background color transition doesn't work

[alephpi]

Hi, here is a example.

Basically I just want to realize the background color transition like vuejs official doc. (thought it uses vitepress theme, there is a slight difference), I simply add one line of css, but doesn't seem to work.

[Liberty-liu]

https://github.com/vuejs/docs/blob/main/.vitepress/theme/components/Home.vue#L115

[brc-dd]

IG the OP was referring to adding transition to the background (like animate it when the user changes dark/light mode). But that is blocked by us intentionally:

vitepress/src/client/theme-default/components/VPSwitchAppearance.vue

Lines 45 to 67 in c4909e4

	function setClass(dark: boolean): void {
	const css = document.createElement('style')
	css.type = 'text/css'
	css.appendChild(
	document.createTextNode(
	`:not(.VPSwitchAppearance):not(.VPSwitchAppearance *) {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
	}`
	)
	)
	document.head.appendChild(css)
	checked.value = dark
	classList[dark ? 'add' : 'remove']('dark')
	// @ts-expect-error keep unused declaration, used to force the browser to redraw
	const _ = window.getComputedStyle(css).opacity
	document.head.removeChild(css)
	}

Refer this: https://paco.me/writing/disable-theme-transitions

To disable that, you'd need to patch the file: https://vitepress.dev/guide/extending-default-theme#overriding-internal-components