From 0627aa24fce46a82d8806139e47c258e44d55f0b Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 5 Aug 2026 08:53:27 +0000
Subject: [PATCH] feat(styles): add themed scrollbars for improved dark mode
 experience

---
 apps/backoffice/src/styles.css | 38 ++++++++++++++++++++++++++++++++++
 apps/portal/src/styles.css     | 38 ++++++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+)

diff --git a/apps/backoffice/src/styles.css b/apps/backoffice/src/styles.css
index c35635881..4b107d549 100644
--- a/apps/backoffice/src/styles.css
+++ b/apps/backoffice/src/styles.css
@@ -5,6 +5,44 @@
 
 *, *::before, *::after { box-sizing: border-box; }
 
+/* ---------------------------------------------------------------------------
+   Scrollbars — themed instead of the raw OS default, so a dark page doesn't
+   carry a stark white scrollbar (or vice versa). Firefox via scrollbar-color,
+   Chrome/Safari/Edge via the ::-webkit-scrollbar-* pseudo-elements. Colors
+   come from Mantine's dark palette so they track the active color scheme
+   instead of a fixed gray.
+   --------------------------------------------------------------------------- */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--mantine-color-gray-5) transparent;
+}
+[data-mantine-color-scheme='dark'] * {
+  scrollbar-color: var(--mantine-color-dark-3) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--mantine-color-gray-5);
+  border-radius: 8px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--mantine-color-gray-6);
+}
+[data-mantine-color-scheme='dark'] ::-webkit-scrollbar-thumb {
+  background-color: var(--mantine-color-dark-3);
+}
+[data-mantine-color-scheme='dark'] ::-webkit-scrollbar-thumb:hover {
+  background-color: var(--mantine-color-dark-2);
+}
+
 /* ---------------------------------------------------------------------------
    Print — the review dossier.
 
diff --git a/apps/portal/src/styles.css b/apps/portal/src/styles.css
index 451e3b27d..a5b3a8408 100644
--- a/apps/portal/src/styles.css
+++ b/apps/portal/src/styles.css
@@ -2,3 +2,41 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* ---------------------------------------------------------------------------
+   Scrollbars — themed instead of the raw OS default, so a dark page doesn't
+   carry a stark white scrollbar (or vice versa). Firefox via scrollbar-color,
+   Chrome/Safari/Edge via the ::-webkit-scrollbar-* pseudo-elements. Colors
+   come from Mantine's dark palette so they track the active color scheme
+   instead of a fixed gray.
+   --------------------------------------------------------------------------- */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--mantine-color-gray-5) transparent;
+}
+[data-mantine-color-scheme='dark'] * {
+  scrollbar-color: var(--mantine-color-dark-3) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--mantine-color-gray-5);
+  border-radius: 8px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--mantine-color-gray-6);
+}
+[data-mantine-color-scheme='dark'] ::-webkit-scrollbar-thumb {
+  background-color: var(--mantine-color-dark-3);
+}
+[data-mantine-color-scheme='dark'] ::-webkit-scrollbar-thumb:hover {
+  background-color: var(--mantine-color-dark-2);
+}