Elgato_dark/hyperdx
1
0
Fork 0
mirror of https://github.com/hyperdxio/hyperdx synced 2026-04-21 13:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix: apply correct color-scheme for light and dark modes so scrollbars match the active theme (#1818)

Browse source 
The `color-scheme` CSS property was hardcoded to `dark` on the root element, causing browser-native UI like scrollbars to always render in dark style regardless of the active theme. This moves `color-scheme` into the appropriate `[data-mantine-color-scheme]` selectors so it matches the user's selected theme.

> [!NOTE]
> This issue is only visible if you have your OS configured to always show scrollbars (macOS: System Settings → Appearance → Show scroll bars → Always).

## Before
<img width="3456" height="1834" alt="scrollbar-color-issue" src="https://github.com/user-attachments/assets/3d820ad6-3952-444b-9bac-f7c9d15e2bdc" />



## After
<img width="3456" height="1834" alt="scrollbar-color-fixed" src="https://github.com/user-attachments/assets/002fb0bd-72ee-47f7-9af7-e90faa41562b" />
This commit is contained in:
Elizabet Oliveira 2026-02-27 13:17:59 +00:00 committed by GitHub
parent fedd586bba
commit 5162acb4ab
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/fix-light-scrollbars.md Normal file
View file

@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---
fix: apply correct color-scheme for light and dark modes so scrollbars match the active theme

10
packages/app/styles/app.scss
View file

@ -29,11 +29,17 @@
--mantine-webkit-font-smoothing: inherit;
--mantine-moz-font-smoothing: inherit;
color-scheme: dark;
--app-font-family: var(--font-inter);
}
[data-mantine-color-scheme='dark'] {
color-scheme: dark;
}
[data-mantine-color-scheme='light'] {
color-scheme: light;
}
body {
font-family: var(--app-font-family);
font-size: var(--mantine-font-size-sm);