fix: dark mode style (#21)

Signed-off-by: Innei <i@innei.in>
RSSNext · May 27, 2024 · 2574279 · 2574279
1 parent db45b5e
commit 2574279
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 18 deletions.
diff --git a/cssAsPlugin.js b/cssAsPlugin.js
@@ -0,0 +1,24 @@
+// https://github.com/tailwindlabs/tailwindcss-intellisense/issues/227#issuecomment-1462034856
+// cssAsPlugin.js
+const postcss = require("postcss")
+const postcssJs = require("postcss-js")
+const { readFileSync } = require("node:fs")
+
+require.extensions[".css"] = function (module, filename) {
+  const cssAsPlugin = ({ addBase, addComponents, addUtilities }) => {
+    const css = readFileSync(filename, "utf8")
+    const root = postcss.parse(css)
+    const jss = postcssJs.objectify(root)
+
+    if ("@layer base" in jss) {
+      addBase(jss["@layer base"])
+    }
+    if ("@layer components" in jss) {
+      addComponents(jss["@layer components"])
+    }
+    if ("@layer utilities" in jss) {
+      addUtilities(jss["@layer utilities"])
+    }
+  }
+  module.exports = cssAsPlugin
+}
diff --git a/package.json b/package.json
@@ -91,6 +91,8 @@
     "eslint": "^9.3.0",
     "eslint-config-hyoban": "^2.9.3",
     "lint-staged": "15.2.4",
+    "postcss": "8.4.38",
+    "postcss-js": "4.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "simple-git-hooks": "2.11.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/renderer/src/assets/base.css b/src/renderer/src/assets/base.css
@@ -7,14 +7,6 @@ body,
   font-family: "SN Pro", sans-serif;
 }
 
-.drag-region {
-  -webkit-app-region: drag;
-}
-
-.no-drag-region {
-  -webkit-app-region: no-drag;
-}
-
 button,
 a {
   @apply cursor-default;

diff --git a/src/renderer/src/assets/tailwind-extend.css b/src/renderer/src/assets/tailwind-extend.css
@@ -0,0 +1,13 @@
+/* This CSS File do not import anywhere, just write atom class for tailwindcss. The tailwindcss intellisense will be work. */
+
+@tailwind components;
+
+@layer components {
+  .drag-region {
+    -webkit-app-region: drag;
+  }
+
+  .no-drag-region {
+    -webkit-app-region: no-drag;
+  }
+}
diff --git a/src/renderer/src/components/entry-column/article-item.tsx b/src/renderer/src/components/entry-column/article-item.tsx
@@ -2,13 +2,14 @@ import { FeedIcon } from "@renderer/components/feed-icon"
 import { Image } from "@renderer/components/ui/image"
 import dayjs from "@renderer/lib/dayjs"
 import type { EntriesResponse } from "@renderer/lib/types"
+import { cn } from "@renderer/lib/utils"
 
 export function ArticleItem({ entry }: { entry: EntriesResponse[number] }) {
   return (
     <div className="my-5 flex px-2 py-3">
       <FeedIcon feed={entry.feeds} />
       <div className="-mt-0.5 line-clamp-5 flex-1 text-sm leading-tight">
-        <div className="space-x-1 text-[10px] text-zinc-500">
+        <div className="space-x-1 text-[10px] font-bold text-zinc-500">
           <span>{entry.feeds.title}</span>
           <span>·</span>
           <span>
@@ -20,7 +21,15 @@ export function ArticleItem({ entry }: { entry: EntriesResponse[number] }) {
               .humanize()}
           </span>
         </div>
-        <div className="my-0.5 break-words font-medium">{entry.title}</div>
+
+        <div
+          className={cn(
+            "my-0.5 break-words font-medium text-foreground/60",
+            !entry.read && "text-black dark:text-white/90",
+          )}
+        >
+          {entry.title}
+        </div>
         <div className="text-[13px] text-zinc-500">{entry.description}</div>
       </div>
       {entry.images?.[0] && (

diff --git a/src/renderer/src/components/entry-column/item-wrapper.tsx b/src/renderer/src/components/entry-column/item-wrapper.tsx
@@ -62,8 +62,8 @@ export function EntryItemWrapper({
       key={entry.id}
       className={cn(
         "rounded-md transition-colors",
-        activeEntry === entry.id && "bg-native-active",
-        entry.read && "text-foreground/50",
+        activeEntry === entry.id && "bg-native-active/50",
+        entry.read && "text-foreground/80",
       )}
       ref={itemRef}
       onClick={(e) => {

diff --git a/src/renderer/src/components/entry-content/index.tsx b/src/renderer/src/components/entry-content/index.tsx
@@ -38,7 +38,7 @@ export function EntryContent({ entryId }: { entryId: ActiveEntry }) {
           <a
             href={entry.data?.url || void 0}
             target="_blank"
-            className="mx-auto block max-w-[598px] rounded-md p-6 transition-colors hover:bg-zinc-100"
+            className="mx-auto block max-w-[598px] rounded-md p-6 transition-colors hover:bg-zinc-100 dark:hover:bg-neutral-800"
             rel="noreferrer"
           >
             <div className="select-text break-words text-3xl font-bold">

diff --git a/src/renderer/src/pages/(main)/(context)/index.tsx b/src/renderer/src/pages/(main)/(context)/index.tsx
@@ -27,7 +27,8 @@ export function Component() {
     <>
       <div
         className={cn(
-          "h-full shrink-0 overflow-y-auto border-r pt-10",
+          "h-full shrink-0 overflow-y-auto border-r",
+          window.electron ? "pt-10" : "pt-4",
           activeList && wideMode.has(activeList.view) ? "flex-1" : "w-[340px]",
         )}
       >

diff --git a/src/renderer/src/pages/(main)/(context)/layout.tsx b/src/renderer/src/pages/(main)/(context)/layout.tsx
@@ -1,10 +1,11 @@
 import { FeedColumn } from "@renderer/components/feed-column"
+import { cn } from "@renderer/lib/utils"
 import { Outlet } from "react-router-dom"
 
 export function Component() {
   return (
     <div className="flex h-full">
-      <div className="w-64 shrink-0 border-r bg-native/80 pt-10 backdrop-blur">
+      <div className={cn("w-64 shrink-0 border-r bg-native/80 backdrop-blur", window.electron ? "pt-10" : "pt-4")}>
         <FeedColumn />
       </div>
       <div className="flex flex-1 bg-background">

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -1,5 +1,7 @@
 const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")
 
+require("./cssAsPlugin")
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
@@ -88,5 +90,6 @@ module.exports = {
     }),
     require("tailwindcss-animate"),
     require("@tailwindcss/typography"),
+    require("./src/renderer/src/assets/tailwind-extend.css"),
   ],
 }