feat: apply theme to preview

[btea]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
repl	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 2, 2024 9:01am

[pdanpdan]

I think it should also change color - now the playground is black on dark grey by default in dark mode: https://repl-vuejs.vercel.app/

[btea]

@pdanpdan Do you mean to change the color of h1 tag?

[pdanpdan]

More like define the default color scheme for the playground iframe when dark - now the default expects a like background.

[btea]

Maybe we can apply the variables here to srcdoc.html.

repl/src/Repl.vue

Lines 136 to 143 in 7ae1061

	.dark .vue-repl {
	--bg: #1a1a1a;
	--bg-soft: #242424;
	--border: #383838;
	--text-light: #aaa;
	--color-branding: #42d392;
	--color-branding-dark: #89ddff;
	}

[pdanpdan]

AFAIK you cannot style iframe from outside. So themes for light/dark should be defined for the default example.

[btea]

Yeah, so I mean add the above variables here.

repl/src/output/srcdoc.html

Lines 5 to 8 in 7ae1061

	body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

[pdanpdan]

I would simply go by defining color: white for html.dark

[btea]

This is indeed simpler. Are you willing to create a PR to modify it?