From abc7f655cc6a3363114e7b3b92f5382edecbbf60 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Fri, 14 Feb 2025 10:49:38 -0500
Subject: [PATCH] Migrate to Tailwind CSS and refactor global styles

---
 assets/style.css | 506 ++++++++++++++++++++---------------------------
 index.html       | 461 ++++++++++++++++++++----------------------
 2 files changed, 430 insertions(+), 537 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 87cbf38..9ccce31 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,311 +1,241 @@
-/* Reset */
-*, *::before, *::after {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-  
-  /* Variables */
-  :root {
-    /* Colors */
+/* HRIStudio Design System */
+:root {
+    /* Light mode colors */
     --background: 200 30% 97%;
     --foreground: 200 50% 20%;
     --card: 0 0% 100%;
     --card-foreground: 200 50% 20%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 200 50% 20%;
     --primary: 200 85% 45%;
     --primary-foreground: 0 0% 100%;
+    --secondary: 200 30% 96%;
+    --secondary-foreground: 200 50% 20%;
     --muted: 200 30% 96%;
     --muted-foreground: 200 30% 40%;
+    --accent: 200 85% 45%;
+    --accent-foreground: 0 0% 100%;
     --border: 200 30% 90%;
-  
-    /* Spacing */
-    --space-1: 0.25rem;
-    --space-2: 0.5rem;
-    --space-3: 0.75rem;
-    --space-4: 1rem;
-    --space-5: 1.25rem;
-    --space-6: 1.5rem;
-    --space-8: 2rem;
-    --space-10: 2.5rem;
-    --space-12: 3rem;
-    
-    /* Radius */
-    --radius-sm: 0.375rem;
-    --radius-md: 0.5rem;
-    --radius-lg: 0.75rem;
-    
-    /* Container Width */
-    --container-width: 64rem;
-  }
-  
-  /* Dark mode */
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --background: 200 30% 8%;
-      --foreground: 200 20% 96%;
-      --card: 200 25% 15%;
-      --card-foreground: 200 15% 85%;
-      --primary: 200 70% 40%;
-      --primary-foreground: 0 0% 100%;
-      --muted: 200 30% 20%;
-      --muted-foreground: 200 30% 65%;
-      --border: 200 30% 20%;
-    }
-  }
-  
-  /* Base styles */
-  html {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --radius: 0.5rem;
+}
+
+[data-theme="dark"] {
+    --background: 200 30% 8%;
+    --foreground: 200 20% 96%;
+    --card: 200 25% 15%;
+    --card-foreground: 200 15% 85%;
+    --popover: 200 50% 8%;
+    --popover-foreground: 200 20% 96%;
+    --primary: 200 70% 40%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 200 30% 20%;
+    --secondary-foreground: 200 20% 96%;
+    --muted: 200 30% 20%;
+    --muted-foreground: 200 30% 65%;
+    --accent: 200 70% 40%;
+    --accent-foreground: 0 0% 100%;
+    --border: 200 30% 20%;
+}
+
+/* Base styles */
+* { 
+    box-sizing: border-box; 
+    margin: 0; 
+    padding: 0; 
+}
+
+body {
+    font-family: system-ui, -apple-system, sans-serif;
     line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  
-  body {
     color: hsl(var(--foreground));
     background: hsl(var(--background));
-    min-height: 100vh;
-    position: relative;
-    isolation: isolate;
-  }
-  
-  /* Background */
-  body::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    z-index: -2;
-    background: linear-gradient(
-      to bottom,
-      hsl(var(--background)),
-      hsl(var(--primary) / 0.1),
-      hsl(var(--background))
-    );
-  }
-  
-  body::after {
-    content: '';
-    position: fixed;
-    inset: 0;
-    z-index: -1;
-    opacity: 0.35;
-    background-image: radial-gradient(
-      circle at 1px 1px,
-      hsl(var(--primary) / 0.5) 1px,
-      transparent 0
-    );
-    background-size: 32px 32px;
-    mask-image: linear-gradient(
-      to bottom,
-      transparent,
-      black 10%,
-      black 90%,
-      transparent
-    );
-  }
-  
-  /* Grid System */
-  .container {
-    width: min(var(--container-width), 100% - var(--space-8));
-    margin-inline: auto;
-    padding-block: var(--space-8);
-  }
-  
-  .grid {
+    transition: background-color 0.3s ease;
+}
+
+/* Layout */
+.container {
+    max-width: 64rem;
+    margin: 0 auto;
+    padding: 1.5rem;
+}
+
+.grid {
     display: grid;
-    gap: var(--space-6);
-  }
-  
-  .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
-  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
-  .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
-  .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
-  
-  @media (max-width: 768px) {
-    .grid-cols-2,
-    .grid-cols-3,
-    .grid-cols-4 {
-      grid-template-columns: 1fr;
-    }
-  }
-  
-  /* Card Components */
-  .card {
-    position: relative;
-    background: hsl(var(--card) / 0.5);
+    gap: 1.5rem;
+}
+
+.grid-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+/* Components */
+.card {
+    background: hsl(var(--card));
     border: 1px solid hsl(var(--border));
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-    backdrop-filter: blur(8px);
-  }
-  
-  .card-header {
-    padding: var(--space-6);
-    border-bottom: 1px solid hsl(var(--border));
-  }
-  
-  .card-title {
-    font-size: 1.25rem;
-    font-weight: 600;
-    line-height: 1.2;
-    letter-spacing: -0.025em;
-  }
-  
-  .card-description {
-    margin-top: var(--space-2);
-    font-size: 0.875rem;
-    color: hsl(var(--muted-foreground));
-  }
-  
-  .card-content {
-    padding: var(--space-6);
-  }
-  
-  /* Typography */
-  h1 {
-    font-size: 2rem;
-    font-weight: 600;
-    line-height: 1.2;
-    letter-spacing: -0.025em;
-  }
-  
-  h2 {
-    font-size: 1.5rem;
-    font-weight: 600;
-    line-height: 1.2;
-    letter-spacing: -0.025em;
-  }
-  
-  h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    line-height: 1.2;
-    letter-spacing: -0.025em;
-  }
-  
-  /* Icons */
-  .icon {
-    width: 1.25rem;
-    height: 1.25rem;
-    stroke: currentColor;
-    stroke-width: 2;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    fill: none;
-  }
-  
-  /* Badges */
-  .badge {
-    display: inline-flex;
-    align-items: center;
-    height: 1.5rem;
-    padding: 0 var(--space-3);
-    font-size: 0.75rem;
-    font-weight: 500;
-    line-height: 1;
-    border-radius: 9999px;
-    background: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-    white-space: nowrap;
-  }
-  
-  .badge-secondary {
-    background: hsl(var(--muted));
-    color: hsl(var(--muted-foreground));
-  }
-  
-  /* Loading State */
-  .loading {
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.header {
     display: flex;
     align-items: center;
-    justify-content: center;
-    min-height: 20rem;
-    font-size: 1rem;
-    color: hsl(var(--muted-foreground));
-  }
-  
-  /* Utilities */
-  .hidden {
-    display: none;
-  }
-  
-  .flex {
-    display: flex;
-  }
-  
-  .items-center {
-    align-items: center;
-  }
-  
-  .justify-between {
-    justify-content: space-between;
-  }
-  
-  .gap-2 { gap: var(--space-2); }
-  .gap-3 { gap: var(--space-3); }
-  .gap-4 { gap: var(--space-4); }
-  .gap-6 { gap: var(--space-6); }
-  
-  .mb-2 { margin-bottom: var(--space-2); }
-  .mb-4 { margin-bottom: var(--space-4); }
-  .mb-6 { margin-bottom: var(--space-6); }
-  .mb-8 { margin-bottom: var(--space-8); }
-  
-  .mt-2 { margin-top: var(--space-2); }
-  .mt-4 { margin-top: var(--space-4); }
-  .mt-6 { margin-top: var(--space-6); }
-  .mt-8 { margin-top: var(--space-8); }
-  
-  /* Header */
-  .header {
-    text-align: center;
-    margin-bottom: var(--space-4);
-  }
-  
-  .header-content {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-6);
-    padding: var(--space-6) var(--space-8);
-    background: hsl(var(--card) / 0.5);
-    border: 1px solid hsl(var(--border));
-    border-radius: var(--radius-lg);
-    backdrop-filter: blur(8px);
-  }
-  
-  .header-icon {
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.header img {
     width: 4rem;
     height: 4rem;
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius);
     object-fit: contain;
-    background: hsl(var(--muted));
-    padding: var(--space-2);
-  }
-  
-  .header-text {
-    text-align: left;
-  }
-  
-  .header-title {
+    background: hsl(var(--secondary));
+    padding: 0.5rem;
+    transition: background-color 0.3s ease;
+}
+
+.banner {
+    width: 100%;
+    height: 12rem;
+    border-radius: calc(var(--radius) + 0.25rem);
+    object-fit: cover;
+    margin-bottom: 1.5rem;
+    border: 1px solid hsl(var(--border));
+    background: hsl(var(--secondary));
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.title {
     font-size: 1.875rem;
     font-weight: 600;
-    line-height: 1.2;
-    letter-spacing: -0.025em;
-    margin-bottom: var(--space-2);
-  }
-  
-  .header-description {
+    margin-bottom: 0.25rem;
+    color: hsl(var(--foreground));
+    transition: color 0.3s ease;
+}
+
+.description {
     color: hsl(var(--muted-foreground));
-    font-size: 1.125rem;
-  }
-  
-  /* Banner */
-  .banner {
-    width: 100%;
-    height: 16rem;
-    border-radius: var(--radius-lg);
-    object-fit: cover;
+    margin-bottom: 1rem;
+    transition: color 0.3s ease;
+}
+
+.badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    background: hsl(var(--primary) / 0.1);
+    color: hsl(var(--primary));
+    margin: 0.25rem;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.stat {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: hsl(var(--muted-foreground));
+    font-size: 0.875rem;
+    transition: color 0.3s ease;
+}
+
+.tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    background: hsl(var(--secondary));
+    color: hsl(var(--secondary-foreground));
+    margin: 0.25rem;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+code {
+    font-family: ui-monospace, monospace;
+    background: hsl(var(--secondary));
+    padding: 0.25rem 0.5rem;
+    border-radius: calc(var(--radius) - 0.25rem);
+    font-size: 0.875rem;
+    transition: background-color 0.3s ease;
+}
+
+h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    color: hsl(var(--foreground));
+    transition: color 0.3s ease;
+}
+
+h3 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    margin-top: 1rem;
+    color: hsl(var(--foreground));
+    transition: color 0.3s ease;
+}
+
+.content {
+    display: grid;
+    gap: 0.75rem;
+    color: hsl(var(--foreground));
+    transition: color 0.3s ease;
+}
+
+.content a {
+    color: hsl(var(--primary));
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.content a:hover {
+    text-decoration: underline;
+}
+
+/* Theme Toggle */
+.theme-toggle {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    padding: 0.5rem;
+    border-radius: var(--radius);
+    background: hsl(var(--card));
     border: 1px solid hsl(var(--border));
-    background: hsl(var(--muted));
-  }
\ No newline at end of file
+    color: hsl(var(--foreground));
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.theme-toggle:hover {
+    background: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+}
+
+/* Loading state */
+#loading {
+    text-align: center;
+    padding: 3rem;
+    color: hsl(var(--muted-foreground));
+    transition: color 0.3s ease;
+}
+
+.hidden { 
+    display: none; 
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .grid-cols-2 {
+        grid-template-columns: 1fr;
+    }
+    
+    .theme-toggle {
+        top: auto;
+        bottom: 1rem;
+    }
+} 
\ No newline at end of file
diff --git a/index.html b/index.html
index df29ec5..5f54f92 100644
--- a/index.html
+++ b/index.html
@@ -1,267 +1,230 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>HRIStudio Robot Plugins</title>
-  <link rel="stylesheet" href="assets/style.css"/>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HRIStudio Robot Plugins</title>
+    <link rel="stylesheet" href="assets/style.css">
 </head>
 <body>
