feat: add initial light mode for homepage & dashboard

### What does this PR do?

Adds initial light mode for the homepage and dashboard (column colour
changes).

### Screenshot / video of UI

<!-- If this PR is changing UI, please include
screenshots or screencasts showing the difference -->

### What issues does this PR fix or reference?

<!-- Include any related issues from Podman Desktop
repository (or from another issue tracker). -->

Closes #539

### How to test this PR?

Visit homepage and dashboard and see light mode works fine

<!-- Please explain steps to reproduce -->

Signed-off-by: Charlie Drage <[email protected]>

packages/frontend/src/App.svelte

@@ -27,7 +27,7 @@ onMount(() => {
 </script>
 
 <Route path="/*" breadcrumb="Bootable Containers" isAppMounted="{isMounted}" let:meta>
-  <main class="flex flex-col w-screen h-screen overflow-hidden bg-charcoal-700">
+  <main class="flex flex-col w-screen h-screen overflow-hidden bg-[var(--pd-content-bg)]">
     <div class="flex flex-row w-full h-full overflow-hidden">
       <Route path="/" breadcrumb="Bootable Containers">
         <Homepage />

packages/frontend/src/lib/BootcEmptyScreen.svelte

@@ -69,21 +69,21 @@ $: {
 <div class="flex w-full h-full justify-center items-center">
   <div class="flex flex-col h-full items-center text-center space-y-3">
     <!-- Bootable Container Icon -->
-    <div class="text-gray-700 py-2">
+    <div class="py-2">
       <svelte:component this="{BootcSelkie}" size="120" />
     </div>
 
-    <h1 class="text-xl pb-4">Welcome to Bootable Containers</h1>
+    <h1 class="text-xl pb-4 text-[var(--pd-content-header)]">Welcome to Bootable Containers</h1>
 
-    <p class="text-gray-700 pb-4 max-w-xl">
+    <p class="pb-4 max-w-xl text-[var(--pd-card-header-text)]">
       Bootable Containers builds an entire bootable OS from your container image. Utilizing the technology of a
       <Link externalRef="{centosBootcSite}">compatible image</Link>, <Link externalRef="{bootcImageBuilderSite}"
         >bootc-image-builder</Link
       >, and <Link externalRef="{bootcSite}">bootc</Link>, your container image is transformed into a bootable disk
       image.
     </p>
 
-    <p class="text-gray-700 pb-1 max-w-xl">
+    <p class="pb-1 max-w-xl text-[var(--pd-card-header-text)]">
       Create your first disk image by {imageExists ? 'building' : 'pulling'} the <Link
         externalRef="{`https://${exampleImage}`}">example container image</Link
       >:
@@ -102,10 +102,12 @@ $: {
         title="Pull image">Pull {exampleImage}</Button>
     {/if}
     {#if displayDisclaimer}
-      <p class="text-amber-500 text-xs">The file size of the image is over 1.5GB and may take a while to download.</p>
+      <p class="text-[var(--pd-status-waiting)] text-xs">
+        The file size of the image is over 1.5GB and may take a while to download.
+      </p>
     {/if}
 
-    <p class="text-gray-700 pt-8 max-w-xl">
+    <p class="pt-8 max-w-xl text-[var(--pd-card-header-text)]">
       Want to learn more including building your own Containerfile? Check out the <Link externalRef="{extensionSite}"
         >extension documentation</Link
       >.

packages/frontend/src/lib/BootcImageColumn.svelte

@@ -4,6 +4,6 @@ import type { BootcBuildInfo } from '/@shared/src/models/bootc';
 export let object: BootcBuildInfo;
 </script>
 
-<div class="text-sm text-gray-300">
+<div class="text-sm text-[var(--pd-table-body-text-highlight)]">
   {object.image}:{object.tag}
 </div>