refs #4795 Implement basic theme color

package.json

@@ -57,6 +57,7 @@
     "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sass": "^1.71.1",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2"
   },

renderer/app.scss

@@ -112,3 +112,76 @@ a {
  a:hover {
   text-decoration: underline;
 }
+
+.theme-blue {
+  .theme-account-bg {
+    @apply bg-gradient-to-b;
+    @apply from-indigo-800;
+    @apply to-indigo-700;
+  }
+
+  .theme-bg {
+    @apply bg-blue-950;
+  }
+
+  .theme-bg-secondary {
+    @apply bg-blue-900;
+  }
+
+  .theme-text-primary {
+    @apply text-blue-100;
+  }
+
+  .theme-text-subtle {
+    @apply text-blue-600;
+  }
+
+  .theme-badge {
+    @apply bg-blue-600;
+  }
+
+  .theme-enabled {
+    @apply text-blue-400;
+  }
+
+  .theme-enabled:hover {
+    @apply text-blue-600;
+  }
+
+}
+
+.theme-orange {
+  .theme-account-bg {
+    @apply bg-gradient-to-b;
+    @apply from-orange-900;
+    @apply to-orange-800;
+  }
+
+  .theme-bg {
+    @apply bg-deep-orange-900;
+  }
+
+  .theme-bg-secondary {
+    @apply bg-orange-900;
+  }
+
+  .theme-text-primary {
+    @apply text-deep-orange-100;
+  }
+
+  .theme-text-subtle {
+    @apply text-deep-orange-600;
+  }
+
+  .theme-badge {
+    @apply bg-deep-orange-600;
+  }
+
+  .theme-enabled {
+    @apply text-deep-orange-400;
+  }
+
+  .theme-enabled:hover {
+    @apply text-deep-orange-600;
+  }
+}

renderer/components/compose/Compose.tsx

@@ -349,12 +349,7 @@ export default function Compose(props: Props) {
           </Popover>
 
           {cw ? (
-            <IconButton
-              variant="text"
-              size="sm"
-              className="text-blue-400 hover:text-blue-600 leading-4 text-base"
-              onClick={() => setCW(false)}
-            >
+            <IconButton variant="text" size="sm" className="theme-enabled leading-4 text-base" onClick={() => setCW(false)}>
               CW
             </IconButton>
           ) : (

renderer/components/detail/Detail.tsx

@@ -46,7 +46,7 @@ export default function Detail(props: Props) {
     <>
       {target && (
         <div className={`bg-white ${props.className}`} style={props.style}>
-          <div className="bg-blue-900 text-gray-200 flex justify-between p-2 items-center" style={{ height: '44px' }}>
+          <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' })}>
                 <FaChevronLeft onClick={back} />

renderer/components/layouts/account.tsx

@@ -100,7 +100,7 @@ export default function Layout({ children }: LayoutProps) {
 
   const selectedClassName = (id: number) => {
     if (id === parseInt(router.query.id as string)) {
-      return 'bg-blue-950 cursor-pointer text-center'
+      return 'theme-bg cursor-pointer text-center'
     } else {
       return 'cursor-pointer text-center'
     }
@@ -120,9 +120,9 @@ export default function Layout({ children }: LayoutProps) {
   }
 
   return (
-    <div className="app flex flex-col min-h-screen" style={style}>
+    <div className="app flex flex-col min-h-screen theme-blue" style={style}>
       <main className="flex w-full box-border my-0 mx-auto min-h-screen">
-        <aside className="w-16 bg-gray-900 flex flex-col justify-between">
+        <aside className="w-16 theme-account-bg flex flex-col justify-between">
           <div>
             {accounts.map(account => (
               <div key={account.id} className={selectedClassName(account.id)}>

renderer/components/layouts/timelines.tsx

@@ -94,7 +94,7 @@ export default function Layout({ children }: LayoutProps) {
   return (
     <section className="flex h-screen w-full overflow-hidden">
       <Jump opened={openJump} close={() => setOpenJump(false)} timelines={pages} />
-      <Card className="text-blue-100 sidebar w-64 bg-blue-950 rounded-none">
+      <Card className="theme-text-primary sidebar w-64 theme-bg rounded-none">
         <div className="max-w-full pl-4 mt-2 mb-4 my-profile">
           <p>{account?.username}</p>
           <p>@{account?.domain}</p>
@@ -105,7 +105,7 @@ export default function Layout({ children }: LayoutProps) {
               key={page.id}
               selected={router.asPath.includes(page.path)}
               onClick={() => router.push(page.path)}
-              className="sidebar-menu-item text-blue-100 overflow-hidden whitespace-nowrap"
+              className="sidebar-menu-item theme-text-primary overflow-hidden whitespace-nowrap"
               title={page.title}
             >
               <ListItemPrefix>{page.icon}</ListItemPrefix>
@@ -116,7 +116,7 @@ export default function Layout({ children }: LayoutProps) {
                     value={unreads[account.id.toString()]}
                     variant="ghost"
                     size="sm"
-                    className="rounded-full text-blue-100 bg-blue-600"
+                    className="rounded-full theme-text-primary theme-badge"
                   />
                 </ListItemSuffix>
               ) : null}
@@ -127,7 +127,7 @@ export default function Layout({ children }: LayoutProps) {
               key={list.id}
               selected={router.asPath.includes(`list_${list.id}`)}
               onClick={() => router.push({ pathname: `/accounts/${router.query.id}/list_${list.id}` })}
-              className="sidebar-menu-item text-blue-100 overflow-hidden whitespace-nowrap"
+              className="sidebar-menu-item theme-text-primary overflow-hidden whitespace-nowrap"
               title={list.title}
             >
               <ListItemPrefix>

renderer/components/timelines/Notifications.tsx

@@ -183,7 +183,7 @@ export default function Notifications(props: Props) {
   return (
     <div className="flex timeline-wrapper">
       <section className={`h-full ${timelineClass()}`}>
-        <div className="w-full bg-blue-950 text-blue-100 p-2 flex justify-between">
+        <div className="w-full theme-bg theme-text-primary p-2 flex justify-between">
           <div className="text-lg font-bold cursor-pointer" onClick={() => backToTop()}>
             <FormattedMessage id="timeline.notifications" />
           </div>

renderer/components/timelines/Timeline.tsx

@@ -244,7 +244,7 @@ export default function Timeline(props: Props) {
   return (
     <div className="flex timeline-wrapper">
       <section className={`h-full ${timelineClass()}`}>
-        <div className="w-full bg-blue-950 text-blue-100 p-2 flex justify-between">
+        <div className="w-full theme-bg theme-text-primary p-2 flex justify-between">
           <div className="text-lg font-bold cursor-pointer" onClick={() => backToTop()}>
             {props.timeline.match(/list_(\d+)/) ? <>{list && list.title}</> : <FormattedMessage id={`timeline.${props.timeline}`} />}
           </div>

renderer/components/timelines/status/Status.tsx

@@ -81,7 +81,7 @@ export default function Status(props: Props) {
     return (
       <div className="border-b mr-2 py-2 text-center">
         <FormattedMessage id="timeline.status.filtered" />
-        <span className="text-blue-700 cursor-pointer pl-4" onClick={() => setIgnoreFilter(true)}>
+        <span className="theme-text-subtle cursor-pointer pl-4" onClick={() => setIgnoreFilter(true)}>
           <FormattedMessage id="timeline.status.show_anyway" />
         </span>
       </div>

renderer/pages/_app.tsx

@@ -1,5 +1,5 @@
 import type { AppProps } from 'next/app'
-import '../app.css'
+import '../app.scss'
 import AccountLayout from '@/components/layouts/account'
 import TimelineLayout from '@/components/layouts/timelines'
 import { IntlProviderWrapper } from '@/provider/i18n'

yarn.lock

@@ -2724,6 +2724,7 @@ __metadata:
     react-intl: ^6.5.1
     react-virtuoso: ^4.6.2
     sanitize-html: ^2.11.0
+    sass: ^1.71.1
     tailwindcss: ^3.3.3
     typescript: ^5.2.2
   languageName: unknown
@@ -3580,6 +3581,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:>=3.0.0 <4.0.0":
+  version: 3.6.0
+  resolution: "chokidar@npm:3.6.0"
+  dependencies:
+    anymatch: ~3.1.2
+    braces: ~3.0.2
+    fsevents: ~2.3.2
+    glob-parent: ~5.1.2
+    is-binary-path: ~2.1.0
+    is-glob: ~4.0.1
+    normalize-path: ~3.0.0
+    readdirp: ~3.6.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: d2f29f499705dcd4f6f3bbed79a9ce2388cf530460122eed3b9c48efeab7a4e28739c6551fd15bec9245c6b9eeca7a32baa64694d64d9b6faeb74ddb8c4a413d
+  languageName: node
+  linkType: hard
+
 "chokidar@npm:^3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
@@ -5605,6 +5625,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:^4.0.0":
+  version: 4.3.5
+  resolution: "immutable@npm:4.3.5"
+  checksum: 0e25dd5c314421faede9e1122ab26cdb638cc3edc8678c4a75dee104279b12621a30c80a480fae7f68bc7e81672f1e672e454dc0fdc7e6cf0af10809348387b8
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.2.1":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
@@ -7967,6 +7994,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass@npm:^1.71.1":
+  version: 1.71.1
+  resolution: "sass@npm:1.71.1"
+  dependencies:
+    chokidar: ">=3.0.0 <4.0.0"
+    immutable: ^4.0.0
+    source-map-js: ">=0.6.2 <2.0.0"
+  bin:
+    sass: sass.js
+  checksum: 19c4939d3042eb9459d462bbd27b1f576fa18034e23c87ca0005b87effdee431c16503b5a785edcdcde1a76dfb804716d9ad42c85a78968ac3825d515e45cb53
+  languageName: node
+  linkType: hard
+
 "sax@npm:^1.2.4":
   version: 1.3.0
   resolution: "sax@npm:1.3.0"
@@ -8193,7 +8233,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:^1.0.2":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.2":
   version: 1.0.2
   resolution: "source-map-js@npm:1.0.2"
   checksum: c049a7fc4deb9a7e9b481ae3d424cc793cb4845daa690bc5a05d428bf41bf231ced49b4cf0c9e77f9d42fdb3d20d6187619fc586605f5eabe995a316da8d377c