-  <div class="container">
-    <!-- Loading Spinner -->
-    <div id="loading" class="loading">Loading repository data...</div>
-    
-    <!-- Main Content (hidden until data loads) -->
-    <div id="content" class="hidden">
-      
-      <!-- Repository Header Card -->
-      <div class="card mb-8">
-        <div class="flex items-center gap-6 p-6">
-          <img id="repoIcon" alt="Repository Icon" class="header-icon hidden"/>
-          <div>
-            <h1 id="repoName" class="card-title"></h1>
-            <p id="repoDescription" class="card-description"></p>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Statistics Card -->
-      <div class="card mb-8">
-        <div class="card-header">
-          <h2 class="card-title">Statistics</h2>
-          <p class="card-description">Repository information and metrics</p>
-        </div>
-        <div class="card-content">
-          <div class="grid grid-cols-4">
-            <div class="flex items-center gap-4">
-              <svg class="icon" viewBox="0 0 24 24">
-                <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
-                <path d="M3.3 7l8.7 5 8.7-5"></path>
-              </svg>
-              <div>
-                <div class="text-sm text-muted-foreground">Available Plugins</div>
-                <div id="pluginCount" class="text-2xl font-semibold">0</div>
-              </div>
-            </div>
-            <!-- Additional stats can be added similarly if desired -->
-          </div>
-        </div>
-      </div>
-      
-      <!-- Repository Details Grid -->
-      <div class="grid grid-cols-2 gap-8 mb-8">
-        
-        <!-- Author Card -->
-        <div class="card">
-          <div class="card-header">
-            <h2 class="card-title">Author</h2>
-            <p class="card-description">Repository maintainer information</p>
-          </div>
-          <div class="card-content">
-            <div class="flex flex-col gap-4">
-              <div class="flex items-center gap-4">
-                <svg class="icon" viewBox="0 0 24 24">
-                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-                  <circle cx="12" cy="7" r="4"></circle>
-                </svg>
+    <button id="themeToggle" class="theme-toggle" aria-label="Toggle theme">
+        <svg id="themeIcon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="5"/>
+            <line x1="12" y1="1" x2="12" y2="3"/>
+            <line x1="12" y1="21" x2="12" y2="23"/>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+            <line x1="1" y1="12" x2="3" y2="12"/>
+            <line x1="21" y1="12" x2="23" y2="12"/>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+        </svg>
+    </button>
+
+    <div class="container">
+        <div id="loading">Loading repository data...</div>
+        <div id="content" class="hidden">
+            <!-- Header -->
+            <div class="header">
+                <img id="repoIcon" alt="Repository Icon" class="hidden">
                 <div>
