From b177a26bca445378d9b83521fa7ddf4509a4e9a8 Mon Sep 17 00:00:00 2001 From: Cu Thanh Cam Date: Sun, 12 Jul 2026 08:51:11 +0700 Subject: [PATCH 1/4] fix: make Tailwind dark variant use .dark class and remove !important from hover override Add @custom-variant dark so dark:* Tailwind utilities respect the .dark class instead of prefers-color-scheme media query. Remove !important from hover background override so component-level dark:hover:* classes take precedence. --- src/app/styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/styles.css b/src/app/styles.css index 0417873..366bb46 100644 --- a/src/app/styles.css +++ b/src/app/styles.css @@ -1,4 +1,5 @@ @import "tailwindcss"; +@custom-variant dark (&:where(.dark, .dark *)); :root { color-scheme: light; @@ -708,7 +709,7 @@ body { .dark .hover\:bg-slate-100:hover, .dark .hover\:bg-sky-50:hover, .dark .hover\:bg-white:hover { - background-color: var(--forge-dark-panel-3) !important; + background-color: var(--forge-dark-panel-3); } .dark .hover\:text-slate-950:hover, From f44b6f44fb372d8d59ce3223de75e76f3ba4a803 Mon Sep 17 00:00:00 2001 From: Cu Thanh Cam Date: Sun, 12 Jul 2026 08:51:16 +0700 Subject: [PATCH 2/4] fix: update help dropdown styling and NavLink matching - Change HelpMenuItem hover from sky blue (hover:bg-sky-50) to gray (hover:bg-slate-100) to match other sidebar buttons - Add light mode active state matching sidebar pattern (bg-sky-50, text-sky-700, ring-inset ring-sky-200) - Fix collapsed button states: add rounded-md and hover background, improve text contrast (slate-400 -> slate-500) - Add end prop to NavLink so /docs doesn't match /docs/guides or /docs/shortcuts - Preserve original pink dark mode theme for all elements --- src/widgets/sidebar/Sidebar.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/widgets/sidebar/Sidebar.tsx b/src/widgets/sidebar/Sidebar.tsx index 1984d20..d1142c7 100644 --- a/src/widgets/sidebar/Sidebar.tsx +++ b/src/widgets/sidebar/Sidebar.tsx @@ -188,7 +188,7 @@ export function Sidebar({ ref={helpRef} > {helpOpen ? ( -
- cn("flex h-9 w-9 items-center justify-center transition", { - "text-slate-400 hover:text-slate-950 focus-visible:outline-none": + "rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200": effectiveCollapsed && !isActive, - "text-slate-700 hover:text-slate-950 focus-visible:outline-none": + "rounded-md text-slate-700 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200 dark:hover:bg-pink-400/10 dark:hover:text-pink-200": effectiveCollapsed && isActive, - "rounded-md bg-sky-50 text-sky-700 ring-1 ring-sky-100 dark:bg-pink-400/12 dark:text-pink-200 dark:ring-pink-300/25": + "rounded-md bg-sky-50 text-sky-700 ring-1 ring-inset ring-sky-200 dark:bg-pink-400/12 dark:text-pink-200 dark:ring-pink-300/25": !effectiveCollapsed && isActive, "rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200": !effectiveCollapsed && !isActive, @@ -292,11 +292,11 @@ export function Sidebar({ className={cn( "flex h-9 w-9 shrink-0 items-center justify-center transition", { - "text-slate-400 hover:text-slate-950 focus-visible:outline-none": + "rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200": effectiveCollapsed && !helpOpen, - "text-slate-700 hover:text-slate-950 focus-visible:outline-none": + "rounded-md text-slate-700 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200 dark:hover:bg-pink-400/10 dark:hover:text-pink-200": effectiveCollapsed && helpOpen, - "rounded-md bg-sky-50 text-sky-700 ring-1 ring-sky-100 dark:bg-pink-400/12 dark:text-pink-200 dark:ring-pink-300/25": + "rounded-md bg-sky-50 text-sky-700 ring-1 ring-inset ring-sky-200 dark:bg-pink-400/12 dark:text-pink-200 dark:ring-pink-300/25": !effectiveCollapsed && helpOpen, "rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200": !effectiveCollapsed && !helpOpen, @@ -312,7 +312,7 @@ export function Sidebar({ className={cn( "hidden h-9 w-9 shrink-0 items-center justify-center transition lg:flex", effectiveCollapsed - ? "text-slate-400 hover:text-slate-950 focus-visible:outline-none" + ? "rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200" : "rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950 dark:text-pink-200/70 dark:hover:bg-pink-400/10 dark:hover:text-pink-200", )} onClick={toggleSidebar} @@ -343,11 +343,11 @@ function HelpMenuItem({ to, }: HelpMenuItemProps): JSX.Element { const className = - "flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-[13px] font-semibold text-slate-700 transition hover:bg-sky-50 hover:text-sky-700 dark:text-pink-50 dark:hover:bg-pink-400/12 dark:hover:text-pink-200 dark:[&.active]:bg-pink-400/14 dark:[&.active]:text-pink-200 dark:[&.active]:ring-1 dark:[&.active]:ring-inset dark:[&.active]:ring-pink-300/20"; + "flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-[13px] font-semibold text-slate-700 transition hover:bg-slate-100 hover:text-slate-950 [&.active]:bg-sky-50 [&.active]:text-sky-700 [&.active]:ring-1 [&.active]:ring-inset [&.active]:ring-sky-200 dark:text-pink-50 dark:hover:bg-pink-400/12 dark:hover:text-pink-200 dark:[&.active]:bg-pink-400/14 dark:[&.active]:text-pink-200 dark:[&.active]:ring-1 dark:[&.active]:ring-inset dark:[&.active]:ring-pink-300/20"; if (to) { return ( - + From 43a1d13fe171f492927d3be5794d7e429c05dcad Mon Sep 17 00:00:00 2001 From: Cu Thanh Cam Date: Sun, 12 Jul 2026 08:51:20 +0700 Subject: [PATCH 3/4] fix: improve sidebar collapsed tool icon contrast Change text-slate-400 to text-slate-500 for better visibility on white background in light mode. --- src/widgets/sidebar/SidebarToolItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/widgets/sidebar/SidebarToolItem.tsx b/src/widgets/sidebar/SidebarToolItem.tsx index 9e8dcdd..e80b1e3 100644 --- a/src/widgets/sidebar/SidebarToolItem.tsx +++ b/src/widgets/sidebar/SidebarToolItem.tsx @@ -18,7 +18,7 @@ export function SidebarToolItem({ cn("group flex items-center text-[13px] font-medium transition", { - "h-8 justify-center text-slate-400 hover:text-slate-950 focus-visible:outline-none": + "h-8 justify-center text-slate-500 hover:text-slate-950 focus-visible:outline-none": collapsed && !isActive, "h-8 justify-center text-slate-700 hover:text-slate-950 focus-visible:outline-none": collapsed && isActive, From fcf2ca56ebb6b597c3c3478303fb0e68211fe590 Mon Sep 17 00:00:00 2001 From: Cu Thanh Cam Date: Sun, 12 Jul 2026 08:52:13 +0700 Subject: [PATCH 4/4] fix: optimize for Json tool --- src/features/json-yaml/JsonYamlPage.tsx | 2 +- src/features/json/JsonToolsPage.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/json-yaml/JsonYamlPage.tsx b/src/features/json-yaml/JsonYamlPage.tsx index c574a1e..b8fba43 100644 --- a/src/features/json-yaml/JsonYamlPage.tsx +++ b/src/features/json-yaml/JsonYamlPage.tsx @@ -519,7 +519,7 @@ function CodeEditor({ {label}