refs #4887 Adjust dark mode design

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;
+  }
+}

renderer/components/Jump.tsx

@@ -80,6 +80,7 @@ export default function Jump(props: Props) {
           value={keyword}
           onChange={e => setKeyword(e.target.value)}
           size="lg"
+          color="blue-gray"
           label={formatMessage({ id: 'search.placeholder' })}
           ref={inputRef}
         />

renderer/components/Media.tsx

@@ -56,8 +56,8 @@ export default function Media(props: Props) {
     <Dialog open={props.open} handler={props.close} size="lg">
       <DialogBody className="max-h-full max-w-full">
         <div className="flex">
-          <Button variant="text" onClick={previous} disabled={index < 1}>
+          <Button variant="text" color="teal" onClick={previous} disabled={index < 1}>
-            <FaChevronLeft />
+            <FaChevronLeft className="text-lg" />
           </Button>
           {props.media[index] && (
             <img
@@ -68,8 +68,8 @@ export default function Media(props: Props) {
               style={{ maxWidth: '85%' }}
             />
           )}
-          <Button variant="text" onClick={next} disabled={index >= props.media.length - 1}>
+          <Button variant="text" color="teal" onClick={next} disabled={index >= props.media.length - 1}>
-            <FaChevronRight />
+            <FaChevronRight className="text-lg" />
           </Button>
         </div>
       </DialogBody>

renderer/components/Settings.tsx

@@ -124,7 +124,7 @@ export default function Settings(props: Props) {
               </Typography>
             </div>
             <div>
-              <Input type="number" value={fontSize} onChange={fontSizeChanged} />
+              <Input type="number" color="blue-gray" value={fontSize} onChange={fontSizeChanged} />
             </div>
           </div>
           <div>
@@ -134,7 +134,7 @@ export default function Settings(props: Props) {
               </Typography>
             </div>
             <div>
-              <Select id="language" onChange={languageChanged} value={language}>
+              <Select id="language" color="blue-gray" onChange={languageChanged} value={language}>
                 {languages.map(lang => (
                   <Option key={lang.value} value={lang.value}>
                     {lang.label}
@@ -152,12 +152,14 @@ export default function Settings(props: Props) {
             <div>
               <Radio
                 name="mode"
+                color="blue"
                 label={<FormattedMessage id="settings.dark_mode" />}
                 onClick={() => modeChanged(true)}
                 defaultChecked={isDark}
               />
               <Radio
                 name="mode"
+                color="blue"
                 label={<FormattedMessage id="settings.light_mode" />}
                 onClick={() => modeChanged(false)}
                 defaultChecked={!isDark}
@@ -171,7 +173,7 @@ export default function Settings(props: Props) {
               </Typography>
             </div>
             <div>
-              <Select id="theme" onChange={themeChanged} value={theme}>
+              <Select id="theme" color="blue-gray" onChange={themeChanged} value={theme}>
                 {themes.map(t => (
                   <Option key={t.value} value={t.value}>
                     {t.label}

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" />
                       </>
                     )}
 

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' }}

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' })}>

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
-              <div className="text-gray-500">@{user.acct}</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">
+                  <dl key={index} className="px-4 py-2 border-gray-200 dark:border-gray-600 border-b">
-                    <dt className="text-gray-500">{data.name}</dt>
+                    <dt className="text-gray-500 dark:text-gray-500">{data.name}</dt>
-                    <dd className="text-gray-700" dangerouslySetInnerHTML={{ __html: emojify(data.value, user.emojis) }} />
+                    <dd
+                      className="text-gray-700 dark:text-gray-400"
+                      dangerouslySetInnerHTML={{ __html: emojify(data.value, user.emojis) }}
+                    />
                   </dl>
                 ))}
               </div>

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>

renderer/components/report/Report.tsx

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

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>

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" />}

renderer/components/timelines/status/Poll.tsx

@@ -42,7 +42,7 @@ function SimplePoll(props: Props) {
         </div>
       ))}
       <div className="flex gap-2 items-center mt-2">
-        <Button size="sm" onClick={vote} variant="outlined">
+        <Button size="sm" color="teal" onClick={vote} variant="outlined">
           <FormattedMessage id="timeline.status.poll.vote" />
         </Button>
         <div>
@@ -79,7 +79,7 @@ function MultiplePoll(props: Props) {
         </div>
       ))}
       <div className="flex gap-2 items-center mt-2">
-        <Button size="sm" onClick={vote} variant="outlined">
+        <Button size="sm" color="teal" onClick={vote} variant="outlined">
           <FormattedMessage id="timeline.status.poll.vote" />
         </Button>
         <div>
@@ -104,7 +104,7 @@ function PollResult(props: Props) {
         </div>
       ))}
       <div className="flex gap-2 items-center mt-2">
-        <Button size="sm" onClick={props.onRefresh} variant="outlined">
+        <Button size="sm" color="teal" onClick={props.onRefresh} variant="outlined">
           <FormattedMessage id="timeline.status.poll.refresh" />
         </Button>
         <div>

renderer/components/timelines/status/Status.tsx

@@ -79,7 +79,7 @@ export default function Status(props: Props) {
     props.filters.map(f => f.phrase).filter(keyword => props.status.content.toLowerCase().includes(keyword.toLowerCase())).length > 0
   ) {
     return (
-      <div className="border-b border-gray-200 dark:border-gray-800 mr-2 py-2 text-center">
+      <div className="border-b border-gray-200 dark:border-gray-800 text-gray-950 dark:text-gray-300 mr-2 py-2 text-center">
         <FormattedMessage id="timeline.status.filtered" />
         <span className="theme-text-subtle cursor-pointer pl-4" onClick={() => setIgnoreFilter(true)}>
           <FormattedMessage id="timeline.status.show_anyway" />

renderer/pages/_app.tsx

@@ -13,7 +13,10 @@ export default function MyApp({ Component, pageProps }: AppProps) {
     popover: {
       styles: {
         base: {
-          p: 'p-0'
+          bg: 'bg-white dark:bg-gray-900',
+          p: 'p-0',
+          border: 'border border-blue-gray-50 dark:border-blue-gray-800',
+          boxShadow: 'shadow-lg shadow-blue-gray-500/10 dark:shadow-blue-gray-200/10'
         }
       }
     },
@@ -23,8 +26,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 +48,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 +68,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 +90,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'
+                }
+              }
             }
           }
         }
