refs #4887 Adjust dark mode design

h3poteto · Mar 14, 2024 · 8582244 · 8582244
1 parent 25ee1ab
commit 8582244
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 33 deletions.
diff --git a/renderer/app.scss b/renderer/app.scss
@@ -97,6 +97,19 @@
   background-color: rgb(241 245 249);
 }
 
+.dark {
+  .timeline-scrollable::-webkit-scrollbar-thumb {
+    background-color: #616161;
+    border-radius: 4px !important;
+    opacity: 0;
+  }
+
+  .timeline-scrollable::-webkit-scrollbar-track {
+    border-radius: 4px !important;
+    background-color: #424242;
+  }
+}
+
 .timeline-scrollable:hover::-webkit-scrollbar-thumb {
   opacity: 1;
 }
@@ -329,3 +342,9 @@ a {
     @apply text-blue-gray-600;
   }
 }
+
+.dark {
+  a {
+    @apply text-blue-400;
+  }
+}
diff --git a/renderer/components/accounts/New.tsx b/renderer/components/accounts/New.tsx
@@ -160,7 +160,7 @@ export default function New(props: NewProps) {
                     <FormattedMessage id="accounts.new.domain" />
                   </Typography>
                 </div>
-                <Input type="text" id="domain" placeholder="mastodon.social" />
+                <Input type="text" color="blue-gray" id="domain" placeholder="mastodon.social" />
                 <Button onClick={checkDomain} loading={loading} color="blue">
                   <FormattedMessage id="accounts.new.sign_in" />
                 </Button>
@@ -185,7 +185,7 @@ export default function New(props: NewProps) {
                             <FormattedMessage id="accounts.new.authorization_helper" />
                           </Typography>
                         </div>
-                        <Input id="authorization" type="text" />
+                        <Input id="authorization" color="blue-gray" type="text" />
                       </>
                     )}
 

