fix(a11y): dark mode contrast

src/components/ProgressBar.vue

@@ -17,7 +17,7 @@ const percentStr = computed(() =>
 <template>
   <div class="inline-block bg-slate-500 rounded h-6 relative overflow-hidden">
     <div
-      class="bg-sborange-600 h-6 absolute"
+      class="bg-sborange-700 h-6 absolute"
       :style="{ width: percent + '%' }"
     ></div>
     <div class="font-bold text-white text-center relative z-10">

src/home/HomeNews.vue

@@ -30,7 +30,7 @@ function getDate(date: Date) {
       <article
         v-for="(item, i) in items"
         :key="i"
-        class="w-96 bg-white dark:bg-zinc-700 shadow p-2 px-3 my-2"
+        class="w-96 bg-white dark:bg-zinc-800 shadow p-2 px-3 my-2"
       >
         <header class="mb-2">
           <h3 class="font-bold">{{ th(item.title) }}</h3>

src/index.css

@@ -8,11 +8,11 @@
 
 body {
   @apply bg-gray-50 text-gray-900;
-  @apply dark:bg-zinc-800 dark:text-zinc-300;
+  @apply dark:bg-zinc-900 dark:text-zinc-200;
 }
 
 a {
-  @apply text-sborange-700 font-medium hover:brightness-110;
+  @apply text-sborange-700 dark:text-sborange-500 font-medium hover:brightness-110;
 }
 
 h1 {
@@ -37,13 +37,11 @@ thead {
   @apply uppercase text-sm;
 }
 
-table.striped tbody,
-.bg-white table.striped tbody tr:nth-child(2n) {
-  @apply bg-gray-100 dark:bg-zinc-700;
+table.striped tbody tr:nth-child(2n + 1) {
+  @apply bg-gray-100 dark:bg-zinc-800;
 }
-table.striped tbody tr:nth-child(2n),
-.bg-white table.striped tbody {
-  @apply bg-gray-50 dark:bg-zinc-800;
+table.striped tbody tr:nth-child(2n) {
+  @apply bg-gray-50 dark:bg-zinc-800 dark:bg-opacity-50;
 }
 
 table.striped th,
@@ -105,11 +103,11 @@ select {
 @layer components {
   .mink-button {
     @apply p-1 px-2 rounded shadow bg-zinc-100 shadow-zinc-400 text-gray-700 cursor-pointer font-medium hover:drop-shadow-md hover:brightness-110 transition-all;
-    @apply dark:bg-zinc-700 dark:text-zinc-300;
+    @apply dark:bg-zinc-800 dark:shadow-none dark:text-zinc-300;
   }
   .button-primary {
     @apply bg-sky-700 shadow-sky-900 text-white;
-    @apply dark:bg-sky-600 dark:text-sky-100;
+    @apply dark:text-sky-50;
   }
   .button-danger {
     @apply bg-red-600 shadow-red-700 text-white;
@@ -120,6 +118,7 @@ select {
   }
   .button-warning {
     @apply bg-amber-300 shadow-amber-600 text-amber-900;
+    @apply dark:bg-amber-700 shadow-amber-800 text-white;
   }
 
   .mink-button[disabled],

src/page/AppHeader.vue

@@ -17,7 +17,7 @@ const { isAuthenticating, payload, canUserWrite } = useAuth();
 
 <template>
   <header
-    class="mb-2 shadow bg-white text-gray-600 dark:bg-zinc-700 dark:text-zinc-400"
+    class="mb-2 shadow bg-white text-gray-600 dark:bg-zinc-800 dark:text-zinc-200"
   >
     <div class="container py-4 flex justify-between flex-wrap gap-4">
       <div class="text-4xl">

tailwind.config.ts

@@ -14,6 +14,7 @@ export default <Config>{
           800: "#7a2807",
           700: "#c6410b",
           600: "#f2581a",
+          500: "#F46D37",
           100: "#f2dbd1",
         },
         sbteal: {