fix: dark mode style (#21)

Signed-off-by: Innei <i@innei.in>
2024-05-28 00:53:13 +08:00 · 2024-05-28 00:53:13 +08:00 · 257427906b
parent db45b5e65a
commit 257427906b
11 changed files with 69 additions and 18 deletions
--- 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
+}
--- 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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -207,6 +207,12 @@ importers:
      lint-staged:
        specifier: 15.2.4
        version: 15.2.4
+      postcss:
+        specifier: 8.4.38
+        version: 8.4.38
+      postcss-js:
+        specifier: 4.0.1
+        version: 4.0.1(postcss@8.4.38)
      react:
        specifier: ^18.3.1
        version: 18.3.1
@ -5287,7 +5293,7 @@ snapshots:
      '@babel/helper-validator-identifier': 7.22.20
      chalk: 2.4.2
      js-tokens: 4.0.0
-      picocolors: 1.0.0
+      picocolors: 1.0.1

  '@babel/highlight@7.24.6':
    dependencies:
@ -9751,7 +9757,7 @@ snapshots:
  postcss@8.4.38:
    dependencies:
      nanoid: 3.3.7
-      picocolors: 1.0.0
+      picocolors: 1.0.1
      source-map-js: 1.2.0

  preact-render-to-string@5.2.3(preact@10.11.3):
@ -10455,7 +10461,7 @@ snapshots:
    dependencies:
      browserslist: 4.23.0
      escalade: 3.1.2
-      picocolors: 1.0.0
+      picocolors: 1.0.1

  uri-js@4.4.1:
    dependencies:
--- 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;
--- 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;
+  }
+}
--- 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] && (
--- 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) => {
--- 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">
--- 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]",
        )}
      >
--- 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">
--- 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"),
  ],
 }