-                  <div class="text-sm text-muted-foreground">Name</div>
-                  <div id="authorName" class="text-sm"></div>
+                    <h1 id="repoName" class="title"></h1>
+                    <p id="repoDescription" class="description"></p>
                 </div>
-              </div>
-              <div id="authorOrgContainer" class="flex items-center gap-4 hidden">
-                <svg class="icon" viewBox="0 0 24 24">
-                  <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
-                  <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
-                </svg>
-                <div>
-                  <div class="text-sm text-muted-foreground">Organization</div>
-                  <div id="authorOrg" class="text-sm"></div>
-                </div>
-              </div>
-              <div id="authorUrlContainer" class="flex items-center gap-4 hidden">
-                <svg class="icon" viewBox="0 0 24 24">
-                  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
-                  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
-                </svg>
-                <div>
-                  <div class="text-sm text-muted-foreground">Profile</div>
-                  <a id="authorUrl" class="text-sm text-primary hover:underline" target="_blank">View Profile</a>
-                </div>
-              </div>
             </div>
-          </div>
-        </div>
-        
-        <!-- Compatibility Card -->
-        <div class="card">
-          <div class="card-header">
-            <h2 class="card-title">Compatibility</h2>
-            <p class="card-description">Version requirements and support</p>
-          </div>
-          <div class="card-content">
-            <div class="flex flex-col gap-6">
-              <!-- HRIStudio Section -->              
-              <div class="flex flex-col gap-4">
-                <div class="flex items-center gap-2">
-                  <svg class="icon" viewBox="0 0 24 24">
-                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
-                    <path d="m3.3 7 8.7 5 8.7-5"></path>
-                  </svg>
-                  <h3 class="text-base font-semibold">HRIStudio</h3>
+
+            <img id="repoBanner" class="banner hidden">
+
+            <!-- Stats -->
+            <div class="card">
+                <div class="stat">
+                    <span>Plugins:</span>
+                    <span id="pluginCount"></span>
                 </div>
