Skip to main content

Tương tự như biến môi trường riêng tư, nếu có thể, thì nên sử dụng giá trị tĩnh, nhưng nếu cần thiết, chúng ta cũng có thể sử dụng giá trị động:

src/routes/+page.svelte
<script>
	import { env } from '$env/dynamic/public';
</script>

<main
	style:background={env.PUBLIC_THEME_BACKGROUND}
	style:color={env.PUBLIC_THEME_FOREGROUND}
>
	{env.PUBLIC_THEME_FOREGROUND} on {env.PUBLIC_THEME_BACKGROUND}
</main>

Tiếp theo: Kết luận

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
	import {
		PUBLIC_THEME_BACKGROUND,
		PUBLIC_THEME_FOREGROUND
	} from '$env/static/public';
</script>
 
<main
	style:background={PUBLIC_THEME_BACKGROUND}
	style:color={PUBLIC_THEME_FOREGROUND}
>
	{PUBLIC_THEME_FOREGROUND} on {PUBLIC_THEME_BACKGROUND}
</main>
 
<style>
	main {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		font-size: 10vmin;
	}
</style>
initialising