diff --git a/examples/index.css b/examples/base.css
similarity index 53%
rename from examples/index.css
rename to examples/base.css
index ead0cb3..99c88b7 100644
--- a/examples/index.css
+++ b/examples/base.css
@@ -6,3 +6,8 @@
 		cursor: pointer;
 	}
 }
+
+@theme {
+	--color-zinc-750: oklch(32.2% 0.0095 285.919);
+	--font-sans: "Inter Variable", sans-serif;
+}
\ No newline at end of file
diff --git a/examples/base.ts b/examples/base.ts
new file mode 100644
index 0000000..675b224
--- /dev/null
+++ b/examples/base.ts
@@ -0,0 +1 @@
+import '@fontsource-variable/inter';
diff --git a/examples/metadata-extraction/index.html b/examples/metadata-extraction/index.html
index 7a98d3a..626a698 100644
--- a/examples/metadata-extraction/index.html
+++ b/examples/metadata-extraction/index.html
@@ -5,47 +5,48 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>Metadata extraction example | Mediakit</title>
+		<script type="module" src="../base.ts"></script>
 		<script type="module" src="./metadata-extraction.ts"></script>
-		<link rel="stylesheet" href="../index.css">
+		<link rel="stylesheet" href="../base.css">
 	</head>
 
-	<body class="flex flex-col items-center py-10 bg-gray-50 text-gray-800 px-2">
-		<h1 class="text-3xl">Metadata extraction example</h1>
+	<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
+		<h1 class="text-3xl font-medium text-blue-800 dark:text-blue-200">Metadata extraction example</h1>
 		<p>Select or drop a media file, and Mediakit will start extracting various metadata about that file.</p>
 
 		<div class="flex gap-2 mt-4">
-			<button class="rounded-lg bg-gray-200 hover:bg-gray-300 px-5 py-1">
+			<button class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-1">
 				Select media file
 			</button>
 
-			<a href="../../assets/big-buck-bunny-trimmed.mp4" download class="rounded-lg bg-gray-200 hover:bg-gray-300 px-5 group grid place-items-center" title="Download sample file">
-				<img src="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80">
+			<a href="../../assets/big-buck-bunny-trimmed.mp4" download class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
+				<img src="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
 			</a>
 		</div>
 		<p class="text-xs opacity-60 mt-0.5" id="file-name"></p>
 
-		<hr class="w-96 my-4 border-gray-300" style="display: none;">
+		<hr class="w-96 my-4 border-zinc-300 dark:border-zinc-700" style="display: none;">
 
 		<p id="bytes-read" class="text-center text-xs font-medium mb-4"></p>
 		<div id="metadata-container" class="text-sm"></div>
 
 		<div class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
-			<img src="../../assets/mediakit-logo.svg" class="size-6">
+			<img src="../../assets/mediakit-logo.svg" class="size-6 dark:invert">
 			<p class="text-sm font-semibold">Mediakit</p>
 		</div>
 
 		<a
 			href="https://github.com/Vanilagy/metamuxer/tree/main/examples/metadata-extraction"
 			target="_blank"
-			class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-gray-200 hover:bg-gray-300 rounded-bl-xl"
+			class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-bl-xl"
 		>
-			<img src="../../assets/github-mark.svg" class="size-6">
+			<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
 			<p>View source code</p>
 		</a>
 	</body>
 
 	<style>
