From f1462df39a67e440ea16b49cf4fdbf17fbc306c6 Mon Sep 17 00:00:00 2001 From: Navya Govind Date: Thu, 11 Apr 2024 17:41:24 +0200 Subject: [PATCH 1/2] 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', From 9b7d634c82c9ccc30f3e2545f276bdcb67c109c8 Mon Sep 17 00:00:00 2001 From: Navya Govind Date: Thu, 11 Apr 2024 17:55:17 +0200 Subject: [PATCH 2/2] fix: scrollbars change colours when hovering Signed-off-by: Navya Govind --- packages/theme/src/v5/defaultComponentThemes.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index fe8b986ac2..55547a191c 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -50,6 +50,13 @@ export const defaultComponentThemes: ThemeOptions['components'] = { ? lighten(theme.palette.textVerySubtle, 0.2) : darken(theme.palette.textVerySubtle, 0.2), }, + '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': + { + backgroundColor: + theme.palette.mode === 'dark' + ? lighten(theme.palette.textVerySubtle, 0.2) + : darken(theme.palette.textVerySubtle, 0.2), + }, }, a: { color: 'inherit',