From d058a81be449afc49c5f843eb6054df738e59e90 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Tue, 12 Mar 2024 23:02:18 +0900
Subject: [PATCH 1/2] refs #4887 Switch dark/light mode

---
 locales/en/translation.json                   |  3 ++
 renderer/components/Settings.tsx              | 42 ++++++++++++++++++-
 renderer/components/layouts/account.tsx       | 15 ++++++-
 renderer/components/timelines/status/Card.tsx |  2 +-
 .../components/timelines/status/Status.tsx    | 14 +++----
 renderer/pages/_document.tsx                  | 16 +++++++
 renderer/tailwind.config.js                   |  1 +
 7 files changed, 83 insertions(+), 10 deletions(-)
 create mode 100644 renderer/pages/_document.tsx

diff --git a/locales/en/translation.json b/locales/en/translation.json
index 4f686787..269b2bef 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -167,6 +167,9 @@
     "title": "Settings",
     "language": "Language",
     "font_size": "Font size",
+    "mode": "Color mode",
+    "dark_mode": "Dark mode",
+    "light_mode": "Light mode",
     "theme": "Color theme"
   },
   "thirdparty": {
diff --git a/renderer/components/Settings.tsx b/renderer/components/Settings.tsx
index 69190110..bad685bf 100644
--- a/renderer/components/Settings.tsx
+++ b/renderer/components/Settings.tsx
@@ -1,5 +1,5 @@
 import { localeType } from '@/provider/i18n'
-import { Dialog, DialogBody, DialogHeader, Input, Option, Select, Typography } from '@material-tailwind/react'
+import { Dialog, DialogBody, DialogHeader, Input, Option, Radio, Select, Typography } from '@material-tailwind/react'
 import { ChangeEvent, useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
@@ -55,6 +55,7 @@ export default function Settings(props: Props) {
   const [language, setLanguage] = useState<localeType>('en')
   const [fontSize, setFontSize] = useState<number>(16)
   const [theme, setTheme] = useState<string>('theme-blue')
+  const [isDark, setIsDark] = useState(false)
 
   useEffect(() => {
     if (typeof localStorage !== 'undefined') {
@@ -64,6 +65,12 @@ export default function Settings(props: Props) {
       } else {
         setLanguage('en')
       }
+      const dark = localStorage.getItem('color-mode')
+      if (dark === 'dark') {
+        setIsDark(true)
+      } else {
+        setIsDark(false)
+      }
     }
   }, [])
 
@@ -91,6 +98,18 @@ export default function Settings(props: Props) {
     props.reloadSettings()
   }
 
+  const modeChanged = (isDark: boolean) => {
+    setIsDark(isDark)
+    if (typeof localStorage !== 'undefined') {
+      if (isDark) {
+        localStorage.setItem('color-mode', 'dark')
+      } else {
+        localStorage.setItem('color-mode', 'light')
+      }
+    }
+    props.reloadSettings()
+  }
+
   return (
     <Dialog open={props.opened} handler={props.close} size="sm">
       <DialogHeader>
@@ -124,6 +143,27 @@ export default function Settings(props: Props) {
               </Select>
             </div>
           </div>
+          <div>
+            <div className="mb-2">
+              <Typography>
+                <FormattedMessage id="settings.mode" />
+              </Typography>
+            </div>
+            <div>
+              <Radio
+                name="mode"
+                label={<FormattedMessage id="settings.dark_mode" />}
+                onClick={() => modeChanged(true)}
+                defaultChecked={isDark}
+              />
+              <Radio
+                name="mode"
+                label={<FormattedMessage id="settings.light_mode" />}
+                onClick={() => modeChanged(false)}
+                defaultChecked={!isDark}
+              />
+            </div>
+          </div>
           <div>
             <div className="mb-2">
               <Typography>
diff --git a/renderer/components/layouts/account.tsx b/renderer/components/layouts/account.tsx
index 073658e3..ebe0f791 100644
--- a/renderer/components/layouts/account.tsx
+++ b/renderer/components/layouts/account.tsx
@@ -34,6 +34,7 @@ export default function Layout({ children }: LayoutProps) {
   const [style, setStyle] = useState<CSSProperties>({})
   const [openPopover, setOpenPopover] = useState(false)
   const [theme, setTheme] = useState('theme-blue')
+  const [isDark, setIsDark] = useState(false)
 
   const { switchLang } = useContext(Context)
   const router = useRouter()
@@ -69,6 +70,11 @@ export default function Layout({ children }: LayoutProps) {
     }
   }, [])
 
+  useEffect(() => {
+    console.log('isDark', isDark)
+    document.body.className = isDark ? 'dark' : 'light'
+  }, [isDark])
+
   const closeNewModal = async () => {
     const acct = await db.accounts.toArray()
     setAccounts(acct)
@@ -121,12 +127,19 @@ export default function Layout({ children }: LayoutProps) {
       if (t && t.length > 0) {
         setTheme(t)
       }
+      const dark = localStorage.getItem('color-mode')
+      console.log(dark)
+      if (dark && dark === 'dark') {
+        setIsDark(true)
+      } else {
+        setIsDark(false)
+      }
     }
   }
 
   return (
     <div className={`app flex flex-col min-h-screen ${theme}`} style={style}>
-      <main className="flex w-full box-border my-0 mx-auto min-h-screen">
+      <main className="flex w-full box-border my-0 mx-auto min-h-screen bg-white dark:bg-gray-900">
         <aside className="w-16 theme-account-bg flex flex-col justify-between">
           <div>
             {accounts.map(account => (
diff --git a/renderer/components/timelines/status/Card.tsx b/renderer/components/timelines/status/Card.tsx
index 4348312b..f0b1529d 100644
--- a/renderer/components/timelines/status/Card.tsx
+++ b/renderer/components/timelines/status/Card.tsx
@@ -12,7 +12,7 @@ export default function Card(props: Props) {
 
   return (
     <div
-      className="flex border-inherit border border-solid rounded-md w-full cursor-pointer overflow-hidden text-ellipsis mb-1"
+      className="flex border-inherit border border-solid border-gray-200 dark:border-gray-800 rounded-md w-full cursor-pointer overflow-hidden text-ellipsis mb-1"
       onClick={openCard}
     >
       <div style={{ height: '60px', width: '60px' }}>
diff --git a/renderer/components/timelines/status/Status.tsx b/renderer/components/timelines/status/Status.tsx
index 97464e65..3c8fd6dd 100644
--- a/renderer/components/timelines/status/Status.tsx
+++ b/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 mr-2 py-2 text-center">
+      <div className="border-b border-gray-200 dark:border-gray-800 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" />
@@ -89,7 +89,7 @@ export default function Status(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">
       {rebloggedHeader(
         props.status,
         formatMessage(
@@ -114,16 +114,16 @@ export default function Status(props: Props) {
             )}
           />
         </div>
-        <div className="text-gray-950 break-all overflow-hidden" style={{ width: 'calc(100% - 56px)' }}>
+        <div className="text-gray-950 dark:text-gray-300 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-950 text-ellipsis break-all overflow-hidden"
+                className="text-gray-950 dark:text-gray-300 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-gray-600 dark:text-gray-500 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-gray-600 dark:text-gray-500 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>
@@ -164,7 +164,7 @@ const originalStatus = (status: Entity.Status) => {
 const rebloggedHeader = (status: Entity.Status, alt: string) => {
   if (status.reblog && !status.quote) {
     return (
-      <div className="flex text-gray-600">
+      <div className="flex text-gray-600 dark:text-gray-500">
         <div className="grid justify-items-end pr-2" style={{ width: '56px' }}>
           <Avatar src={status.account.avatar} size="xs" variant="rounded" alt={alt} />
         </div>
diff --git a/renderer/pages/_document.tsx b/renderer/pages/_document.tsx
new file mode 100644
index 00000000..b8d05a34
--- /dev/null
+++ b/renderer/pages/_document.tsx
@@ -0,0 +1,16 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+export default class MyDocument extends Document {
+  render() {
+    const pageProps = this.props?.__NEXT_DATA__?.props?.pageProps
+    return (
+      <Html>
+        <Head />
+        <body className={pageProps.isDark ? 'dark' : 'light'}>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/renderer/tailwind.config.js b/renderer/tailwind.config.js
index af800803..ff5b6aaa 100644
--- a/renderer/tailwind.config.js
+++ b/renderer/tailwind.config.js
@@ -1,6 +1,7 @@
 const withMT = require('@material-tailwind/react/utils/withMT')
 
 module.exports = withMT({
+  darkMode: 'selector',
   content: ['./renderer/pages/**/*.{js,ts,jsx,tsx}', './renderer/components/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {

From 82393aee73ebef48adb012e0b3d5bc679c0bba34 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 15 Mar 2024 01:12:19 +0900
Subject: [PATCH 2/2] refs #4887 Adjust dark mode design

---
 renderer/app.scss                             |  19 ++
 renderer/components/Jump.tsx                  |   1 +
 renderer/components/Media.tsx                 |   8 +-
 renderer/components/Settings.tsx              |   8 +-
 renderer/components/accounts/New.tsx          |   4 +-
 renderer/components/compose/Compose.tsx       |   8 +-
 renderer/components/detail/Detail.tsx         |   2 +-
 renderer/components/detail/Profile.tsx        |  22 +-
 renderer/components/detail/profile/User.tsx   |   7 +-
 renderer/components/report/Report.tsx         |   2 +-
 .../timelines/notification/Follow.tsx         |  16 +-
 .../timelines/notification/Reaction.tsx       |  18 +-
 renderer/components/timelines/status/Poll.tsx |   6 +-
 .../components/timelines/status/Status.tsx    |   2 +-
 renderer/pages/_app.tsx                       | 273 +++++++++++++++++-
 15 files changed, 352 insertions(+), 44 deletions(-)

diff --git a/renderer/app.scss b/renderer/app.scss
index d5a5867d..ffef9ba5 100644
--- 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/Jump.tsx b/renderer/components/Jump.tsx
index ba012ca9..a2f59ced 100644
--- a/renderer/components/Jump.tsx
+++ b/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}
         />
diff --git a/renderer/components/Media.tsx b/renderer/components/Media.tsx
index 3ee54ed4..46663fe0 100644
--- a/renderer/components/Media.tsx
+++ b/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}>
-            <FaChevronLeft />
+          <Button variant="text" color="teal" onClick={previous} disabled={index < 1}>
+            <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}>
-            <FaChevronRight />
+          <Button variant="text" color="teal" onClick={next} disabled={index >= props.media.length - 1}>
+            <FaChevronRight className="text-lg" />
           </Button>
         </div>
       </DialogBody>
diff --git a/renderer/components/Settings.tsx b/renderer/components/Settings.tsx
index bad685bf..b098fdc5 100644
--- a/renderer/components/Settings.tsx
+++ b/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}
diff --git a/renderer/components/accounts/New.tsx b/renderer/components/accounts/New.tsx
index cf118490..dd6fd036 100644
--- 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
index 70c35f73..0f5b936c 100644
--- 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
index 0fd9bb21..e2cf593f 100644
--- 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
index 8c414c86..4a08449d 100644
--- 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
index bdbdb61a..181bf046 100644
--- 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
index e11609ed..d8a72c39 100644
--- a/renderer/components/report/Report.tsx
+++ b/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" />
diff --git a/renderer/components/timelines/notification/Follow.tsx b/renderer/components/timelines/notification/Follow.tsx
index 302d953b..145ffdf4 100644
--- 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
index 79fef571..09a71bca 100644
--- 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/components/timelines/status/Poll.tsx b/renderer/components/timelines/status/Poll.tsx
index 4767f8c8..eefd96b6 100644
--- a/renderer/components/timelines/status/Poll.tsx
+++ b/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>
diff --git a/renderer/components/timelines/status/Status.tsx b/renderer/components/timelines/status/Status.tsx
index 3c8fd6dd..73e39c79 100644
--- a/renderer/components/timelines/status/Status.tsx
+++ b/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" />
diff --git a/renderer/pages/_app.tsx b/renderer/pages/_app.tsx
index 6f920cf1..9579946c 100644
--- a/renderer/pages/_app.tsx
+++ b/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'
+          }
+        }
+      }
     }
   }