wip: dark mode - light mode

src/shared/composer/modal.tsx

@@ -28,10 +28,10 @@ export function ComposerModal() {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="flex h-9 items-center gap-2 rounded-full border-t border-white/10 bg-white/20 px-4 text-sm font-semibold text-white/80 hover:bg-fuchsia-500 hover:text-white"
+          className="flex h-9 items-center gap-2 rounded-full bg-zinc-200 px-4 text-sm font-semibold text-zinc-900  hover:bg-interor-600 hover:text-white dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-interor-600"
         >
           New
-          <ComposeIcon className="h-4 w-4 text-white" />
+          <ComposeIcon className="h-4 w-4" />
         </button>
       </Dialog.Trigger>
       <Dialog.Portal>

src/shared/layouts/app.tsx

@@ -1,20 +1,24 @@
 import { Outlet, ScrollRestoration } from 'react-router-dom';
+import { WindowTitlebar } from 'tauri-controls';
 
 import { Navigation } from '@shared/navigation';
 
 export function AppLayout() {
   return (
-    <div className="flex h-screen w-screen">
-      <div className="shrink-0">
-        <Navigation />
-      </div>
-      <div className="h-full w-full flex-1">
-        <Outlet />
-        <ScrollRestoration
-          getKey={(location) => {
-            return location.pathname;
-          }}
-        />
+    <div className="h-screen w-screen bg-zinc-50 text-zinc-50 dark:bg-zinc-950 dark:text-zinc-950">
+      <WindowTitlebar className="border-b border-zinc-200 dark:border-zinc-800" />
+      <div className="flex h-full">
+        <div className="h-full shrink-0">
+          <Navigation />
+        </div>
+        <div className="h-full flex-1">
+          <Outlet />
+          <ScrollRestoration
+            getKey={(location) => {
+              return location.pathname;
+            }}
+          />
+        </div>
       </div>
     </div>
   );

src/shared/layouts/auth.tsx

@@ -1,10 +1,13 @@
 import { Outlet } from 'react-router-dom';
+import { WindowTitlebar } from 'tauri-controls';
 
 export function AuthLayout() {
   return (
-    <div className="relative h-screen w-screen">
-      <div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
-      <Outlet />
+    <div className="relative h-screen w-screen bg-zinc-50 dark:bg-zinc-950">
+      <WindowTitlebar className="border-b border-zinc-200 dark:border-zinc-800" />
+      <div className="bg-zinc-100 dark:bg-zinc-900">
+        <Outlet />
+      </div>
     </div>
   );
 }

src/shared/navigation.tsx

@@ -20,28 +20,23 @@ export function Navigation() {
   const navigate = useNavigate();
 
   return (
-    <div className="relative flex h-full w-[232px] flex-col border-r border-white/5">
+    <div className="relative flex h-full w-[232px] flex-col border-r border-zinc-200 dark:border-zinc-800">
       <div
         data-tauri-drag-region
         className="inline-flex h-16 w-full items-center justify-between px-3"
       >
-        <div
-          className={twMerge(
-            'inline-flex items-center gap-4',
-            db.platform === 'darwin' ? 'pl-20' : 'pl-2'
-          )}
-        >
+        <div className="inline-flex items-center gap-4 pl-2">
           <button
             type="button"
             onClick={() => navigate(-1)}
-            className="inline-flex h-9 items-center justify-center text-white/50 hover:text-white"
+            className="inline-flex h-9 items-center justify-center text-zinc-400 hover:text-zinc-500 dark:text-zinc-500 dark:hover:text-zinc-100"
           >
             <ArrowLeftIcon className="h-5 w-5" />
           </button>
           <button
             type="button"
             onClick={() => navigate(1)}
-            className="inline-flex h-9 items-center justify-center text-white/50 hover:text-white"
+            className="inline-flex h-9 items-center justify-center text-zinc-400 hover:text-zinc-500 dark:text-zinc-500 dark:hover:text-zinc-100"
           >
             <ArrowRightIcon className="h-5 w-5" />
           </button>
@@ -60,8 +55,8 @@ export function Navigation() {
               twMerge(
                 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
                 isActive
-                  ? 'border-fuchsia-500 bg-white/5 text-white'
-                  : 'border-transparent text-white/70'
+                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
+                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
               )
             }
           >
@@ -77,8 +72,8 @@ export function Navigation() {
               twMerge(
                 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
                 isActive
-                  ? 'border-fuchsia-500 bg-white/5 text-white'
-                  : 'border-transparent text-white/70'
+                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
+                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
               )
             }
           >
@@ -94,8 +89,8 @@ export function Navigation() {
               twMerge(
                 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
                 isActive
-                  ? 'border-fuchsia-500 bg-white/5 text-white'
-                  : 'border-transparent text-white/70'
+                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
+                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
               )
             }
           >
@@ -111,8 +106,8 @@ export function Navigation() {
               twMerge(
                 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
                 isActive
-                  ? 'border-fuchsia-500 bg-white/5 text-white'
-                  : 'border-transparent text-white/70'
+                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
+                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
               )
             }
           >
@@ -128,8 +123,8 @@ export function Navigation() {
               twMerge(
                 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
                 isActive
-                  ? 'border-fuchsia-500 bg-white/5 text-white'
-                  : 'border-transparent text-white/70'
+                  ? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
+                  : 'border-transparent text-zinc-500 dark:text-zinc-500'
               )
             }
           >

src/shared/notes/child.tsx

@@ -81,7 +81,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
       <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.6rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
       <div className="mb-6 flex flex-col">
         <User pubkey={data.pubkey} time={data.created_at} />
-        <div className="-mt-5 flex items-start gap-3">
+        <div className="-mt-4 flex items-start gap-3">
           <div className="w-10 shrink-0" />
           <div className="relative z-20 flex-1">
             {renderKind(data)}

src/shared/notes/kinds/repost.tsx

@@ -65,13 +65,13 @@ export function Repost({
         <div
           className={twMerge(
             'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
-            !lighter ? 'bg-white/10 backdrop-blur-xl' : ''
+            !lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
           )}
         >
           <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
           <div className="relative flex flex-col">
             <User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
-            <div className="-mt-5 flex items-start gap-3">
+            <div className="-mt-4 flex items-start gap-3">
               <div className="w-10 shrink-0" />
               <div className="relative z-20 flex-1">
                 {renderKind(embedEvent)}
@@ -104,7 +104,7 @@ export function Repost({
         <div
           className={twMerge(
             'relative overflow-hidden rounded-xl px-3 py-3',
-            !lighter ? 'bg-white/10 backdrop-blur-xl' : ''
+            !lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
           )}
         >
           <div className="relative flex flex-col">
@@ -116,7 +116,7 @@ export function Repost({
                 Lume <span className="text-green-500">(System)</span>
               </h5>
             </div>
-            <div className="-mt-6 flex items-start gap-3">
+            <div className="-mt-4 flex items-start gap-3">
               <div className="w-11 shrink-0" />
               <div>
                 <div className="relative z-20 mt-1 flex-1 select-text">
@@ -142,13 +142,13 @@ export function Repost({
       <div
         className={twMerge(
           'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
-          !lighter ? 'bg-white/10 backdrop-blur-xl' : ''
+          !lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
         )}
       >
         <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
         <div className="relative flex flex-col">
           <User pubkey={data.pubkey} time={data.created_at} />
-          <div className="-mt-5 flex items-start gap-3">
+          <div className="-mt-4 flex items-start gap-3">
             <div className="w-10 shrink-0" />
             <div className="relative z-20 flex-1">
               {renderKind(data)}

src/shared/notes/kinds/text.tsx

@@ -36,14 +36,14 @@ export function TextNote(props: { content?: string }) {
   return (
     <div>
       <ReactMarkdown
-        className="markdown"
+        className="prose prose-zinc max-w-none select-text dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-interor-500 hover:prose-a:text-interor-600 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-interor-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2"
         remarkPlugins={[remarkGfm]}
         components={{
           a: ({ href }) => {
             const cleanURL = new URL(href);
             cleanURL.search = '';
             return (
-              <Link to={href} target="_blank" className="line-clamp-1">
+              <Link to={href} target="_blank" className="line-clamp-1 w-full break-all">
                 {cleanURL.hostname + cleanURL.pathname}
               </Link>
             );

src/shared/notes/mentions/hashtag.tsx

@@ -24,7 +24,7 @@ export function Hashtag({ tag }: { tag: string }) {
           content: tag.replace('#', ''),
         })
       }
-      className="break-all text-fuchsia-400 hover:text-fuchsia-500"
+      className="break-all text-interor-500 hover:text-interor-600"
     >
       {tag}
     </span>

src/shared/notes/mentions/user.tsx

@@ -30,7 +30,7 @@ export const MentionUser = memo(function MentionUser({ pubkey }: { pubkey: strin
           content: pubkey,
         })
       }
-      className="break-words text-fuchsia-400 hover:text-fuchsia-500"
+      className="break-words text-interor-500 hover:text-interor-600"
     >
       {'@' +
         (user?.name ||

src/shared/notes/preview/image.tsx

@@ -17,7 +17,7 @@ export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: bo
           <div key={url} className="group relative min-w-0 shrink-0 grow-0 basis-full">
             <img
               src={url}
-              alt={url}
+              alt="image"
               className={`${
                 truncate ? 'h-auto max-h-[300px]' : 'h-auto'
               } w-full rounded-lg border border-white/10 object-cover`}

src/shared/notes/preview/video.tsx

@@ -21,7 +21,7 @@ export function VideoPreview({ urls }: { urls: string[] }) {
           <MediaProvider>
             <Poster
               className="vds-poster"
-              src="https://thumbnail.video/api/get?url=${url}&seconds=1"
+              src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
               alt={url}
             />
           </MediaProvider>

src/shared/notes/wrapper.tsx

@@ -24,14 +24,14 @@ export function NoteWrapper({
       <div
         className={twMerge(
           'relative overflow-hidden rounded-xl px-3 py-4',
-          !lighter ? 'bg-white/10 backdrop-blur-xl' : 'bg-transparent'
+          !lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent'
         )}
       >
         <div className="relative">{root && <ChildNote id={root} />}</div>
         <div className="relative">{reply && <ChildNote id={reply} root={root} />}</div>
         <div className="relative flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
-          <div className="-mt-5 flex items-start gap-3">
+          <div className="-mt-4 flex items-start gap-3">
             <div className="w-10 shrink-0" />
             <div className="relative z-20 flex-1">
               {cloneElement(

src/shared/titleBar.tsx

@@ -14,14 +14,14 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
       className="flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3"
     >
       <div className="w-6" />
-      <h3 className="text-sm font-bold text-white">{title}</h3>
+      <h3 className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{title}</h3>
       {id ? (
         <button
           type="button"
           onClick={() => remove(db, id)}
-          className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
+          className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-zinc-900 backdrop-blur-xl hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-zinc-900"
         >
-          <CancelIcon className="h-3 w-3 text-white" />
+          <CancelIcon className="h-3 w-3" />
         </button>
       ) : (
         <div className="w-6" />