-                <div class="flex items-center gap-4">
-                  <svg class="icon" viewBox="0 0 24 24">
-                    <path d="M12 2v20"></path>
-                    <path d="M2 12h20"></path>
-                  </svg>
-                  <div>
-                    <div class="text-sm text-muted-foreground">Min Version</div>
-                    <code id="hriMin" class="text-sm"></code>
-                  </div>
-                </div>
-                <div id="hriRecommendedContainer" class="flex items-center gap-4 hidden">
-                  <svg class="icon" viewBox="0 0 24 24">
-                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
-                    <path d="m9 12 2 2 4-4"></path>
-                  </svg>
-                  <div>
-                    <div class="text-sm text-muted-foreground">Recommended</div>
-                    <code id="hriRecommended" class="text-sm"></code>
-                  </div>
-                </div>
-              </div>
-              
-              <!-- ROS 2 Section -->              
-              <div id="ros2Container" class="flex flex-col gap-4 hidden">
-                <div class="flex items-center gap-2">
-                  <svg class="icon" viewBox="0 0 24 24">
-                    <circle cx="12" cy="12" r="10"></circle>
-                    <path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.4"></path>
-                    <path d="M7.8 7.8c-2.3 2.3-2.3 6.1 0 8.4"></path>
-                  </svg>
-                  <h3 class="text-base font-semibold">ROS 2</h3>
-                </div>
-                <div class="flex items-center gap-4">
-                  <svg class="icon" viewBox="0 0 24 24">
-                    <path d="M8 2h8"></path>
-                    <path d="M8 6h8"></path>
-                    <path d="M8 10h8"></path>
-                    <path d="M8 14h8"></path>
-                    <path d="M8 18h8"></path>
-                    <path d="M3 22h18"></path>
-                  </svg>
-                  <div>
-                    <div class="text-sm text-muted-foreground">Distributions</div>
-                    <div id="ros2Distributions" class="flex flex-wrap gap-2 mt-2"></div>
-                  </div>
-                </div>
-                <div id="ros2RecommendedContainer" class="flex items-center gap-4 hidden">
-                  <svg class="icon" viewBox="0 0 24 24">
-                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
-                    <path d="m9 12 2 2 4-4"></path>
-                  </svg>
-                  <div>
-                    <div class="text-sm text-muted-foreground">Recommended</div>
-                    <code id="ros2Recommended" class="text-sm"></code>
-                  </div>
-                </div>
-              </div>
             </div>
