Update

web/src/app.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+  background-color: #212121;
+}
+
 .gh-ico {
   display: inline-block;
   width: 1em;

web/src/routes/+layout.svelte

@@ -1,8 +1,13 @@
 <script>
   import "../app.css";
+  
+  function switchTheme () {
+    document.documentElement.classList.remove('dark')
+  }
+
 </script>
 
-<div class="font-mono flex justify-center">
+<div class="font-mono flex justify-center text-white">
   <div class="w-full xl:w-3/4 p-6 xl:px-0">
     <section class="mb-10 mt-4">
       <h1 class="text-3xl font-bold flex justify-start items-center gap-2">
@@ -12,6 +17,7 @@
         </a>
       </h1>
     </section>
+    <div on:click={switchTheme}>Light theme</div>
 
     <slot />
   </div>

web/src/routes/+page.svelte

@@ -64,7 +64,7 @@
   }
 
   const serverCols = [
-    { title: 'Name', key: 'name' },
+    { title: 'Name', key: s => `<span class="font-bold">${s.name}</span>` },
     { title: 'Hostname', key: (s) => `<a href="https://${s.host}" class="underline hover:no-underline">${s.host}</a>` },
     { title: 'Status', key: (s) => `<a href="https://status.gwei.cz/dashboard/${s.monitor}" target="_blank"><img src="https://status.gwei.cz/api/badge/${s.monitor}/status?style=flat-square" /></a>` },
     { title: 'Uptime', key: s => formatDistanceToNow(new Date(s.uptime)) },
@@ -75,11 +75,11 @@
 
   const cols = [
     { title: 'Name', key: s => `${s.name} (<a href="${gitUrl(s.repo)}" target="_blank" class="git-link underline hover:no-underline">git</a>)` },
-    { title: 'Server', key: 'server' },
-    { title: 'Endpoint', key: (s) => s.url ? `<a href="${s.url}" class="underline hover:no-underline">${s.url.replace(/^https?:\/\//, '')}</a>` : '' },
+    { title: 'Server', key: s => `<span class="text-xs">${s.server}</span>` },
+    { title: 'Endpoint', key: (s) => s.url ? `<a href="${s.url}" class="underline hover:no-underline">${s.url.replace(/^https?:\/\//, '')}</a>` : '-' },
     { title: 'Status', key: (s) => `<a href="https://status.gwei.cz/dashboard/${s.monitor}" target="_blank"><img src="https://status.gwei.cz/api/badge/${s.monitor}/status?style=flat-square" /></a>` },
     //{ title: 'Uptime', key: (s) => `<img src="https://status.gwei.cz/api/badge/${s.monitor}/uptime/24?style=flat-square" />` },
-    { title: 'Version', key: (s) => s.versions ? renderVersion(s.versions.local, s.versions.latest) : '-' },
+    { title: 'Version', key: (s) => s.versions ? renderVersion(s.versions.local, s.versions.latest) : '<span class="text-gray-200">-</span>' },
     { title: 'Latest version', key: (s) => s.versions ? (`<a href="${gitUrl(s.repo, (s.version_conf && s.version_conf.to.strategy === 'github_tags' ? 'tags' : 'releases'))}" target="_blank"><span class="text-gray-400">${s.versions.latest}</span></a>` || 'n/a') : '' },
   ];
 
@@ -107,7 +107,7 @@
       </thead>
       <tbody>
         {#each spec.servers as item}
-          <tr class="hover:bg-gray-100">
+          <tr class="hover:bg-gray-600">
             {#each serverCols as col}
               <td class="">{@html typeof col.key === 'string' ? item[col.key] : col.key(item)}</td>
             {/each}
@@ -122,7 +122,7 @@
     <h2 class="mb-4 text-xl font-bold">Services</h2>
     <div class="mt-2 mb-4 text-sm">
       Server:
-      <select name="server" class="border p-1 rounded" bind:value={server}>
+      <select name="server" class="border p-1 rounded bg-[#212121]" bind:value={server}>
           <option value="">all</option>
         {#each spec.servers as s}
           <option value={s.name}>{s.name}</option>
@@ -139,7 +139,7 @@
       </thead>
       <tbody>
         {#each spec.services.filter(s => server ? s.server === server : true) as service}
-          <tr class="hover:bg-gray-100">
+          <tr class="hover:bg-gray-600">
             {#each cols as col}
               <td class="sysinfo-service-col">{@html typeof col.key === 'string' ? service[col.key] : col.key(service)}</td>
             {/each}