grain.social is a photo sharing platform built on atproto.

update dark mode styles

Changed files
+7 -4
static
+4 -4
main.tsx
··· 1519 1519 /> 1520 1520 {!isCreator && photo.alt 1521 1521 ? ( 1522 - <div class="absolute bg-black/80 bottom-2 right-2 sm:bottom-0 sm:right-0 text-xs text-white font-semibold py-[1px] px-[3px]"> 1522 + <div class="absolute bg-zinc-950 dark:bg-zinc-900 bottom-2 right-2 sm:bottom-0 sm:right-0 text-xs text-white font-semibold py-[1px] px-[3px]"> 1523 1523 ALT 1524 1524 </div> 1525 1525 ) ··· 1662 1662 <button 1663 1663 type="button" 1664 1664 hx-delete={`/actions/photo/${new AtUri(uri).rkey}`} 1665 - class="bg-black/80 z-10 absolute top-0 right-0 cursor-pointer size-4 flex items-center justify-center" 1665 + class="bg-zinc-950 z-10 absolute top-2 right-2 cursor-pointer size-4 flex items-center justify-center" 1666 1666 _="on htmx:afterOnLoad remove me.parentNode" 1667 1667 > 1668 1668 <i class="fas fa-close text-white"></i> ··· 1685 1685 }: Readonly<{ galleryUri: string; cid: string }>) { 1686 1686 return ( 1687 1687 <div 1688 - class="bg-black/80 py-[1px] px-[3px] absolute top-2 left-2 sm:top-0 sm:left-0 cursor-pointer flex items-center justify-center text-xs text-white font-semibold z-10" 1688 + class="bg-zinc-950 dark:bg-zinc-900 py-[1px] px-[3px] absolute top-2 left-2 sm:top-0 sm:left-0 cursor-pointer flex items-center justify-center text-xs text-white font-semibold z-10" 1689 1689 hx-get={`/dialogs/image-alt?galleryUri=${galleryUri}&imageCid=${cid}`} 1690 1690 hx-trigger="click" 1691 1691 hx-target="#layout" ··· 1764 1764 <Dialog id="photo-alt-dialog" class="z-30"> 1765 1765 <Dialog.Content class="dark:bg-zinc-950"> 1766 1766 <Dialog.Title>Add alt text</Dialog.Title> 1767 - <div class="aspect-square relative bg-zinc-100 dark:bg-zinc-900"> 1767 + <div class="aspect-square relative"> 1768 1768 <img 1769 1769 src={photo.fullsize} 1770 1770 alt={photo.alt}
+3
static/styles.css
··· 427 427 .bg-zinc-200 { 428 428 background-color: var(--color-zinc-200); 429 429 } 430 + .bg-zinc-800 { 431 + background-color: var(--color-zinc-800); 432 + } 430 433 .bg-zinc-950 { 431 434 background-color: var(--color-zinc-950); 432 435 }