-          </div>
+
+            <!-- Details -->
+            <div class="grid grid-cols-2">
+                <!-- Author Info -->
+                <div class="card">
+                    <h2>Author</h2>
+                    <div class="content">
+                        <div>
+                            <span>Name:</span>
+                            <span id="authorName"></span>
+                        </div>
+                        <div id="authorOrgContainer" class="hidden">
+                            <span>Organization:</span>
+                            <span id="authorOrg"></span>
+                        </div>
+                        <div id="authorUrlContainer" class="hidden">
+                            <a id="authorUrl" target="_blank">View Profile</a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Compatibility -->
+                <div class="card">
+                    <h2>Compatibility</h2>
+                    <div>
+                        <h3>HRIStudio</h3>
+                        <div>
+                            <span>Min Version:</span>
+                            <code id="hriMin"></code>
+                        </div>
+                        <div id="hriRecommendedContainer" class="hidden">
+                            <span>Recommended:</span>
+                            <code id="hriRecommended"></code>
+                        </div>
+                    </div>
+                    <div id="ros2Container" class="hidden">
+                        <h3>ROS 2</h3>
+                        <div id="ros2Distributions"></div>
+                        <div id="ros2RecommendedContainer" class="hidden">
+                            <span>Recommended:</span>
+                            <code id="ros2Recommended"></code>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Tags -->
+            <div class="card">
+                <h2>Tags</h2>
+                <div id="tags"></div>
+            </div>
         </div>
