windmill/frontend/src/lib/components/apps/editor/componentsPanel/ThemeDrawer.svelte

<script lang="ts">
	import { Drawer, DrawerContent } from '$lib/components/common'
	import { Highlight } from 'svelte-highlight'
	import type { AppTheme } from '../../types'
	import css from 'svelte-highlight/languages/css'
	import { resolveTheme } from './themeUtils'
	import { workspaceStore } from '$lib/stores'

	export let theme: AppTheme

	let code: string | undefined = undefined
	let codeDrawer: Drawer

	export async function openDrawer() {
		codeDrawer.openDrawer()
		code = await resolveTheme(theme, $workspaceStore)
	}
</script>

<Drawer bind:this={codeDrawer}>
	<DrawerContent title="Theme viewer" on:close={codeDrawer.closeDrawer}>
		<div class="p-2 border rounded-sm">
			<Highlight code={code ?? ''} language={css} />
		</div>
	</DrawerContent>
</Drawer>