From f1462df39a67e440ea16b49cf4fdbf17fbc306c6 Mon Sep 17 00:00:00 2001 From: Navya Govind Date: Thu, 11 Apr 2024 17:41:24 +0200 Subject: [PATCH] fix: scrollbars pick up the theme in dark mode Signed-off-by: Navya Govind --- .changeset/proud-doors-cheat.md | 5 +++++ packages/theme/src/v5/defaultComponentThemes.ts | 16 ++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 .changeset/proud-doors-cheat.md diff --git a/.changeset/proud-doors-cheat.md b/.changeset/proud-doors-cheat.md new file mode 100644 index 0000000000..55ab7878d4 --- /dev/null +++ b/.changeset/proud-doors-cheat.md @@ -0,0 +1,5 @@ +--- +'@backstage/theme': patch +--- + +Fixed bug where scrollbars don't pick up the theme when in dark mode diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index 60caa47e90..fe8b986ac2 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -34,6 +34,22 @@ export const defaultComponentThemes: ThemeOptions['components'] = { overscrollBehaviorY: 'none', fontSize: '0.875rem', lineHeight: 1.43, + '&::-webkit-scrollbar, & *::-webkit-scrollbar': { + backgroundColor: theme.palette.background.paper, + width: '1em', + }, + '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': { + borderRadius: 8, + backgroundColor: theme.palette.textVerySubtle, + border: `3px solid ${theme.palette.background.paper}`, + }, + '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': + { + backgroundColor: + theme.palette.mode === 'dark' + ? lighten(theme.palette.textVerySubtle, 0.2) + : darken(theme.palette.textVerySubtle, 0.2), + }, }, a: { color: 'inherit',