-		@reference "../index.css";
+		@reference "../base.css";
 
 		ul {
 			@apply py-1 px-4 bg-gray-500/10 rounded-lg;
diff --git a/examples/thumbnail-generation/index.html b/examples/thumbnail-generation/index.html
index 4edffb6..a933f4c 100644
--- a/examples/thumbnail-generation/index.html
+++ b/examples/thumbnail-generation/index.html
@@ -5,41 +5,42 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>Thumbnail generation example | Mediakit</title>
+		<script type="module" src="./../base.ts"></script>
 		<script type="module" src="./thumbnail-generation.ts"></script>
-		<link rel="stylesheet" href="../index.css">
+		<link rel="stylesheet" href="../base.css">
 	</head>
 
-	<body class="flex flex-col items-center py-10 bg-gray-50 text-gray-800 px-2">
-		<h1 class="text-3xl">Thumbnail generation example</h1>
+	<body class="flex flex-col items-center py-10 bg-gray-50 text-gray-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
+		<h1 class="text-3xl font-medium text-emerald-800 dark:text-emerald-200">Thumbnail generation example</h1>
 		<p>Select or drop a media file, and Mediakit will extract video thumbnails for it.</p>
 
 		<div class="flex gap-2 mt-4">
-			<button class="rounded-lg bg-gray-200 hover:bg-gray-300 px-5 py-1">
+			<button class="rounded-lg bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 px-5 py-1">
 				Select media file
 			</button>
 
-			<a href="../../assets/big-buck-bunny-trimmed.mp4" download class="rounded-lg bg-gray-200 hover:bg-gray-300 px-5 group grid place-items-center" title="Download sample file">
-				<img src="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80">
+			<a href="../../assets/big-buck-bunny-trimmed.mp4" download class="rounded-lg bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
+				<img src="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
 			</a>
 		</div>
 		<p class="text-xs opacity-60 mt-0.5" id="file-name"></p>
 
-		<hr class="w-96 my-4 border-gray-300" style="display: none;">
+		<hr class="w-96 my-4 border-gray-300 dark:border-zinc-700" style="display: none;">
 
 		<p id="error-element" class="text-red-500"></p>
 		<div id="thumbnail-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"></div>
 
 		<div class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
-			<img src="../../assets/mediakit-logo.svg" class="size-6">
+			<img src="../../assets/mediakit-logo.svg" class="size-6 dark:invert">
 			<p class="text-sm font-semibold">Mediakit</p>
 		</div>
 
 		<a
 			href="https://github.com/Vanilagy/metamuxer/tree/main/examples/thumbnail-generation"
 			target="_blank"
-			class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-gray-200 hover:bg-gray-300 rounded-bl-xl"
+			class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-bl-xl"
 		>
-			<img src="../../assets/github-mark.svg" class="size-6">
+			<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
 			<p>View source code</p>
 		</a>
 	</body>
diff --git a/examples/thumbnail-generation/thumbnail-generation.ts b/examples/thumbnail-generation/thumbnail-generation.ts
index e187142..0139536 100644
--- a/examples/thumbnail-generation/thumbnail-generation.ts
+++ b/examples/thumbnail-generation/thumbnail-generation.ts
@@ -39,7 +39,7 @@ const generateThumbnails = async (file: File) => {
 		const thumbnailElements = [];
 		for (let i = 0; i < THUMBNAIL_COUNT; i++) {
 			const thumbnailElement = document.createElement('div');
-			thumbnailElement.className = 'rounded-lg overflow-hidden bg-gray-100 relative';
+			thumbnailElement.className = 'rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 relative';
 			thumbnailElement.style.width = `${width}px`;
 			thumbnailElement.style.height = `${height}px`;
 			thumbnailElements.push(thumbnailElement);
diff --git a/package-lock.json b/package-lock.json
index 8001d2c..65b3fd5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.22.0",
+        "@fontsource-variable/inter": "^5.2.5",
         "@microsoft/api-extractor": "^7.52.1",
         "@stylistic/eslint-plugin": "^4.2.0",
         "@tailwindcss/vite": "^4.1.7",
@@ -1067,6 +1068,16 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.5.tgz",
+      "integrity": "sha512-TrWffUAFOnT8zroE9YmGybagoOgM/HjRqMQ8k9R0vVgXlnUh/vnpbGPAS/Caz1KIlOPnPGh6fvJbb7DHbFCncA==",
+      "dev": true,
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
diff --git a/package.json b/package.json
index 45c6194..4bd015f 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",
+    "@fontsource-variable/inter": "^5.2.5",
     "@microsoft/api-extractor": "^7.52.1",
     "@stylistic/eslint-plugin": "^4.2.0",
     "@tailwindcss/vite": "^4.1.7",
