Scrollbar Feature / Boilerplate

[elibroftw]

On Firefox, the docs website works perfect, but on Chromium browser, the scroll-bar remains the default grey on white.

I know how to style the scroll bar myself, but it would be a waste of effort if each user has to guess the styling of mantine and create dynamic scroll bar styles. I hope my point has been made clear.

Also for your docs with the FART problem, I found a solution. Client-side cookies!

import Cookies from 'js-cookie';
const cookieColorScheme = Cookies.get('colorScheme');
const preferredColorScheme = useColorScheme();
// use cookie only for theme because its synchronous
const [colorScheme, setColorScheme] = useState(cookieColorScheme || preferredColorScheme);
...
Cookies.set('colorScheme', value, { expires: 365000, sameSite: 'lax', path: '/' });

[rtivital]

I do not think that UI library should provide styles for scrollbars, you can add these styles on your side with Global component.
FART problem has documentation on how to avoid it – https://mantine.dev/theming/dark-theme/#save-color-scheme-in-cookie

[elibroftw]

It does work without server logic.

[rtivital]

Okay, maybe I was not clear, it will work with server, but it will not help with avoiding FART. The key part of avoiding color scheme mismatch on client and server is to make color scheme the same during ssr and hydration. With your code you will be able to get cookie only on client and not on server, it is the same as storing value in local storage.

[elibroftw]

The FART is almost non existent though compared to using async (useEffects). Since my app is dark by default, I have in my index.css background: #141414 and use a cookie to keep track of the colorScheme. But when I use edge and the light theme, the background is dark only while the react app is loading. And subsequent refreshes don't make the background dark. Compare this to your docs page and refreshing the page results in 0.3 second delay before the theme fixes.

[rtivital]

It does not mean that it is not there.

[elibroftw]

It's considerably less noticeable and the logic is done before even the content of the App