-      </div>
-      
-      <!-- Tags Card -->      
-      <div class="card">
-        <div class="card-header">
-          <h2 class="card-title">Tags</h2>
-          <p class="card-description">Repository categories and features</p>
-        </div>
-        <div class="card-content">
-          <div id="tags" class="flex flex-wrap gap-2"></div>
-        </div>
-      </div>
     </div>
-  </div>
-  
-  <script>
-    async function loadRepositoryData() {
-      try {
-        const response = await fetch('repository.json');
-        const data = await response.json();
+
+    <script>
+        // Theme management
+        const themeToggle = document.getElementById('themeToggle');
+        const themeIcon = document.getElementById('themeIcon');
         
-        // Update page title
-        document.title = data.name;
+        // Check for saved theme preference or system preference
+        const savedTheme = localStorage.getItem('theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const defaultTheme = savedTheme || (prefersDark ? 'dark' : 'light');
         
-        // Update header
-        document.getElementById('repoName').textContent = data.name;
-        document.getElementById('repoDescription').textContent = data.description || '';
-        
-        // Update stats
-        document.getElementById('pluginCount').textContent = data.stats?.plugins || 0;
-        
-        // Update author info
-        document.getElementById('authorName').textContent = data.author.name;
-        if (data.author.organization) {
-          document.getElementById('authorOrgContainer').classList.remove('hidden');
-          document.getElementById('authorOrg').textContent = data.author.organization;
+        // Apply theme
+        function setTheme(theme) {
+            document.documentElement.setAttribute('data-theme', theme);
+            localStorage.setItem('theme', theme);
+            
+            // Update icon
+            if (theme === 'dark') {
+                themeIcon.innerHTML = `
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                    <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
+                `;
+            } else {
+                themeIcon.innerHTML = `
+                    <circle cx="12" cy="12" r="5"/>
+                    <line x1="12" y1="1" x2="12" y2="3"/>
+                    <line x1="12" y1="21" x2="12" y2="23"/>
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+                    <line x1="1" y1="12" x2="3" y2="12"/>
+                    <line x1="21" y1="12" x2="23" y2="12"/>
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+                `;
+            }
         }
-        if (data.author.url) {
-          document.getElementById('authorUrlContainer').classList.remove('hidden');
-          document.getElementById('authorUrl').href = data.author.url;
-        }
-        
-        // Update compatibility
-        document.getElementById('hriMin').textContent = data.compatibility.hristudio.min;
-        if (data.compatibility.hristudio.recommended) {
-          document.getElementById('hriRecommendedContainer').classList.remove('hidden');
-          document.getElementById('hriRecommended').textContent = data.compatibility.hristudio.recommended;
-        }
-        
-        if (data.compatibility.ros2) {
-          document.getElementById('ros2Container').classList.remove('hidden');
-          const distributionsDiv = document.getElementById('ros2Distributions');
-          data.compatibility.ros2.distributions.forEach(dist => {
-            const badge = document.createElement('span');
-            badge.className = 'badge';
-            badge.textContent = dist;
-            distributionsDiv.appendChild(badge);
-          });
-          
-          if (data.compatibility.ros2.recommended) {
-            document.getElementById('ros2RecommendedContainer').classList.remove('hidden');
-            document.getElementById('ros2Recommended').textContent = data.compatibility.ros2.recommended;
-          }
-        }
-        
-        // Update tags
-        const tagsContainer = document.getElementById('tags');
-        data.tags.forEach(tag => {
-          const badge = document.createElement('span');
-          badge.className = 'badge badge-secondary';
-          badge.textContent = tag;
-          tagsContainer.appendChild(badge);
+
+        // Set initial theme
+        setTheme(defaultTheme);
+
+        // Theme toggle handler
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            setTheme(newTheme);
         });
-        
-        // Handle assets
-        if (data.assets?.icon) {
-          const iconImg = document.getElementById('repoIcon');
-          iconImg.src = data.assets.icon;
-          iconImg.classList.remove('hidden');
+
+        // Repository data loading
+        async function loadRepositoryData() {
+            try {
+                const response = await fetch('repository.json');
+                const data = await response.json();
+                
+                // Update page title
+                document.title = data.name;
+                
+                // Update header
+                document.getElementById('repoName').textContent = data.name;
+                document.getElementById('repoDescription').textContent = data.description || '';
+                
+                // Update stats
+                document.getElementById('pluginCount').textContent = data.stats?.plugins || 0;
+                
+                // Update author info
+                document.getElementById('authorName').textContent = data.author.name;
+                if (data.author.organization) {
+                    document.getElementById('authorOrgContainer').classList.remove('hidden');
+                    document.getElementById('authorOrg').textContent = data.author.organization;
+                }
+                if (data.author.url) {
+                    document.getElementById('authorUrlContainer').classList.remove('hidden');
+                    document.getElementById('authorUrl').href = data.author.url;
+                }
+                
+                // Update compatibility
+                document.getElementById('hriMin').textContent = data.compatibility.hristudio.min;
+                if (data.compatibility.hristudio.recommended) {
+                    document.getElementById('hriRecommendedContainer').classList.remove('hidden');
+                    document.getElementById('hriRecommended').textContent = data.compatibility.hristudio.recommended;
+                }
+                
+                if (data.compatibility.ros2) {
+                    document.getElementById('ros2Container').classList.remove('hidden');
+                    const distributionsDiv = document.getElementById('ros2Distributions');
+                    data.compatibility.ros2.distributions.forEach(dist => {
+                        const badge = document.createElement('span');
+                        badge.className = 'badge';
+                        badge.textContent = dist;
+                        distributionsDiv.appendChild(badge);
+                    });
+                    
+                    if (data.compatibility.ros2.recommended) {
+                        document.getElementById('ros2RecommendedContainer').classList.remove('hidden');
+                        document.getElementById('ros2Recommended').textContent = data.compatibility.ros2.recommended;
+                    }
+                }
+                
+                // Update tags
+                const tagsContainer = document.getElementById('tags');
+                data.tags.forEach(tag => {
+                    const badge = document.createElement('span');
+                    badge.className = 'tag';
+                    badge.textContent = tag;
+                    tagsContainer.appendChild(badge);
+                });
+                
+                // Handle assets
+                if (data.assets?.icon) {
+                    const iconImg = document.getElementById('repoIcon');
+                    iconImg.src = data.assets.icon;
+                    iconImg.classList.remove('hidden');
+                }
+                
+                if (data.assets?.banner) {
+                    const banner = document.getElementById('repoBanner');
+                    banner.src = data.assets.banner;
+                    banner.classList.remove('hidden');
+                }
+                
+                // Show content
+                document.getElementById('loading').classList.add('hidden');
+                document.getElementById('content').classList.remove('hidden');
+            } catch (error) {
+                console.error('Error loading repository data:', error);
+                document.getElementById('loading').textContent = 'Error loading repository data';
+            }
         }
-        
-        // Show content
-        document.getElementById('loading').classList.add('hidden');
-        document.getElementById('content').classList.remove('hidden');
-      } catch (error) {
-        console.error('Error loading repository data:', error);
-        document.getElementById('loading').textContent = 'Error loading repository data';
-      }
-    }
-  
-    // Load data when page loads
-    loadRepositoryData();
-  </script>
+
+        // Load data when page loads
+        loadRepositoryData();
+    </script>
 </body>
-</html>
\ No newline at end of file
+</html> 
\ No newline at end of file