breadcrumbs dark mode

fixes #26
This commit is contained in:
Cat /dev/Nulo 2023-08-31 09:50:03 -03:00
parent 2d0929c1fc
commit 838e3323ce

View file

@ -47,23 +47,25 @@
<!-- https://devdojo.com/pines/docs/breadcrumbs -->
<div
class="flex justify-between overflow-x-auto rounded-md border border-neutral-200/60 px-3.5 py-1"
class="flex justify-between overflow-x-auto rounded-md border border-neutral-200/60 px-3.5 py-1 dark:border-neutral-700"
bind:this={breadcrumbsEl}
>
<ol
class="inline-flex items-center space-x-1 text-xs text-neutral-500 sm:mb-0 [&_.active-breadcrumb]:font-medium [&_.active-breadcrumb]:text-neutral-600"
class="inline-flex items-center space-x-1 text-xs text-neutral-500 dark:text-neutral-300 sm:mb-0 [&_.active-breadcrumb]:font-medium [&_.active-breadcrumb]:text-neutral-600 dark:[&_.active-breadcrumb]:text-neutral-200"
>
{#each $pageBreadcrumbs as crumb, index}
<li>
<a
href={inject(routes.Page, { worldId, pageId: crumb })}
class="inline-flex items-center text-ellipsis whitespace-nowrap py-1 font-normal hover:text-neutral-900 focus:outline-none"
class="font-norma inline-flex items-center text-ellipsis whitespace-nowrap py-1 focus:outline-none"
class:active-breadcrumb={crumb === pageId}
>{$crumbsTitles[index] || crumb}</a
>
</li>
{#if index !== $pageBreadcrumbs.length - 1}
<ChevronRight class="h-5 w-5 fill-current text-gray-400/70" />
<ChevronRight
class="h-5 w-5 fill-current text-gray-400/70 dark:text-gray-500"
/>
{/if}
{/each}
</ol>