fix: pagination for darkmode (#507)

Author: shinokada

src/lib/paginations/Pagination.svelte

@@ -28,7 +28,9 @@
 <nav aria-label="Page navigation">
   <ul class={classNames(ulClass, table && 'divide-x divide-gray-700', $$props.class)}>
     <li>
-      <PaginationItem on:click={previous} class={table ? 'rounded-l' : 'rounded-l-lg'}>
+      <PaginationItem
+        on:click={previous}
+        class={classNames(normalClass, table ? 'rounded-l' : 'rounded-l-lg')}>
         <slot name="prev">Previous</slot>
       </PaginationItem>
     </li>
@@ -52,7 +54,7 @@
       </li>
     {/each}
     <li>
-      <PaginationItem on:click={next} class={table ? 'rounded-r' : 'rounded-r-lg'}>
+      <PaginationItem on:click={next} class={classNames(normalClass, table ? 'rounded-r' : 'rounded-r-lg')}>
         <slot name="next">Next</slot>
       </PaginationItem>
     </li>

src/lib/paginations/PaginationItem.svelte

@@ -5,7 +5,8 @@
   export let href: string | undefined = undefined;
   export let active: boolean = false;
   export let activeClass: string = '';
-  export let normalClass: string = '';
+  export let normalClass: string =
+    'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
 
   const group = getContext('group');
   const table = getContext('table');