diff --git a/js_modules/dagster-ui/packages/ui-components/src/theme/darkThemeColors.tsx b/js_modules/dagster-ui/packages/ui-components/src/theme/darkThemeColors.tsx
index 4a4b24894c4b4..a205966c78252 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/theme/darkThemeColors.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/theme/darkThemeColors.tsx
@@ -1,7 +1,7 @@
 import {css} from 'styled-components';
 
 export const darkThemeColors = css`
-  --browser-color-scheme: 'dark';
+  --browser-color-scheme: dark;
   --color-keyline-default: var(--color-translucent-gray15);
   --color-link-default: var(--color-core-blue200);
   --color-link-hover: var(--color-core-blue400);
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/GlobalStyleProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/GlobalStyleProvider.tsx
index 0ef418dc42ebf..5465daa552df3 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/GlobalStyleProvider.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/GlobalStyleProvider.tsx
@@ -26,6 +26,7 @@ const GlobalStyle = createGlobalStyle`
     color-scheme: ${Colors.browserColorScheme()};
     background-color: ${Colors.backgroundDefault()};
     color: ${Colors.textDefault()};
+    scrollbar-color: ${Colors.accentGrayHover()} ${Colors.backgroundDefault()};
     width: 100vw;
     height: 100vh;
     overflow: hidden;