Update dark mode colors

Author: Alex Krawiec

src/components/changelog/docsChangelog.tsx

@@ -34,7 +34,7 @@ export async function DocsChangelog() {
 
   if (entries.length === 0) {
     return (
-      <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4 text-yellow-800">
+      <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-200">
         <p className="font-semibold">No changelog entries available</p>
         <p className="text-sm">Check back later for updates.</p>
       </div>
@@ -85,16 +85,16 @@ export async function DocsChangelog() {
 
             {entry.filesChanged && totalFiles > 0 && (
               <details className="text-sm">
-                <summary className="cursor-pointer text-gray-600 hover:text-gray-800">
+                <summary className="cursor-pointer text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
                   View changed files
                 </summary>
-                <div className="mt-2 space-y-2 rounded-md bg-gray-50 p-3">
+                <div className="mt-2 space-y-2 rounded-md bg-gray-50 p-3 dark:bg-gray-800">
                   {entry.filesChanged.added && entry.filesChanged.added.length > 0 && (
                     <div>
-                      <span className="font-semibold text-green-700">Added:</span>
+                      <span className="font-semibold text-green-700 dark:text-green-400">Added:</span>
                       <ul className="ml-4 mt-1 list-inside list-disc">
                         {entry.filesChanged.added.map(file => (
-                          <li key={file} className="text-gray-700">
+                          <li key={file} className="text-gray-700 dark:text-gray-300">
                             {file}
                           </li>
                         ))}
@@ -103,10 +103,10 @@ export async function DocsChangelog() {
                   )}
                   {entry.filesChanged.modified && entry.filesChanged.modified.length > 0 && (
                     <div>
-                      <span className="font-semibold text-blue-700">Modified:</span>
+                      <span className="font-semibold text-blue-700 dark:text-blue-400">Modified:</span>
                       <ul className="ml-4 mt-1 list-inside list-disc">
                         {entry.filesChanged.modified.map(file => (
-                          <li key={file} className="text-gray-700">
+                          <li key={file} className="text-gray-700 dark:text-gray-300">
                             {file}
                           </li>
                         ))}
@@ -115,10 +115,10 @@ export async function DocsChangelog() {
                   )}
                   {entry.filesChanged.removed && entry.filesChanged.removed.length > 0 && (
                     <div>
-                      <span className="font-semibold text-red-700">Removed:</span>
+                      <span className="font-semibold text-red-700 dark:text-red-400">Removed:</span>
                       <ul className="ml-4 mt-1 list-inside list-disc">
                         {entry.filesChanged.removed.map(file => (
-                          <li key={file} className="text-gray-700">
+                          <li key={file} className="text-gray-700 dark:text-gray-300">
                             {file}
                           </li>
                         ))}