diff --git a/renderer/components/compose/Compose.tsx b/renderer/components/compose/Compose.tsx
@@ -236,7 +236,7 @@ export default function Compose(props: Props) {
           <Input
             id="spoiler"
             type="text"
-            color="blue"
+            color="blue-gray"
             containerProps={{ className: 'mb-2' }}
             value={spoiler}
             onChange={ev => setSpoiler(ev.target.value)}
@@ -246,7 +246,7 @@ export default function Compose(props: Props) {
         <div className="relative">
           <Textarea
             id="body"
-            color="blue"
+            color="blue-gray"
             className="resize-none focus:ring-0"
             placeholder={formatMessage({ id: 'compose.placeholder' })}
             rows={3}
@@ -481,7 +481,7 @@ const PollForm = (props: PollProps) => {
           )}
           <Input
             type="text"
-            color="blue"
+            color="blue-gray"
             value={option}
             onChange={ev => updateOption(index, ev.target.value)}
             containerProps={{ className: 'h-8' }}
@@ -495,7 +495,7 @@ const PollForm = (props: PollProps) => {
         </Button>
         <Select
           id="expires"
-          color="blue"
+          color="blue-gray"
           value={`${props.poll.expires_in}`}
           onChange={e => changeExpire(parseInt(e))}
           containerProps={{ className: 'h-8' }}

diff --git a/renderer/components/detail/Detail.tsx b/renderer/components/detail/Detail.tsx
@@ -45,7 +45,7 @@ export default function Detail(props: Props) {
   return (
     <>
       {target && (
-        <div className={`bg-white ${props.className}`} style={props.style}>
+        <div className={`${props.className}`} style={props.style}>
           <div className="theme-bg-secondary text-gray-200 flex justify-between p-2 items-center" style={{ height: '44px' }}>
             <div className="flex gap-4 items-center">
               <button className="text-lg" title={formatMessage({ id: 'detail.back' })}>

diff --git a/renderer/components/detail/Profile.tsx b/renderer/components/detail/Profile.tsx
@@ -153,7 +153,7 @@ export default function Profile(props: Props) {
                 )}
                 <Popover open={popoverDetail} handler={setPopoverDetail}>
                   <PopoverHandler>
-                    <IconButton variant="outlined" title={formatMessage({ id: 'profile.detail' })}>
+                    <IconButton variant="outlined" color="teal" title={formatMessage({ id: 'profile.detail' })}>
                       <FaEllipsisVertical />
                     </IconButton>
                   </PopoverHandler>
@@ -230,19 +230,25 @@ export default function Profile(props: Props) {
               </div>
             </div>
             <div className="pt-4">
-              <div className="font-bold" dangerouslySetInnerHTML={{ __html: emojify(user.display_name, user.emojis) }} />
-              <div className="text-gray-500">@{user.acct}</div>
+              <div
+                className="font-bold text-gray-950 dark:text-gray-300"
+                dangerouslySetInnerHTML={{ __html: emojify(user.display_name, user.emojis) }}
+              />
+              <div className="text-gray-600 dark:text-gray-500">@{user.acct}</div>
               <div className="mt-4 raw-html profile" onClick={profileClicked}>
                 <span
                   dangerouslySetInnerHTML={{ __html: emojify(user.note, user.emojis) }}
-                  className="overflow-hidden break-all text-gray-800"
+                  className="overflow-hidden break-all text-gray-800 dark:text-gray-400"
                 />
               </div>
-              <div className="bg-gray-100 overflow-hidden break-all raw-html mt-2 profile" onClick={profileClicked}>
+              <div className="bg-gray-100 dark:bg-gray-800 overflow-hidden break-all raw-html mt-2 profile" onClick={profileClicked}>
                 {user.fields.map((data, index) => (
-                  <dl key={index} className="px-4 py-2 border-gray-200 border-b">
-                    <dt className="text-gray-500">{data.name}</dt>
-                    <dd className="text-gray-700" dangerouslySetInnerHTML={{ __html: emojify(data.value, user.emojis) }} />
+                  <dl key={index} className="px-4 py-2 border-gray-200 dark:border-gray-600 border-b">
+                    <dt className="text-gray-500 dark:text-gray-500">{data.name}</dt>
+                    <dd
+                      className="text-gray-700 dark:text-gray-400"
+                      dangerouslySetInnerHTML={{ __html: emojify(data.value, user.emojis) }}
+                    />
                   </dl>
                 ))}
               </div>

diff --git a/renderer/components/detail/profile/User.tsx b/renderer/components/detail/profile/User.tsx
@@ -15,13 +15,16 @@ export default function User(props: Props) {
   }
 
   return (
-    <div className="border-b mr-2 py-1">
+    <div className="border-b border-gray-200 dark:border-gray-700 mr-2 py-1">
       <div className="flex" onClick={() => openUser(props.user.id)}>
         <div className="p2 cursor-pointer" style={{ width: '56px' }}>
           <Avatar src={props.user.avatar} />
         </div>
         <div>
-          <p className="text-gray-800" dangerouslySetInnerHTML={{ __html: emojify(props.user.display_name, props.user.emojis) }} />
+          <p
+            className="text-gray-800 dark:text-gray-200"
+            dangerouslySetInnerHTML={{ __html: emojify(props.user.display_name, props.user.emojis) }}
+          />
           <p className="text-gray-500">@{props.user.acct}</p>
         </div>
       </div>

diff --git a/renderer/components/report/Report.tsx b/renderer/components/report/Report.tsx
@@ -31,8 +31,8 @@ export default function Report(props: Props) {
             <Typography>
               <FormattedMessage id="report.detail" />
             </Typography>
-            <Textarea id="comment" />
-            <Textarea id="comment" rows={4} />
+            <Textarea id="comment" color="blue-gray" />
+            <Textarea id="comment" color="blue-gray" rows={4} />
           </div>
           <Button className="mt-2" onClick={submit}>
             <FormattedMessage id="report.submit" />

diff --git a/renderer/components/timelines/notification/Follow.tsx b/renderer/components/timelines/notification/Follow.tsx
@@ -18,12 +18,16 @@ export default function Follow(props: Props) {
   }
 
   return (
-    <div className="border-b mr-2 py-1">
+    <div className="border-b border-gray-200 dark:border-gray-800 mr-2 py-1">
       <div className="flex items-center">
         <div style={{ width: '56px' }}>
           <FaUserPlus className="text-blue-600 w-4 mr-2 ml-auto" />
         </div>
-        <div className="cursor-pointer" style={{ width: 'calc(100% - 56px)' }} onClick={() => openUser(props.notification.account.id)}>
+        <div
+          className="cursor-pointer text-gray-950 dark:text-gray-300"
+          style={{ width: 'calc(100% - 56px)' }}
+          onClick={() => openUser(props.notification.account.id)}
+        >
           <span
             dangerouslySetInnerHTML={{
               __html: emojify(
@@ -52,12 +56,14 @@ export default function Follow(props: Props) {
         <div style={{ width: 'calc(100% - 56px)' }}>
           <div className="flex cursor-pointer" onClick={() => openUser(props.notification.account.id)}>
             <span
-              className="text-gray-950 text-ellipsis break-all overflow-hidden"
+              className="text-gray-950 dark:text-gray-300 text-ellipsis break-all overflow-hidden"
               dangerouslySetInnerHTML={{ __html: emojify(props.notification.account.display_name, props.notification.account.emojis) }}
             ></span>
-            <span className="text-gray-600 text-ellipsis break-all overflow-hidden">@{props.notification.account.acct}</span>
+            <span className="text-gray-600 dark:text-gray-500 text-ellipsis break-all overflow-hidden">
+              @{props.notification.account.acct}
+            </span>
           </div>
-          <div className="text-gray-600">
+          <div className="text-gray-600 dark:text-gray-500">
             <FormattedMessage id="notification.follow.followers" values={{ num: props.notification.account.followers_count }} />
           </div>
         </div>

diff --git a/renderer/components/timelines/notification/Reaction.tsx b/renderer/components/timelines/notification/Reaction.tsx
@@ -38,10 +38,14 @@ export default function Reaction(props: Props) {
   }
 
   return (
-    <div className="border-b mr-2 py-1">
+    <div className="border-b border-gray-200 dark:border-gray-800 mr-2 py-1">
       <div className="flex items-center">
         <div style={{ width: '56px' }}>{actionIcon(props.notification)}</div>
-        <div className="cursor-pointer" style={{ width: 'calc(100% - 56px)' }} onClick={() => openUser(props.notification.account.id)}>
+        <div
+          className="cursor-pointer text-gray-950 dark:text-gray-300"
+          style={{ width: 'calc(100% - 56px)' }}
+          onClick={() => openUser(props.notification.account.id)}
+        >
           <span
             dangerouslySetInnerHTML={{
               __html: emojify(
@@ -67,20 +71,20 @@ export default function Reaction(props: Props) {
             alt={formatMessage({ id: 'timeline.status.avatar' }, { user: status.account.username })}
           />
         </div>
-        <div className="text-gray-600 break-all overflow-hidden" style={{ width: 'calc(100% - 56px)' }}>
+        <div className="text-gray-600 dark:text-gray-500 break-all overflow-hidden" style={{ width: 'calc(100% - 56px)' }}>
           <div className="flex justify-between">
             <div className="flex cursor-pointer" onClick={() => openUser(status.account.id)}>
               <span
-                className="text-gray-600 text-ellipsis break-all overflow-hidden"
+                className="text-ellipsis break-all overflow-hidden"
                 dangerouslySetInnerHTML={{ __html: emojify(status.account.display_name, status.account.emojis) }}
               ></span>
-              <span className="text-gray-600 text-ellipsis break-all overflow-hidden">@{status.account.acct}</span>
+              <span className="text-ellipsis break-all overflow-hidden">@{status.account.acct}</span>
             </div>
-            <div className="text-gray-600 text-right cursor-pointer" onClick={openStatus}>
+            <div className="text-right cursor-pointer" onClick={openStatus}>
               <time dateTime={status.created_at}>{dayjs(status.created_at).format('YYYY-MM-DD HH:mm:ss')}</time>
             </div>
           </div>
-          <Body status={status} className="text-gray-600" spoilered={spoilered} setSpoilered={setSpoilered} />
+          <Body status={status} className="text-gray-600 dark:text-gray-500" spoilered={spoilered} setSpoilered={setSpoilered} />
           {!spoilered && (
             <>
               {status.poll && <Poll poll={status.poll} onRefresh={refresh} client={props.client} className="text-gray-600" />}

diff --git a/renderer/pages/_app.tsx b/renderer/pages/_app.tsx
@@ -23,8 +23,12 @@ export default function MyApp({ Component, pageProps }: AppProps) {
           outlined: {
             base: {
               input: {
+                borderWidth: 'placeholder-shown:border dark:placeholder-shown:border',
+                borderColor:
+                  'placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 dark:placeholder-shown:border-blue-gray-700 dark:placeholder-shown:border-t-blue-gray-700',
                 floated: {
-                  borderWidth: 'border focus:border'
+                  borderWidth: 'border focus:border dark:focus:border',
+                  borderColor: 'border-t-transparent focus:border-t-transparent dark:border-t-transparent dark:focus:border-t-transparent'
                 }
               },
               label: {
@@ -41,6 +45,15 @@ export default function MyApp({ Component, pageProps }: AppProps) {
                   }
                 }
               }
+            },
+            colors: {
+              input: {
+                'blue-gray': {
+                  color: 'text-blue-gray-900 dark:text-white',
+                  borderColor: 'border-blue-gray-200',
+                  borderColorFocused: 'focus:border-blue-gray-500 dark:focus:border-blue-gray-500'
+                }
+              }
             }
           }
         }
@@ -52,8 +65,12 @@ export default function MyApp({ Component, pageProps }: AppProps) {
           outlined: {
             base: {
               textarea: {
+                borderWidth: 'placeholder-shown:border dark:placeholder-shown:border',
+                borderColor:
+                  'placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 dark:placeholder-shown:border-blue-gray-700 dark:placeholder-shown:border-t-blue-gray-700',
                 floated: {
-                  borderWidth: 'border focus:border'
+                  borderWidth: 'border focus:border dark:focus:border',
+                  borderColor: 'border-t-transparent focus:border-t-transparent dark:border-t-transparent dark:focus:border-t-transparent'
                 }
               },
               label: {
@@ -70,6 +87,15 @@ export default function MyApp({ Component, pageProps }: AppProps) {
                   }
                 }
               }
+            },
+            colors: {
+              textarea: {
+                'blue-gray': {
+                  color: 'text-blue-gray-900 dark:text-white',
+                  borderColor: 'border-blue-gray-200',
+                  borderColorFocused: 'focus:border-blue-gray-500 dark:focus:border-blue-gray-500'
+                }
+              }
             }
           }
         }
@@ -99,6 +125,23 @@ export default function MyApp({ Component, pageProps }: AppProps) {
           }
         }
       }
+    },
+    dialog: {
+      styles: {
+        base: {
+          container: {
+            bg: 'bg-white dark:bg-gray-900',
+            color: 'text-blue-gray-500 dark:text-blue-gray-400'
+          }
+        }
+      }
+    },
+    dialogHeader: {
+      styles: {
+        base: {
+          color: 'text-blue-gray-900 dark:text-blue-gray-100'
+        }
+      }
     }
   }