mi6
Update scroll bars on website code examples to always use light mode colours
Summary
Scroll bars on the code examples (when viewing the website in light mode) are not easy to see against their dark background so should be forced to be the light-coloured version.
E.g. see the React tab on this dialog code example
💰 Use value
Makes the scroll bars easier to see
Additional info
Might be worth looking at the change which was done for mi6/ic-ui-kit#2869.
Make sure both the Component pages Code Previews are updated and the ones on Testing pages
A link to an example would be good for a new contributor to check out 😊
A link to an example would be good for a new contributor to check out 😊
Sorry, good idea - updated the ticket. The scroll bars were a recent addition so they're only on the develop branch, until the next release
Hi @GCHQ-Developer-847 , I'm Tabe Joel from Cameroon, and I'd love to take on this scrollbar visibility issue! I'm a frontend and mobile developer with extensive experience in CSS styling, accessibility compliance, cross-browser compatibility, and component library maintenance. To fix this, I'll:
Analyze the existing pattern from mi6/ic-ui-kit#2869 to maintain consistency Implement theme-aware CSS that forces light scrollbars in light mode for code examples Target both Component and Testing pages to ensure complete coverage Use proper CSS properties like scrollbar-color and ::-webkit-scrollbar for cross-browser support Test accessibility contrast ratios to meet WCAG standards Validate across all major browsers (Chrome, Firefox, Safari, Edge)
The solution will be clean, maintainable, and follow established patterns in the codebase. ETA: 47 hours Telegram: @Joeltabe2
@Joeltabe, feel free to pick this ticket up if you would like to!
Seems to be an issue exclusively on Mac devices when using the setting to only show scrollbars when scrolling, due to using a dark scroll bar on light mode which blends into the black background of the code example.
