wip: ui

2024-09-14 09:13:31 +00:00 · 2023-10-08 09:31:11 +07:00 · 2023-10-08 09:31:11 +07:00 · bce76bd41c
commit bce76bd41c
parent cb91373d33
66 changed files with 216 additions and 214 deletions
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lume</title>
  </head>
-  <body class="relative cursor-default bg-black select-none overflow-hidden font-sans antialiased h-screen w-screen text-white">
+  <body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen">
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@ -17,7 +17,6 @@ tauri-build = { version = "2.0.0-alpha.8", features = [] }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 tauri = { version = "2.0.0-alpha", features = [
-  "macos-private-api",
  "native-tls-vendored",
 ] }
 tauri-plugin-app = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@ -82,7 +82,6 @@
        "timestampUrl": ""
      }
    },
-    "macOSPrivateApi": true,
    "security": {
      "dangerousRemoteDomainIpcAccess": [
        {
--- a/src-tauri/tauri.macos.conf.json
+++ b/src-tauri/tauri.macos.conf.json
@ -23,7 +23,7 @@
        "theme": "Dark",
        "title": "Lume",
        "titleBarStyle": "Overlay",
-        "transparent": true,
+        "transparent": false,
        "center": true,
        "fullscreen": false,
        "hiddenTitle": true,
--- a/src-tauri/tauri.windows.conf.json
+++ b/src-tauri/tauri.windows.conf.json
@ -21,12 +21,15 @@
        "resizable": true,
        "theme": "Dark",
        "title": "Lume",
-        "transparent": false,
        "center": true,
        "fullscreen": false,
        "hiddenTitle": true,
        "visible": false,
-        "fileDropEnabled": true
+        "fileDropEnabled": true,
+        "transparent": true,
+        "windowEffects": {
+          "effects": ["mica"]
+        }
      }
    ]
  }
--- a/src/app.css
+++ b/src/app.css
@ -49,18 +49,6 @@ input::-ms-clear {
  scrollbar-width: none;
 }

