chore: adjusting colors in dark mode

Signed-off-by: Innei <i@innei.in>
hululuuuuu · Sep 10, 2024 · 24b768a · 24b768a
1 parent c9f70c0
commit 24b768a
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 10 deletions.
diff --git a/src/renderer/src/components/ui/markdown/components/Toc.tsx b/src/renderer/src/components/ui/markdown/components/Toc.tsx
@@ -199,7 +199,13 @@ export const Toc: Component = ({ className }) => {
     <div className="flex grow flex-col scroll-smooth px-2 scrollbar-none">
       <HoverCard.Root openDelay={100} open={hoverShow} onOpenChange={setHoverShow}>
         <HoverCard.Trigger asChild>
-          <ul ref={setTreeRef} className={cn("group overflow-auto scrollbar-none", className)}>
+          <ul
+            ref={setTreeRef}
+            className={cn(
+              "group overflow-auto opacity-60 duration-200 scrollbar-none group-hover:opacity-100",
+              className,
+            )}
+          >
             {toc.map((heading, index) => (
               <MemoedItem
                 heading={heading}

diff --git a/src/renderer/src/components/ui/markdown/components/TocItem.tsx b/src/renderer/src/components/ui/markdown/components/TocItem.tsx
@@ -51,13 +51,12 @@ export const TocItem: FC<TocItemProps> = memo((props) => {
         data-active={!!range}
         className={cn(
           "relative inline-block h-1.5 rounded-full",
-          "bg-zinc-100 duration-200 hover:!bg-zinc-400 group-hover:bg-zinc-400/50",
+          "bg-zinc-100 duration-200 hover:!bg-zinc-400",
           isScrollOut && "bg-zinc-400/80",
 
-          "dark:bg-zinc-800/80 dark:hover:!bg-zinc-600 dark:group-hover:bg-zinc-600/50",
+          "dark:bg-zinc-800/80 dark:hover:!bg-zinc-600",
           isScrollOut && "dark:bg-zinc-700",
-          !!range &&
-            "!bg-zinc-400/50 data-[active=true]:group-hover:!bg-zinc-500 dark:!bg-zinc-600",
+          !!range && "!bg-zinc-400/50 dark:!bg-zinc-600",
           "overflow-hidden",
         )}
       >

diff --git a/src/renderer/src/components/ui/scroll-area/ScrollArea.tsx b/src/renderer/src/components/ui/scroll-area/ScrollArea.tsx
@@ -49,7 +49,6 @@ const Scrollbar = React.forwardRef<
     <ScrollAreaBase.Scrollbar
       {...rest}
       ref={forwardedRef}
-      forceMount
       className={cn(
         "z-[99] flex w-2.5 touch-none select-none p-0.5",
         orientation === "horizontal" ? `h-2.5 w-full flex-col` : `w-2.5 flex-row`,

diff --git a/src/renderer/src/modules/entry-content/index.tsx b/src/renderer/src/modules/entry-content/index.tsx
@@ -405,7 +405,7 @@ const ContainerToc: FC = () => {
   const wrappedElement = useWrappedElement()
   return (
     <RootPortal to={wrappedElement!}>
-      <div className="absolute right-[-130px] top-0 h-full w-[100px]">
+      <div className="group absolute right-[-130px] top-0 h-full w-[100px]">
         <div className="sticky top-0">
           <Toc
             className={cn(

diff --git a/src/renderer/src/styles/colors.css b/src/renderer/src/styles/colors.css
@@ -57,6 +57,6 @@
 }
 
 [data-build-type="web"][data-theme="dark"] {
-  --fo-native: 240 5.9% 10%;
-  --fo-native-active: 240 3.7% 15.9%;
+  --fo-native: 220 8.1% 14.5%;
+  --fo-native-active: 198 31.3% 6.3%;
 }
diff --git a/src/renderer/src/styles/tailwind.css b/src/renderer/src/styles/tailwind.css
@@ -29,7 +29,7 @@
   }
 
   [data-theme="dark"] {
-    --background: 20 14.3% 4.1%;
+    --background: 0 0% 7.1%;
     --foreground: 60 9.1% 97.8%;
     --card: 20 14.3% 4.1%;
     --card-foreground: 60 9.1% 97.8%;