@@ -77,6 +106,15 @@ export default function MyApp({ Component, pageProps }: AppProps) {
     },
     select: {
       styles: {
+        base: {
+          select: {
+            color: 'text-blue-gray-700 dark:text-blue-gray-200'
+          },
+          menu: {
+            bg: 'bg-white dark:bg-gray-900',
+            border: 'border border-blue-gray-50 dark:border-blue-gray-800'
+          }
+        },
         variants: {
           outlined: {
             states: {
@@ -99,6 +137,235 @@ export default function MyApp({ Component, pageProps }: AppProps) {
           }
         }
       }
+    },
+    radio: {
+      styles: {
+        base: {
+          label: {
+            color: 'text-gray-700 dark:text-gray-400'
+          }
+        }
+      }
+    },
+    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'
+        }
+      }
+    },
+    dialogBody: {
+      defaultProps: {
+        className: '',
+        divider: false
+      },
+      styles: {
+        base: {
+          initial: {
+            color: 'text-blue-gray-500 dark:text-blue-gray-300'
+          }
+        }
+      }
+    },
+    list: {
+      styles: {
+        base: {
+          list: {
+            color: 'text-blue-gray-700 dark:text-blue-gray-300'
+          },
+          item: {
+            selected: {
+              color: 'text-blue-gray-700 dark:text-blue-gray-900'
+            }
+          }
+        }
+      }
+    },
+    button: {
+      styles: {
+        variants: {
+          outlined: {
+            white: {
+              focus: 'focus:ring-0'
+            },
+            'blue-gray': {
+              focus: 'focus:ring-0'
+            },
+            gray: {
+              focus: 'focus:ring-0'
+            },
+            brown: {
+              focus: 'focus:ring-0'
+            },
+            'deep-orange': {
+              focus: 'focus:ring-0'
+            },
+            orange: {
+              focus: 'focus:ring-0'
+            },
+            amber: {
+              focus: 'focus:ring-0'
+            },
+            yellow: {
+              focus: 'focus:ring-0'
+            },
+            lime: {
+              focus: 'focus:ring-0'
+            },
+            'light-green': {
+              focus: 'focus:ring-0'
+            },
+            green: {
+              focus: 'focus:ring-0'
+            },
+            teal: {
+              focus: 'focus:ring-0'
+            },
+            cyan: {
+              focus: 'focus:ring-0'
+            },
+            'light-blue': {
+              focus: 'focus:ring-0'
+            },
+            blue: {
+              focus: 'focus:ring-0'
+            },
+            indigo: {
+              focus: 'focus:ring-0'
+            },
+            'deep-purple': {
+              focus: 'focus:ring-0'
+            },
+            purple: {
+              focus: 'focus:ring-0'
+            },
+            pink: {
+              focus: 'focus:ring-0'
+            },
+            red: {
+              focus: 'focus:ring-0'
+            }
+          }
+        }
+      }
+    },
+    iconButton: {
+      styles: {
+        variants: {
+          outlined: {
+            white: {
+              focus: 'focus:ring-0'
+            },
+            'blue-gray': {
+              focus: 'focus:ring-0'
+            },
+            gray: {
+              focus: 'focus:ring-0'
+            },
+            brown: {
+              focus: 'focus:ring-0'
+            },
+            'deep-orange': {
+              focus: 'focus:ring-0'
+            },
+            orange: {
+              focus: 'focus:ring-0'
+            },
+            amber: {
+              focus: 'focus:ring-0'
+            },
+            yellow: {
+              focus: 'focus:ring-0'
+            },
+            lime: {
+              focus: 'focus:ring-0'
+            },
+            'light-green': {
+              focus: 'focus:ring-0'
+            },
+            green: {
+              focus: 'focus:ring-0'
+            },
+            teal: {
+              focus: 'focus:ring-0'
+            },
+            cyan: {
+              focus: 'focus:ring-0'
+            },
+            'light-blue': {
+              focus: 'focus:ring-0'
+            },
+            blue: {
+              focus: 'focus:ring-0'
+            },
+            indigo: {
+              focus: 'focus:ring-0'
+            },
+            'deep-purple': {
+              focus: 'focus:ring-0'
+            },
+            purple: {
+              focus: 'focus:ring-0'
+            },
+            pink: {
+              focus: 'focus:ring-0'
+            },
+            red: {
+              focus: 'focus:ring-0'
+            }
+          }
+        }
+      }
+    },
+    progress: {
+      styles: {
+        base: {
+          container: {
+            initial: {
+              bg: 'bg-blue-gray-50 dark:bg-blue-gray-800'
+            }
+          }
+        }
+      }
+    },
+    tabsHeader: {
+      defaultProps: {
+        className: ''
+      },
+      styles: {
+        base: {
+          bg: 'bg-blue-gray-50 dark:bg-blue-gray-800'
+        }
+      }
+    },
+    tab: {
+      defaultProps: {
+        className: '',
+        activeClassName: '',
+        disabled: false
+      },
+      styles: {
+        base: {
+          tab: {
+            initial: {
+              color: 'text-blue-gray-900 dark:text-blue-gray-200'
+            }
+          },
+          indicator: {
+            bg: 'bg-white dark:bg-gray-700'
+          }
+        }
+      }
     }
   }