-.markdown {
-  @apply prose prose-white max-w-none select-text text-white 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 hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-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;
-}
-
-.markdown-article {
-  @apply prose prose-white max-w-none select-text text-white/80 prose-headings:mb-1 prose-headings:mt-3 prose-headings:text-white prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-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;
-}
-
-.markdown-simple {
-  @apply prose prose-white max-w-none select-text hyphens-auto text-white/70 prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-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;
-}
-
 .ProseMirror p.is-empty::before {
  @apply text-white/50;
  content: attr(data-placeholder);
--- a/src/app/auth/create/step-1.tsx
+++ b/src/app/auth/create/step-1.tsx
@ -1,7 +1,7 @@
+import { downloadDir } from '@tauri-apps/api/path';
 import { writeText } from '@tauri-apps/plugin-clipboard-manager';
 import { message, save } from '@tauri-apps/plugin-dialog';
 import { writeTextFile } from '@tauri-apps/plugin-fs';
-import { downloadDir } from '@tauri-apps/api/path';
 import { generatePrivateKey, getPublicKey, nip19 } from 'nostr-tools';
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@ -132,7 +132,7 @@ export function CreateStep1Screen() {
          <button
            type="button"
            onClick={() => download()}
-            className="inline-flex h-12 w-full items-center justify-center rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+            className="inline-flex h-12 w-full items-center justify-center rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
          >
            {downloaded ? 'Downloaded' : 'Download account keys'}
          </button>
--- a/src/app/auth/create/step-2.tsx
+++ b/src/app/auth/create/step-2.tsx
@ -127,7 +127,7 @@ export function CreateStep2Screen() {
            <button
              type="submit"
              disabled={!isDirty || !isValid}
-              className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+              className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
            >
              {loading ? (
                <>
--- a/src/app/auth/create/step-3.tsx
+++ b/src/app/auth/create/step-3.tsx
@ -150,7 +150,7 @@ export function CreateStep3Screen() {
            <button
              type="submit"
              disabled={!isDirty || !isValid}
-              className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+              className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
            >
              {loading ? (
                <>
--- a/src/app/auth/import/step-1.tsx
+++ b/src/app/auth/import/step-1.tsx
@ -133,7 +133,7 @@ export function ImportStep1Screen() {
            <button
              type="submit"
              disabled={!isDirty || !isValid}
-              className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+              className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
            >
              {loading ? (
                <>
--- a/src/app/auth/import/step-2.tsx
+++ b/src/app/auth/import/step-2.tsx
@ -127,7 +127,7 @@ export function ImportStep2Screen() {
            <button
              type="submit"
              disabled={!isDirty || !isValid}
-              className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+              className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
            >
              {loading ? (
                <>
--- a/src/app/auth/import/step-3.tsx
+++ b/src/app/auth/import/step-3.tsx
@ -62,7 +62,7 @@ export function ImportStep3Screen() {
        <div className="flex flex-col gap-2">
          <button
            type="button"
-            className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+            className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
            onClick={() => submit()}
          >
            {loading ? (
--- a/src/app/auth/migrate.tsx
+++ b/src/app/auth/migrate.tsx
@ -157,7 +157,7 @@ export function MigrateScreen() {
                <button
                  type="submit"
                  disabled={!isDirty || !isValid}
-                  className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50"
+                  className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-md bg-interor-500 font-medium text-white hover:bg-interor-600 disabled:pointer-events-none disabled:opacity-50"
                >
                  {loading ? (
                    <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
--- a/src/app/auth/onboarding/step-1.tsx
+++ b/src/app/auth/onboarding/step-1.tsx
@ -109,7 +109,7 @@ export function OnboardStep1Screen() {
            type="button"
            onClick={submit}
            disabled={loading || follows.length === 0}
-            className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
+            className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
          >
            {loading ? (
              <>
--- a/src/app/auth/onboarding/step-2.tsx
+++ b/src/app/auth/onboarding/step-2.tsx
@ -123,7 +123,7 @@ export function OnboardStep2Screen() {
            type="button"
            onClick={submit}
            disabled={loading || tags.size === 0 || tags.size > 3}
-            className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
+            className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
          >
            {loading ? (
              <>
--- a/src/app/auth/onboarding/step-3.tsx
+++ b/src/app/auth/onboarding/step-3.tsx
@ -158,7 +158,7 @@ export function OnboardStep3Screen() {
            type="button"
            disabled={loading}
            onClick={() => submit()}
-            className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
+            className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
          >
            {loading ? (
              <>
--- a/src/app/auth/reset.tsx
+++ b/src/app/auth/reset.tsx
@ -159,7 +159,7 @@ export function ResetScreen() {
            <button
              type="submit"
              disabled={!isDirty || !isValid}
-              className="inline-flex h-12 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50"
+              className="inline-flex h-12 w-full items-center justify-center rounded-md bg-interor-500 font-medium text-white hover:bg-interor-600 disabled:pointer-events-none disabled:opacity-50"
            >
              {loading ? (
                <LoaderIcon className="h-4 w-4 animate-spin text-white" />
--- a/src/app/auth/unlock.tsx
+++ b/src/app/auth/unlock.tsx
@ -100,7 +100,7 @@ export function UnlockScreen() {
            <button
              type="button"
              onClick={() => setShowPassword((prev) => !prev)}
-              className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded-full p-1 backdrop-blur-xl hover:bg-black/10 dark:hover:bg-white/10"
+              className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded-lg p-1 backdrop-blur-xl hover:bg-black/10 dark:hover:bg-white/10"
            >
              {showPassword ? (
                <EyeOffIcon className="group-hover:text-dark h-5 w-5 text-black/50 dark:text-white/50 dark:group-hover:text-white" />
--- a/src/app/auth/welcome.tsx
+++ b/src/app/auth/welcome.tsx
@ -16,7 +16,7 @@ export function WelcomeScreen() {
        <div className="inline-flex w-full flex-col items-center gap-3 px-4 pb-10">
          <Link
            to="/auth/import"
-            className="inline-flex h-12 w-3/4 items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-fuchsia-500 px-4 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+            className="inline-flex h-12 w-3/4 items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-4 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
          >
            <span className="w-5" />
            <span>Login with private key</span>
--- a/src/app/chats/chat.tsx
+++ b/src/app/chats/chat.tsx
@ -71,23 +71,25 @@ export function ChatScreen() {

  return (
    <div className="h-full w-full p-3">
-      <div className="rounded-lg border-t border-white/5 bg-white/10 backdrop-blur-xl">
+      <div className="rounded-lg bg-zinc-100 backdrop-blur-xl dark:bg-zinc-900">
        <div className="flex h-full flex-col justify-between overflow-hidden">
-          <div className="flex h-16 shrink-0 items-center border-b border-white/10 px-3">
+          <div className="flex h-16 shrink-0 items-center border-b border-zinc-200 px-3 dark:border-zinc-800">
            <User pubkey={pubkey} variant="simple" />
          </div>
          <div className="h-full w-full flex-1 px-3 py-3">
            {status === 'loading' ? (
              <div className="flex h-full w-full items-center justify-center">
                <div className="flex flex-col items-center gap-1.5">
-                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-                  <p className="text-sm font-medium text-white/50">Loading messages</p>
+                  <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
+                  <p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
+                    Loading messages
+                  </p>
                </div>
              </div>
            ) : data.length === 0 ? (
              <div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center">
                <h3 className="mb-2 text-4xl">🙌</h3>
-                <p className="leading-none text-white/50">
+                <p className="leading-none text-zinc-500 dark:text-zinc-300">
                  You two didn&apos;t talk yet, let&apos;s send first message
                </p>
              </div>
@ -97,7 +99,7 @@ export function ChatScreen() {
              </VList>
            )}
          </div>
-          <div className="z-50 shrink-0 rounded-b-lg border-t border-white/5 bg-white/10 p-3 backdrop-blur-xl">
+          <div className="shrink-0 rounded-b-lg border-t border-zinc-300 bg-zinc-200 p-3 backdrop-blur-xl dark:border-zinc-700 dark:bg-zinc-800">
            <ChatForm
              receiverPubkey={pubkey}
              userPubkey={db.account.pubkey}
--- a/src/app/chats/components/chatForm.tsx
+++ b/src/app/chats/components/chatForm.tsx
@ -47,7 +47,7 @@ export function ChatForm({
  return (
    <div className="flex items-center gap-2">
      <MediaUploader setState={setValue} />
-      <div className="flex w-full items-center justify-between rounded-full bg-white/20 px-3">
+      <div className="flex w-full items-center justify-between rounded-full bg-zinc-300 px-3 dark:bg-zinc-700">
        <input
          value={value}
          onChange={(e) => setValue(e.target.value)}
@ -57,12 +57,12 @@ export function ChatForm({
          autoCorrect="off"
          autoCapitalize="off"
          placeholder="Message"
-          className="h-10 flex-1 resize-none bg-transparent px-3 text-white placeholder:text-white/80 focus:outline-none"
+          className="h-10 flex-1 resize-none bg-transparent px-3 text-zinc-900 placeholder:text-zinc-500 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-300"
        />
        <button
          type="button"
          onClick={submit}
-          className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-white/80"
+          className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-zinc-500 dark:text-zinc-300"
        >
          <EnterIcon className="h-5 w-5" />
          Send
--- a/src/app/chats/components/chatListItem.tsx
+++ b/src/app/chats/components/chatListItem.tsx
@ -44,10 +44,10 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
      preventScrollReset={true}
      className={({ isActive }) =>
        twMerge(
-          'flex items-center gap-2.5 px-3 py-1.5 hover:bg-white/10',
+          'flex items-center gap-2.5 px-3 py-1.5 hover:bg-zinc-200 dark:hover:bg-zinc-800',
          isActive
-            ? 'border-fuchsia-500 bg-white/5 text-white'
-            : 'border-transparent text-white/70'
+            ? 'bg-zinc-200 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100'
+            : 'text-zinc-500 dark:text-zinc-300'
        )
      }
    >
@ -64,22 +64,20 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
          <img
            src={svgURI}
            alt={event.pubkey}
-            className="h-10 w-10 rounded-lg bg-white"
+            className="h-10 w-10 rounded-lg bg-black dark:bg-white"
          />
        </Avatar.Fallback>
      </Avatar.Root>
      <div className="flex w-full flex-col">
-        <div className="max-w-[10rem] truncate font-semibold text-white">
+        <div className="max-w-[10rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
          {user?.name ||
            user?.display_name ||
            user?.displayName ||
            displayNpub(event.pubkey, 16)}
        </div>
        <div className="flex w-full items-center justify-between">
-          <div className="max-w-[10rem] truncate text-sm text-white/70">
-            {decryptedContent}
-          </div>
-          <div className="text-sm text-white/70">{createdAt}</div>
+          <div className="max-w-[10rem] truncate text-sm">{decryptedContent}</div>
+          <div className="text-sm">{createdAt}</div>
        </div>
      </div>
    </NavLink>
--- a/src/app/chats/components/mediaUploader.tsx
+++ b/src/app/chats/components/mediaUploader.tsx
@ -29,7 +29,7 @@ export function MediaUploader({
          <button
            type="button"
            onClick={() => uploadMedia()}
-            className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-white backdrop-blur-xl hover:bg-white/20"
+            className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-zinc-300 text-zinc-500 hover:bg-zinc-400 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600"
          >
            {loading ? (
              <LoaderIcon className="h-4 w-4 animate-spin" />
--- a/src/app/chats/components/message.tsx
+++ b/src/app/chats/components/message.tsx
@ -25,14 +25,16 @@ export function ChatMessage({
    <div
      className={twMerge(
        'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
-        self ? 'ml-auto rounded-l-xl bg-fuchsia-500' : 'rounded-r-xl bg-white/10'
+        self
+          ? 'ml-auto rounded-l-xl bg-interor-500'
+          : 'rounded-r-xl bg-zinc-200 dark:bg-zinc-800'
      )}
    >
      {!richContent ? (
-        <p>Decrypting...</p>
+        <p className="text-zinc-900 dark:text-zinc-100">Decrypting...</p>
      ) : (
        <div>
-          <p className="select-text whitespace-pre-line text-white">
+          <p className="select-text whitespace-pre-line text-zinc-900 dark:text-zinc-100">
            {richContent.parsed}
          </p>
          <div>
--- a/src/app/explore/components/userGroupNode.tsx
+++ b/src/app/explore/components/userGroupNode.tsx
@ -18,7 +18,7 @@ export function UserGroupNode({ data }) {
        ) : (
          <GroupTitle pubkey={data.pubkey} />
        )}
-        <div className="grid grid-cols-5 gap-6 rounded-lg border border-fuchsia-500/50 bg-fuchsia-500/10 p-4">
+        <div className="grid grid-cols-5 gap-6 rounded-lg border border-fuchsia-500/50 bg-interor-500/10 p-4">
          {data.list.map((user: string) => (
            <UserWithDrawer key={user} pubkey={user} />
          ))}
--- a/src/app/explore/components/userWithDrawer.tsx
+++ b/src/app/explore/components/userWithDrawer.tsx
@ -97,7 +97,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
                        <button
                          type="button"
                          onClick={() => unfollowUser(pubkey)}
-                          className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+                          className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
                        >
                          Unfollow
                        </button>
@ -105,14 +105,14 @@ export const UserWithDrawer = memo(function UserWithDrawer({
                        <button
                          type="button"
                          onClick={() => followUser(pubkey)}
-                          className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+                          className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
                        >
                          Follow
                        </button>
                      )}
                      <Link
                        to={`/chats/${pubkey}`}
-                        className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+                        className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
                      >
                        Message
                      </Link>
--- a/src/app/nwc/components/alby.tsx
+++ b/src/app/nwc/components/alby.tsx
@ -121,7 +121,7 @@ export function NWCAlby() {
              <button
                type="button"
                onClick={() => initAlby()}
-                className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
+                className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
              >
                {isLoading ? (
                  <>
--- a/src/app/nwc/components/other.tsx
+++ b/src/app/nwc/components/other.tsx
@ -139,7 +139,7 @@ export function NWCOther() {
                <button
                  type="submit"
                  disabled={!isDirty || !isValid}
-                  className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
+                  className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
                >
                  {isLoading ? (
                    <>
--- a/src/app/relays/components/relayForm.tsx
+++ b/src/app/relays/components/relayForm.tsx
@ -40,9 +40,9 @@ export function RelayForm() {

  return (
    <div className="flex flex-col gap-1">
-      <div className="flex h-10 items-center justify-between rounded-lg bg-white/10 pr-1.5">
+      <div className="flex h-10 items-center justify-between rounded-lg bg-zinc-200 pr-1.5 dark:bg-zinc-800">
        <input
-          className="h-full w-full bg-transparent pl-3 pr-1.5 placeholder:text-white/70 focus:outline-none"
+          className="h-full w-full bg-transparent pl-3 pr-1.5 text-zinc-900 placeholder:text-zinc-600 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-400"
          type="url"
          placeholder="wss://"
          spellCheck={false}
@ -55,7 +55,7 @@ export function RelayForm() {
        <button
          type="button"
          onClick={() => createRelay()}
-          className="inline-flex h-6 w-6 items-center justify-center rounded bg-fuchsia-500 text-white hover:bg-fuchsia-600"
+          className="inline-flex h-6 w-6 items-center justify-center rounded bg-interor-500 text-white hover:bg-interor-600"
        >
          <PlusIcon className="h-4 w-4" />
        </button>
--- a/src/app/relays/components/relayList.tsx
+++ b/src/app/relays/components/relayList.tsx
@ -44,17 +44,17 @@ export function RelayList() {
  };

  return (
-    <div className="col-span-2 border-r border-white/5">
+    <div className="col-span-2 border-r border-zinc-100 dark:border-zinc-900">
      {status === 'loading' ? (
        <div className="flex h-full w-full items-center justify-center pb-10">
          <div className="inline-flex flex-col items-center justify-center gap-2">
-            <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+            <LoaderIcon className="h-5 w-5 animate-spin text-zinc-100 dark:text-zinc-900" />
            <p>Loading relay...</p>
          </div>
        </div>
      ) : (
        <VList className="scrollbar-hide mt-20 h-full">
-          <div className="inline-flex h-16 w-full items-center border-b border-white/5 px-3">
+          <div className="inline-flex h-16 w-full items-center border-b border-zinc-100 px-3 dark:border-zinc-900">
            <h3 className="bg-gradient-to-r from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
              All relays used by your follows
            </h3>
@ -62,14 +62,14 @@ export function RelayList() {
          {[...data].map(([key, value]) => (
            <div
              key={key}
-              className="flex h-14 w-full items-center justify-between border-b border-white/5 px-3"
+              className="flex h-14 w-full items-center justify-between border-b border-zinc-100 px-3 dark:border-zinc-900"
            >
-              <div className="inline-flex items-center gap-2 divide-x divide-white/10">
+              <div className="inline-flex items-center gap-2 divide-x divide-zinc-100 dark:divide-zinc-900">
                <div className="inline-flex items-center gap-2">
                  <button
                    type="button"
                    onClick={() => inspectRelay(key)}
-                    className="inline-flex h-6 items-center justify-center gap-1 rounded bg-white/10 px-1.5 text-sm font-medium hover:bg-white/20"
+                    className="inline-flex h-6 items-center justify-center gap-1 rounded bg-zinc-200 px-1.5 text-sm font-medium text-zinc-900 hover:bg-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
                  >
                    <ShareIcon className="h-3 w-3" />
                    Inspect
@ -77,14 +77,16 @@ export function RelayList() {
                  <button
                    type="button"
                    onClick={() => connectRelay(key)}
-                    className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/10"
+                    className="inline-flex h-6 w-6 items-center justify-center rounded text-zinc-100 hover:bg-zinc-200 dark:text-zinc-100 dark:hover:bg-zinc-800"
                  >
                    <PlusIcon className="h-3 w-3" />
                  </button>
                </div>
                <div className="inline-flex items-center gap-2 pl-3">
-                  <span className="text-sm font-semibold text-white/70">Relay: </span>
-                  <span className="max-w-[200px] truncate text-sm font-medium text-white">
+                  <span className="text-sm font-semibold text-zinc-500 dark:text-zinc-400">
+                    Relay:{' '}
+                  </span>
+                  <span className="max-w-[200px] truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
                    {key}
                  </span>
                </div>
@ -94,8 +96,8 @@ export function RelayList() {
                  <User key={item} pubkey={item} variant="stacked" />
                ))}
                {value.length > 4 ? (
-                  <div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-black/80 ring-1 ring-white/10 backdrop-blur-xl">
-                    <span className="text-xs font-semibold">+{value.length}</span>
+                  <div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-zinc-200 text-zinc-900 ring-1 ring-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700">
+                    <span className="text-xs font-medium">+{value.length}</span>
                  </div>
                ) : null}
              </div>
--- a/src/app/relays/components/userRelay.tsx
+++ b/src/app/relays/components/userRelay.tsx
@ -34,7 +34,7 @@ export function UserRelay() {
          {data.map((item) => (
            <div
              key={item}
-              className="group flex h-10 items-center justify-between rounded-lg bg-white/10 pl-3 pr-1.5"
+              className="group flex h-10 items-center justify-between rounded-lg bg-zinc-200 pl-3 pr-1.5 dark:bg-zinc-800"
            >
              <div className="inline-flex items-center gap-2.5">
                {relayUrls.includes(item) ? (
@ -48,16 +48,16 @@ export function UserRelay() {
                    <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
                  </span>
                )}
-                <p className="max-w-[20rem] truncate text-sm font-medium leading-none">
+                <p className="max-w-[20rem] truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
                  {item}
                </p>
              </div>
              <button
                type="button"
                onClick={() => removeRelay(item)}
-                className="hidden h-6 w-6 items-center justify-center rounded hover:bg-white/10 group-hover:inline-flex"
+                className="hidden h-6 w-6 items-center justify-center rounded hover:bg-zinc-300 group-hover:inline-flex dark:hover:bg-zinc-700"
              >
-                <CancelIcon className="h-4 w-4 text-white" />
+                <CancelIcon className="h-4 w-4 text-zinc-900 dark:text-zinc-100" />
              </button>
            </div>
          ))}
--- a/src/app/relays/index.tsx
+++ b/src/app/relays/index.tsx
@ -6,8 +6,10 @@ export function RelaysScreen() {
    <div className="grid h-full w-full grid-cols-3">
      <RelayList />
      <div className="col-span-1">
-        <div className="inline-flex h-16 w-full items-center border-b border-white/5 px-3">
-          <h3 className="font-semibold text-white">Connected relays</h3>
+        <div className="inline-flex h-16 w-full items-center border-b border-zinc-100 px-3 dark:border-zinc-900">
+          <h3 className="font-semibold text-zinc-900 dark:text-zinc-100">
+            Connected relays
+          </h3>
        </div>
        <UserRelay />
      </div>
--- a/src/app/relays/relay.tsx
+++ b/src/app/relays/relay.tsx
@ -110,7 +110,7 @@ export function RelayScreen() {
                          href={`https://nips.be/${item}`}
                          target="_blank"
                          rel="noreferrer"
-                          className="inline-flex aspect-square h-full w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+                          className="inline-flex aspect-square h-full w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium hover:bg-interor-500"
                        >
                          {item}
                        </a>
@ -145,7 +145,7 @@ export function RelayScreen() {
                        href={resolvedRelay.payments_url}
                        target="_blank"
                        rel="noreferrer"
-                        className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-fuchsia-500 text-sm font-medium hover:bg-fuchsia-600"
+                        className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-interor-500 text-sm font-medium hover:bg-interor-600"
                      >
                        Open payment website
                      </a>
--- a/src/app/settings/components/cacheTime.tsx
+++ b/src/app/settings/components/cacheTime.tsx
@ -30,7 +30,7 @@ export function CacheTimeSetting() {
        <button
          type="button"
          onClick={() => update()}
-          className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 font-medium hover:bg-fuchsia-500"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 font-medium hover:bg-interor-500"
        >
          <CheckCircleIcon className="h-4 w-4 text-white" />
        </button>
--- a/src/app/space/components/toggle.tsx
+++ b/src/app/space/components/toggle.tsx
@ -12,14 +12,14 @@ export function ToggleWidgetList() {
    <div className="flex h-full shrink-0 grow-0 basis-[400px] items-center justify-center">
      <div className="relative">
        <div className="absolute -top-44 left-1/2 -translate-x-1/2 transform">
-          <HandArrowDownIcon className="text-white/5" />
+          <HandArrowDownIcon className="text-zinc-100 dark:text-zinc-900" />
        </div>
        <button
          type="button"
          onClick={() =>
            setWidget(db, { kind: WidgetKinds.tmp.list, title: '', content: '' })
          }
-          className="inline-flex h-9 items-center gap-2 rounded-lg border-t border-white/10 bg-white/20 px-3 text-white hover:bg-white/30"
+          className="inline-flex h-9 items-center gap-2 rounded-full bg-zinc-200 px-3 text-zinc-900 hover:bg-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
        >
          <PlusIcon className="h-4 w-4 text-white" />
          <p className="text-sm font-semibold leading-none">Add widget</p>
--- a/src/app/space/components/widgetList.tsx
+++ b/src/app/space/components/widgetList.tsx
@ -33,22 +33,22 @@ export function WidgetList({ params }: { params: Widget }) {
    (kind: number) => {
      switch (kind) {
        case WidgetKinds.tmp.xfeed:
-          return <GroupFeedsIcon className="h-5 w-5 text-white" />;
+          return <GroupFeedsIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
        case WidgetKinds.local.follows:
-          return <FollowsIcon className="h-5 w-5 text-white" />;
+          return <FollowsIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
        case WidgetKinds.local.files:
        case WidgetKinds.global.files:
-          return <FileIcon className="h-5 w-5 text-white" />;
+          return <FileIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
        case WidgetKinds.local.articles:
        case WidgetKinds.global.articles:
-          return <ArticleIcon className="h-5 w-5 text-white" />;
+          return <ArticleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
        case WidgetKinds.tmp.xhashtag:
-          return <HashtagIcon className="h-5 w-4 text-white" />;
+          return <HashtagIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
        case WidgetKinds.nostrBand.trendingAccounts:
        case WidgetKinds.nostrBand.trendingNotes:
-          return <TrendingIcon className="h-5 w-4 text-white" />;
+          return <TrendingIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
        case WidgetKinds.other.learnNostr:
-          return <ThreadsIcon className="h-5 w-4 text-white" />;
+          return <ThreadsIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
        default:
          return null;
      }
@ -59,14 +59,16 @@ export function WidgetList({ params }: { params: Widget }) {
  const renderItem = useCallback(
    (row: WidgetGroup, index: number) => {
      return (
-        <div key={index} className="flex flex-col gap-3">
-          <h3 className="font-medium text-white/50">{row.title}</h3>
-          <div className="flex flex-col divide-y divide-white/5 overflow-hidden rounded-xl bg-white/10">
+        <div key={index} className="flex flex-col gap-2">
+          <h3 className="text-sm font-semibold text-zinc-500 dark:text-zinc-300">
+            {row.title}
+          </h3>
+          <div className="flex flex-col divide-y divide-zinc-200 overflow-hidden rounded-xl bg-zinc-100 dark:divide-zinc-800 dark:bg-zinc-900">
            {row.data.map((item, index) => (
              <button
                onClick={() => openWidget(item)}
                key={index}
-                className="flex items-center gap-2.5 px-4 hover:bg-white/10"
+                className="group flex items-center gap-2.5 px-4 hover:bg-zinc-200 dark:hover:bg-zinc-800"
              >
                {item.icon ? (
                  <div className="h-10 w-10 shrink-0 rounded-md">
@ -77,13 +79,15 @@ export function WidgetList({ params }: { params: Widget }) {
                    />
                  </div>
                ) : (
-                  <div className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-white/10">
+                  <div className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-zinc-200 group-hover:bg-zinc-300 dark:bg-zinc-800 dark:group-hover:bg-zinc-700">
                    {renderIcon(item.kind)}
                  </div>
                )}
-                <div className="inline-flex h-16 w-full flex-col items-start justify-center gap-1">
-                  <h5 className="line-clamp-1 font-medium leading-none">{item.title}</h5>
-                  <p className="line-clamp-1 text-xs leading-none text-white/50">
+                <div className="inline-flex h-16 w-full flex-col items-start justify-center">
+                  <h5 className="line-clamp-1 text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                    {item.title}
+                  </h5>
+                  <p className="line-clamp-1 text-xs text-zinc-500 dark:text-zinc-300">
                    {item.description}
                  </p>
                </div>
@ -97,21 +101,21 @@ export function WidgetList({ params }: { params: Widget }) {
  );

  return (
-    <div className="relative h-full shrink-0 grow-0 basis-[400px] bg-white/10">
+    <div className="relative h-full shrink-0 grow-0 basis-[400px]">
      <TitleBar id={params.id} title="Add widget" />
      <div className="scrollbar-hide h-full overflow-y-auto pb-20">
        <div className="flex flex-col gap-6 px-3">
          {DefaultWidgets.map((row: WidgetGroup, index: number) =>
            renderItem(row, index)
          )}
-          <div className="border-t border-white/5 pt-6">
+          <div className="border-t border-zinc-200 pt-6 dark:border-zinc-800">
            <button
              type="button"
              disabled
-              className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-white/5 text-sm font-medium text-white/50"
+              className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-zinc-100 text-sm font-medium text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100"
            >
              Build your own widget{' '}
-              <div className="-rotate-3 transform rounded-md border border-white/20 bg-white/10 px-1.5 py-1">
+              <div className="-rotate-3 transform-gpu rounded-md border border-zinc-300 bg-zinc-200 px-1.5 py-1 dark:border-zinc-700 dark:bg-zinc-800">
                <span className="bg-gradient-to-t from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text text-xs text-transparent">
                  Coming soon
                </span>
--- a/src/app/space/index.tsx
+++ b/src/app/space/index.tsx
@ -88,7 +88,7 @@ export function SpaceScreen() {
      {!widgets ? (
        <div className="flex shrink-0 grow-0 basis-[400px] flex-col">
          <div className="flex w-full flex-1 items-center justify-center p-3">
-            <LoaderIcon className="h-5 w-5 animate-spin text-white/10" />
+            <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
          </div>
        </div>
      ) : (
--- a/src/app/users/components/modal.tsx
+++ b/src/app/users/components/modal.tsx
@ -138,22 +138,22 @@ export function EditProfileModal() {
      <Dialog.Trigger asChild>
        <button
          type="button"
-          className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+          className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
        >
          Edit profile
        </button>
      </Dialog.Trigger>
      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-white dark:bg-black" />
        <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
-            <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
+          <div className="relative h-min w-full max-w-xl rounded-xl bg-zinc-100 dark:bg-zinc-900">
+            <div className="h-min w-full shrink-0 rounded-t-xl border-b border-zinc-200 px-5 py-5 dark:border-zinc-800">
              <div className="flex items-center justify-between">
-                <Dialog.Title className="text-lg font-semibold leading-none text-white">
+                <Dialog.Title className="text-lg font-semibold leading-none text-zinc-900 dark:text-zinc-100">
                  Edit profile
                </Dialog.Title>
-                <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
-                  <CancelIcon className="h-4 w-4 text-white/50" />
+                <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md text-zinc-900 hover:bg-zinc-200 dark:text-zinc-100 dark:hover:bg-zinc-800">
+                  <CancelIcon className="h-4 w-4" />
                </Dialog.Close>
              </div>
            </div>
@ -170,7 +170,7 @@ export function EditProfileModal() {
                        className="h-full w-full object-cover"
                      />
                    ) : (
-                      <div className="h-full w-full bg-white" />
+                      <div className="h-full w-full bg-black dark:bg-white" />
                    )}
                    <div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform">
                      <BannerUploader setBanner={setBanner} />
@ -193,7 +193,7 @@ export function EditProfileModal() {
                  <div className="flex flex-col gap-1">
                    <label
                      htmlFor="name"
-                      className="text-sm font-semibold uppercase tracking-wider text-white/50"
+                      className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
                    >
                      Name
                    </label>
@ -204,13 +204,13 @@ export function EditProfileModal() {
                        minLength: 4,
                      })}
                      spellCheck={false}
-                      className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
+                      className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
                    />
                  </div>
                  <div className="flex flex-col gap-1">
                    <label
                      htmlFor="nip05"
-                      className="text-sm font-semibold uppercase tracking-wider text-white/50"
+                      className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
                    >
                      NIP-05
                    </label>
@ -221,17 +221,17 @@ export function EditProfileModal() {
                          minLength: 4,
                        })}
                        spellCheck={false}
-                        className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
+                        className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
                      />
                      <div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
                        {nip05.verified ? (
-                          <span className="inline-flex h-6 items-center gap-1 rounded bg-green-500 px-2 text-sm font-medium">
-                            <CheckCircleIcon className="h-4 w-4 text-white" />
+                          <span className="inline-flex h-6 items-center gap-1 rounded bg-green-500 px-2 text-sm font-medium text-white">
+                            <CheckCircleIcon className="h-4 w-4 text-black dark:text-white" />
                            Verified
                          </span>
                        ) : (
-                          <span className="inline-flex h-6 items-center gap-1 rounded bg-red-500 px-2 text-sm font-medium">
-                            <UnverifiedIcon className="h-4 w-4 text-white" />
+                          <span className="inline-flex h-6 items-center gap-1 rounded bg-red-500 px-2 text-sm font-medium text-white">
+                            <UnverifiedIcon className="h-4 w-4 text-black dark:text-white" />
                            Unverified
                          </span>
                        )}
@ -246,20 +246,20 @@ export function EditProfileModal() {
                  <div className="flex flex-col gap-1">
                    <label
                      htmlFor="about"
-                      className="text-sm font-semibold uppercase tracking-wider text-white/50"
+                      className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
                    >
                      Bio
                    </label>
                    <textarea
                      {...register('about')}
                      spellCheck={false}
-                      className="relative h-20 w-full resize-none rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
+                      className="relative h-20 w-full resize-none rounded-lg bg-zinc-200 px-3 py-2 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
                    />
                  </div>
                  <div className="flex flex-col gap-1">
                    <label
                      htmlFor="website"
-                      className="text-sm font-semibold uppercase tracking-wider text-white/50"
+                      className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
                    >
                      Website
                    </label>
@ -267,13 +267,13 @@ export function EditProfileModal() {
                      type={'text'}
                      {...register('website', { required: false })}
                      spellCheck={false}
-                      className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
+                      className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
                    />
                  </div>
                  <div className="flex flex-col gap-1">
                    <label
                      htmlFor="website"
-                      className="text-sm font-semibold uppercase tracking-wider text-white/50"
+                      className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400"
                    >
                      Lightning address
                    </label>
@ -281,14 +281,14 @@ export function EditProfileModal() {
                      type={'text'}
                      {...register('lud16', { required: false })}
                      spellCheck={false}
-                      className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 !outline-none backdrop-blur-xl placeholder:text-white/50"
+                      className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100"
                    />
                  </div>
                  <div>
                    <button
                      type="submit"
                      disabled={!isValid}
-                      className="inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-lg bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
+                      className="inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-lg bg-interor-500 font-medium text-white hover:bg-interor-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
                    >
                      {loading ? (
                        <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
--- a/src/app/users/components/profile.tsx
+++ b/src/app/users/components/profile.tsx
@ -58,36 +58,36 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
            className="h-full w-full object-cover"
          />
        ) : (
-          <div className="h-full w-full bg-black" />
+          <div className="h-full w-full bg-zinc-100 dark:bg-zinc-900" />
        )}
      </div>
      <div className="-mt-7 flex w-full flex-col items-center px-5">
        <Image
          src={user.picture || user.image}
          alt={pubkey}
-          className="h-14 w-14 rounded-lg ring-2 ring-black"
+          className="h-14 w-14 rounded-lg ring-2 ring-zinc-100 dark:ring-zinc-900"
        />
        <div className="mt-2 flex flex-1 flex-col gap-6">
          <div className="flex flex-col items-center gap-1">
-            <div className="inline-flex flex-col items-center gap-1.5">
-              <h5 className="text-center text-xl font-semibold leading-none">
+            <div className="inline-flex flex-col items-center">
+              <h5 className="text-center text-xl font-semibold text-zinc-900 dark:text-zinc-100">
                {user.name || user.display_name || user.displayName || 'No name'}
              </h5>
              {user.nip05 ? (
                <NIP05
                  pubkey={pubkey}
                  nip05={user?.nip05}
-                  className="max-w-[15rem] truncate text-sm leading-none text-white/50"
+                  className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-400"
                />
              ) : (
-                <span className="max-w-[15rem] truncate text-sm leading-none text-white/50">
+                <span className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-400">
                  {displayNpub(pubkey, 16)}
                </span>
              )}
            </div>
            <div className="flex flex-col gap-6">
              {user.about || user.bio ? (
-                <p className="mt-2 max-w-[500px] select-text break-words text-center text-white">
+                <p className="mt-2 max-w-[500px] select-text break-words text-center text-zinc-900 dark:text-zinc-100">
                  {user.about || user.bio}
                </p>
              ) : (
@ -101,7 +101,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
              <button
                type="button"
                onClick={() => unfollowUser(pubkey)}
-                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
              >
                Unfollow
              </button>
@ -109,20 +109,20 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
              <button
                type="button"
                onClick={() => followUser(pubkey)}
-                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+                className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
              >
                Follow
              </button>
            )}
            <Link
              to={`/chats/${pubkey}`}
-              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+              className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100"
            >
              Message
            </Link>
            {db.account.pubkey === pubkey && (
              <>
-                <span className="mx-2 inline-flex h-4 w-px bg-white/10 backdrop-blur-xl" />
+                <span className="mx-2 inline-flex h-4 w-px bg-zinc-200 dark:bg-zinc-800" />
                <EditProfileModal />
              </>
            )}
--- a/src/app/users/components/stats.tsx
+++ b/src/app/users/components/stats.tsx
@ -16,7 +16,7 @@ export function UserStats({ pubkey }: { pubkey: string }) {
  if (status === 'loading') {
    return (
      <div className="flex w-full items-center justify-center">
-        <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+        <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
      </div>
    );
  }
@ -28,32 +28,40 @@ export function UserStats({ pubkey }: { pubkey: string }) {
  return (
    <div className="flex w-full items-center justify-center gap-10">
      <div className="inline-flex flex-col items-center gap-1">
-        <span className="font-semibold leading-none text-white">
+        <span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
          {compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}
        </span>
-        <span className="text-sm leading-none text-white/50">Followers</span>
+        <span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
+          Followers
+        </span>
      </div>
      <div className="inline-flex flex-col items-center gap-1">
-        <span className="font-semibold leading-none text-white">
+        <span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
          {compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0}
        </span>
-        <span className="text-sm leading-none text-white/50">Following</span>
+        <span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
+          Following
+        </span>
      </div>
      <div className="inline-flex flex-col items-center gap-1">
-        <span className="font-semibold leading-none text-white">
+        <span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
          {data.stats[pubkey].zaps_received
            ? compactNumber.format(data.stats[pubkey].zaps_received.msats / 1000)
            : 0}
        </span>
-        <span className="text-sm leading-none text-white/50">Zaps received</span>
+        <span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
+          Zaps received
+        </span>
      </div>
      <div className="inline-flex flex-col items-center gap-1">
-        <span className="font-semibold leading-none text-white">
+        <span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
          {data.stats[pubkey].zaps_sent
            ? compactNumber.format(data.stats[pubkey].zaps_sent.msats / 1000)
            : 0}
        </span>
-        <span className="text-sm leading-none text-white/50">Zaps sent</span>
+        <span className="text-sm leading-none text-zinc-500 dark:text-zinc-400">
+          Zaps sent
+        </span>
      </div>
    </div>
  );
--- a/src/app/users/index.tsx
+++ b/src/app/users/index.tsx
@ -68,7 +68,7 @@ export function UserScreen() {
  );

  return (
-    <div className="scrollbar-hide relative h-full w-full overflow-y-auto bg-white/10 backdrop-blur-xl">
+    <div className="scrollbar-hide relative h-full w-full overflow-y-auto">
      <div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
      <UserProfile pubkey={pubkey} />
      <div className="mt-6 h-full w-full border-t border-white/5 px-1.5">
@ -84,9 +84,9 @@ export function UserScreen() {
            </div>
          ) : data.length === 0 ? (
            <div className="px-3 py-1.5">
-              <div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
+              <div className="rounded-xl bg-zinc-100 px-3 py-6 dark:bg-zinc-900">
                <div className="flex flex-col items-center gap-4">
-                  <p className="text-center text-sm font-medium text-white">
+                  <p className="text-center text-sm font-medium text-zinc-900 dark:text-zinc-100">
                    User doesn&apos;t have any posts in the last 48 hours.
                  </p>
                </div>
--- a/src/shared/button.tsx
+++ b/src/shared/button.tsx
@ -16,15 +16,15 @@ export function Button({
  switch (preset) {
    case 'small':
      preClass =
-        'w-min h-9 px-4 bg-white/10 backdrop-blur-xl rounded-md text-sm font-medium text-white hover:bg-fuchsia-500';
+        'w-min h-9 px-4 bg-white/10 backdrop-blur-xl rounded-md text-sm font-medium text-white hover:bg-interor-500';
      break;
    case 'publish':
      preClass =
-        'w-min h-9 px-4 bg-fuchsia-500 rounded-md text-sm font-medium text-white hover:bg-fuchsia-600';
+        'w-min h-9 px-4 bg-interor-500 rounded-md text-sm font-medium text-white hover:bg-interor-600';
      break;
    case 'large':
      preClass =
-        'h-11 w-full bg-fuchsia-500 rounded-lg font-medium text-white hover:bg-fuchsia-600';
+        'h-11 w-full bg-interor-500 rounded-lg font-medium text-white hover:bg-interor-600';
      break;
    case 'large-alt':
      preClass =
--- a/src/shared/composer/composer.tsx
+++ b/src/shared/composer/composer.tsx
@ -150,7 +150,7 @@ export function Composer() {
        <button
          onClick={() => submit()}
          disabled={editor && editor.isEmpty}
-          className="inline-flex h-10 w-20 items-center justify-center rounded-lg bg-fuchsia-500 px-2 font-semibold hover:bg-fuchsia-600 disabled:opacity-50"
+          className="inline-flex h-10 w-20 items-center justify-center rounded-lg bg-interor-500 px-2 font-semibold hover:bg-interor-600 disabled:opacity-50"
        >
          {loading === true ? (
            <LoaderIcon className="h-5 w-5 animate-spin text-white" />
--- a/src/shared/layouts/app.tsx
+++ b/src/shared/layouts/app.tsx
@ -5,9 +5,9 @@ import { Navigation } from '@shared/navigation';

 export function AppLayout() {
  return (
-    <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="flex h-screen w-screen flex-col">
+      <WindowTitlebar />
+      <div className="flex h-full min-h-0 w-full bg-zinc-50 text-zinc-50 dark:bg-zinc-950 dark:text-zinc-950">
        <div className="h-full shrink-0">
          <Navigation />
        </div>
--- a/src/shared/layouts/auth.tsx
+++ b/src/shared/layouts/auth.tsx
@ -3,9 +3,9 @@ import { WindowTitlebar } from 'tauri-controls';

 export function AuthLayout() {
  return (
-    <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">
+    <div className="relative h-screen w-screen">
+      <WindowTitlebar />
+      <div className="bg-zinc-50 dark:bg-zinc-950">
        <Outlet />
      </div>
    </div>
--- a/src/shared/logout.tsx
+++ b/src/shared/logout.tsx
@ -54,7 +54,7 @@ export function Logout() {
              <button
                type="button"
                onClick={() => logout()}
-                className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-fuchsia-500"
+                className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-interor-500"
              >
                Logout
              </button>
--- a/src/shared/notes/actions.tsx
+++ b/src/shared/notes/actions.tsx
@ -28,7 +28,7 @@ export function NoteActions({

  return (
    <Tooltip.Provider>
-      <div className="-ml-1 mt-2 inline-flex w-full items-center">
+      <div className="-ml-1 mt-3 inline-flex w-full items-center">
        <div className="inline-flex items-center gap-2">
          <NoteReply id={id} pubkey={pubkey} root={root} />
          <NoteReaction id={id} pubkey={pubkey} />
--- a/src/shared/notes/actions/more.tsx
+++ b/src/shared/notes/actions/more.tsx
@ -30,9 +30,9 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
          <DropdownMenu.Trigger asChild>
            <button
              type="button"
-              className="group ml-auto inline-flex h-7 w-7 items-center justify-center text-white/80"
+              className="group ml-auto inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
            >
-              <HorizontalDotsIcon className="h-5 w-5 text-white/80 group-hover:text-fuchsia-400" />
+              <HorizontalDotsIcon className="h-5 w-5 group-hover:text-interor-600" />
            </button>
          </DropdownMenu.Trigger>
        </Tooltip.Trigger>
@ -49,7 +49,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
            <button
              type="button"
              onClick={() => copyLink()}
-              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
            >
              Copy shareable link
            </button>
@ -58,7 +58,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
            <button
              type="button"
              onClick={() => copyID()}
-              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
            >
              Copy ID
            </button>
@ -66,7 +66,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
          <DropdownMenu.Item asChild>
            <Link
              to={`/users/${pubkey}`}
-              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
            >
              View profile
            </Link>
--- a/src/shared/notes/actions/reaction.tsx
+++ b/src/shared/notes/actions/reaction.tsx
@ -62,12 +62,12 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
      <Popover.Trigger asChild>
        <button
          type="button"
-          className="group inline-flex h-7 w-7 items-center justify-center text-white/80"
+          className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
        >
          {reaction ? (
            <img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" />
          ) : (
-            <ReactionIcon className="h-5 w-5 text-white/80 group-hover:text-red-400" />
+            <ReactionIcon className="h-5 w-5 group-hover:text-red-400" />
          )}
        </button>
      </Popover.Trigger>
--- a/src/shared/notes/actions/reply.tsx
+++ b/src/shared/notes/actions/reply.tsx
@ -21,9 +21,9 @@ export function NoteReply({
        <button
          type="button"
          onClick={() => setReply(id, pubkey, root)}
-          className="group inline-flex h-7 w-7 items-center justify-center text-white/80"
+          className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
        >
-          <ReplyIcon className="h-5 w-5 text-white/80 group-hover:text-green-500" />
+          <ReplyIcon className="h-5 w-5 group-hover:text-green-500" />
        </button>
      </Tooltip.Trigger>
      <Tooltip.Portal>
--- a/src/shared/notes/actions/repost.tsx
+++ b/src/shared/notes/actions/repost.tsx
@ -44,12 +44,12 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
          <AlertDialog.Trigger asChild>
            <button
              type="button"
-              className="group inline-flex h-7 w-7 items-center justify-center text-white/80"
+              className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
            >
              <RepostIcon
                className={twMerge(
                  'h-5 w-5 group-hover:text-blue-500',
-                  isRepost ? 'text-blue-500' : 'text-white/80'
+                  isRepost ? 'text-blue-500' : ''
                )}
              />
            </button>
@ -62,7 +62,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
-      <AlertDialog.Portal className="relative z-10">
+      <AlertDialog.Portal>
        <AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
        <AlertDialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
          <div className="relative h-min w-full max-w-md rounded-xl bg-white/10 backdrop-blur-xl">
@ -84,7 +84,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
              <button
                type="button"
                onClick={() => submit()}
-                className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium leading-none text-white outline-none hover:bg-fuchsia-500"
+                className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium leading-none text-white outline-none hover:bg-interor-500"
              >
                {isLoading ? (
                  <LoaderIcon className="h-4 w-4 animate-spin text-white" />
--- a/src/shared/notes/actions/zap.tsx
+++ b/src/shared/notes/actions/zap.tsx
@ -93,9 +93,9 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
      <Dialog.Trigger asChild>
        <button
          type="button"
-          className="group inline-flex h-7 w-7 items-center justify-center text-white/80"
+          className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
        >
-          <ZapIcon className="h-5 w-5 text-white/80 group-hover:text-orange-400" />
+          <ZapIcon className="h-5 w-5 group-hover:text-orange-400" />
        </button>
      </Dialog.Trigger>
      <Dialog.Portal>
@ -186,7 +186,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
                        <button
                          type="button"
                          onClick={() => createZapRequest()}
-                          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-fuchsia-500 px-4 font-medium text-white hover:bg-fuchsia-600"
+                          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-interor-500 px-4 font-medium text-white hover:bg-interor-600"
                        >
                          {isCompleted ? (
                            <p>Successfully tipped</p>
@ -210,7 +210,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
                        <button
                          type="button"
                          onClick={() => createZapRequest()}
-                          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-fuchsia-500 px-4 font-medium hover:bg-fuchsia-600"
+                          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-interor-500 px-4 font-medium hover:bg-interor-600"
                        >
                          <p>Create Lightning invoice</p>
                        </button>
--- a/src/shared/notes/kinds/text.tsx
+++ b/src/shared/notes/kinds/text.tsx
@ -21,7 +21,7 @@ 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]}
          disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
          unwrapDisallowed={true}
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@ -359,13 +359,13 @@ export const User = memo(function User({
          <div className="flex items-center gap-2 px-3 py-3">
            <Link
              to={`/users/${pubkey}`}
-              className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-fuchsia-500"
+              className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-interor-500"
            >
              View profile
            </Link>
            <Link
              to={`/chats/${pubkey}`}
-              className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-fuchsia-500"
+              className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-interor-500"
            >
              Message
            </Link>
--- a/src/shared/userProfile.tsx
+++ b/src/shared/userProfile.tsx
@ -62,7 +62,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
            <button
              type="button"
              onClick={() => unfollowUser(pubkey)}
-              className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+              className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
            >
              Unfollow
            </button>
@ -70,14 +70,14 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
            <button
              type="button"
              onClick={() => followUser(pubkey)}
-              className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+              className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
            >
              Follow
            </button>
          )}
          <Link
            to={`/chats/${pubkey}`}
-            className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+            className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
          >
            Message
          </Link>
--- a/src/shared/widgets/eventLoader.tsx
+++ b/src/shared/widgets/eventLoader.tsx
@ -42,29 +42,29 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {

  return (
    <div className="mb-3 px-3">
-      <div className="h-max w-full rounded-lg border-t border-white/10 bg-white/20 p-3">
+      <div className="h-max w-full rounded-lg bg-zinc-100 p-3 dark:bg-zinc-900">
        <div className="flex flex-col items-center gap-3">
          {firstTime ? (
            <div>
              <span className="text-4xl">👋</span>
-              <h3 className="mt-2 font-semibold leading-tight">
+              <h3 className="mt-2 font-semibold leading-tight text-zinc-100 dark:text-zinc-900">
                Hello, this is the first time you&apos;re using Lume
              </h3>
-              <p className="text-sm text-white/70">
+              <p className="text-sm text-zinc-500">
                Lume is downloading all events since the last 24 hours. It will auto
                refresh when it done, please be patient
              </p>
            </div>
          ) : (
            <div className="text-center">
-              <h3 className="font-semibold leading-tight">
+              <h3 className="font-semibold leading-tight text-zinc-500">
                Downloading all events while you&apos;re away...
              </h3>
            </div>
          )}
          <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-white/20">
            <div
-              className="flex flex-col justify-center overflow-hidden bg-fuchsia-500 transition-all duration-1000 ease-smooth"
+              className="flex flex-col justify-center overflow-hidden bg-interor-600 transition-all duration-1000 ease-smooth"
              role="progressbar"
              style={{ width: `${progress}%` }}
            />
--- a/src/shared/widgets/local/articles.tsx
+++ b/src/shared/widgets/local/articles.tsx
@ -72,7 +72,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
                <button
                  onClick={() => fetchNextPage()}
                  disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
                >
                  {isFetchingNextPage ? (
                    <>
--- a/src/shared/widgets/local/feeds.tsx
+++ b/src/shared/widgets/local/feeds.tsx
@ -108,7 +108,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
                <button
                  onClick={() => fetchNextPage()}
                  disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
                >
                  {isFetchingNextPage ? (
                    <>
--- a/src/shared/widgets/local/files.tsx
+++ b/src/shared/widgets/local/files.tsx
@ -74,7 +74,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
                <button
                  onClick={() => fetchNextPage()}
                  disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
                >
                  {isFetchingNextPage ? (
                    <>
--- a/src/shared/widgets/local/follows.tsx
+++ b/src/shared/widgets/local/follows.tsx
@ -107,7 +107,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
                <button
                  onClick={() => fetchNextPage()}
                  disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
                >
                  {isFetchingNextPage ? (
                    <>
--- a/src/shared/widgets/local/network.tsx
+++ b/src/shared/widgets/local/network.tsx
@ -106,7 +106,7 @@ export function LocalNetworkWidget() {
      <div className="flex-1">
        {status === 'loading' ? (
          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+            <div className="rounded-xl bg-zinc-100 px-3 py-3 backdrop-blur-xl dark:bg-zinc-900">
              <NoteSkeleton />
            </div>
          </div>
@ -121,21 +121,21 @@ export function LocalNetworkWidget() {
                <button
                  onClick={() => fetchNextPage()}
                  disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium hover:bg-interor-600 focus:outline-none"
                >
                  {isFetchingNextPage ? (
                    <>
                      <span>Loading...</span>
-                      <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                      <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
                    </>
                  ) : hasNextPage ? (
                    <>
-                      <ArrowRightCircleIcon className="h-5 w-5 text-white" />
+                      <ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
                      <span>Load more</span>
                    </>
                  ) : (
                    <>
-                      <ArrowRightCircleIcon className="h-5 w-5 text-white" />
+                      <ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
                      <span>Nothing more to load</span>
                    </>
                  )}
--- a/src/shared/widgets/nostrBandUserProfile.tsx
+++ b/src/shared/widgets/nostrBandUserProfile.tsx
@ -94,7 +94,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
              <button
                type="button"
                onClick={() => unfollowUser(data.pubkey)}
-                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-interor-500 hover:text-white"
              >
                <UnfollowIcon className="h-4 w-4" />
              </button>
@ -102,7 +102,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
              <button
                type="button"
                onClick={() => followUser(data.pubkey)}
-                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-interor-500 hover:text-white"
              >
                <FollowIcon className="h-4 w-4" />
              </button>
--- a/src/shared/widgets/tmp/feeds.tsx
+++ b/src/shared/widgets/tmp/feeds.tsx
@ -78,7 +78,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
              type="submit"
              disabled={groups.length < 1}
              onClick={submit}
-              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
            >
              <span className="w-5" />
              <span>Add {groups.length} account to group feed</span>
--- a/src/shared/widgets/tmp/hashtag.tsx
+++ b/src/shared/widgets/tmp/hashtag.tsx
@ -62,7 +62,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
  };

  return (
-    <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10 backdrop-blur-xl">
+    <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center">
      <div className="w-full px-5">
        <h3 className="mb-4 text-center text-lg font-semibold">
          Enter hashtag you want to follow
@ -72,7 +72,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
            <input
              {...register('hashtag', { required: true, minLength: 1 })}
              placeholder="#bitcoin"
-              className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
+              className="relative h-11 w-full rounded-lg bg-zinc-100 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-white/50 dark:bg-zinc-900 dark:text-zinc-100"
            />
            <span className="text-sm text-red-400">
              {errors.hashtag && <p>{errors.hashtag.message}</p>}
@ -82,7 +82,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
            <button
              type="submit"
              disabled={!isDirty || !isValid}
-              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium text-zinc-900 hover:bg-interor-600 focus:outline-none disabled:opacity-50 dark:text-zinc-100"
            >
              <span className="w-5" />
              <span>Create</span>
@ -91,7 +91,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
            <button
              type="button"
              onClick={cancel}
-              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-zinc-100 px-6 font-medium leading-none text-zinc-900 backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50 dark:bg-zinc-900 dark:text-zinc-100"
            >
              Cancel
            </button>
--- a/src/shared/widgets/wrapper.tsx
+++ b/src/shared/widgets/wrapper.tsx
@ -20,10 +20,7 @@ export function WidgetWrapper({
      }}
      minWidth={420}
      minHeight={'100vh'}
-      className={twMerge(
-        'relative shrink-0 grow-0 bg-white/10 backdrop-blur-xl',
-        className
-      )}
+      className={twMerge('relative shrink-0 grow-0', className)}
      enable={{ right: true }}
    >
      {children}
--- a/src/utils/parser.ts
+++ b/src/utils/parser.ts
@ -102,9 +102,7 @@ export function parser(eventContent: string) {
      if (word.startsWith('nostr:naddr1') || word.startsWith('naddr1')) {
        const naddr = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, '');
        const decoded = nip19.decode(naddr).data as AddressPointer;
-        // TODO
-        console.log('todo: ', decoded);
-        return word.replace(word, '');
+        return word.replace(word, `~pub-${decoded.pubkey}~`);
      }

      // normal word