| CARVIEW |
Select Language
HTTP/2 200
access-control-allow-origin: *
age: 0
cache-control: public, max-age=0, must-revalidate
content-disposition: inline; filename="env-static-public"
content-encoding: gzip
content-type: text/html; charset=utf-8
cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: cross-origin
date: Fri, 16 Jan 2026 19:09:53 GMT
etag: W/"6a22f14c5b2fba05886ddfeb216d3608"
last-modified: Fri, 16 Jan 2026 19:09:53 GMT
server: Vercel
strict-transport-security: max-age=63072000
x-vercel-cache: HIT
x-vercel-id: bom1::hvwmm-1768590592939-946fbfc5edbe
Environment variables / $env/static/public • Svelte Tutorial
Skip to main content
Basic Svelte
Introduction
Bindings
Classes and styles
Attachments
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
Advanced SvelteKit Environment variables $env/static/public
Some environment variables can be safely exposed to the browser. These are distinguished from private environment variables with a PUBLIC_ prefix.
Add values to the two public environment variables in .env:
PUBLIC_THEME_BACKGROUND="steelblue"
PUBLIC_THEME_FOREGROUND="bisque"Then, import them into src/routes/+page.svelte:
src/routes/+page
<script>
const PUBLIC_THEME_BACKGROUND = 'white';
const PUBLIC_THEME_FOREGROUND = 'black';
import {
PUBLIC_THEME_BACKGROUND,
PUBLIC_THEME_FOREGROUND
} from '$env/static/public';
</script><script lang="ts">
const PUBLIC_THEME_BACKGROUND = 'white';
const PUBLIC_THEME_FOREGROUND = 'black';
import {
PUBLIC_THEME_BACKGROUND,
PUBLIC_THEME_FOREGROUND
} from '$env/static/public';
</script>previous next
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
<script>
const PUBLIC_THEME_BACKGROUND = 'white';
const PUBLIC_THEME_FOREGROUND = 'black';
</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>