feat: customize native scrollbar and simplebar styles

[sealye09]

before

after

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
slash-admin	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 10, 2025 7:28am

[joaoflaviosantos]

Hello @sealye09!

Adjust here:

body.dark {
  --c-bg: transparent;
  --c-scrollbar: #555;
  --c-scrollbar-hover: #888;
}

[joaoflaviosantos]

Hello again @sealye09!

Add it to 'src\theme\antd\index.tsx':

  useEffect(() => {
    if (themeMode === ThemeMode.Dark) {
      document.body.classList.add('dark');
    } else {
      document.body.classList.remove('dark');
    }
  }, [themeMode]);

[sealye09]

Hello again @sealye09!

Add it to 'src\theme\antd\index.tsx':

  useEffect(() => {
    if (themeMode === ThemeMode.Dark) {
      document.body.classList.add('dark');
    } else {
      document.body.classList.remove('dark');
    }
  }, [themeMode]);

already have that logic in ThemeProvider

[joaoflaviosantos]

Hello again @sealye09!
Add it to 'src\theme\antd\index.tsx':

  useEffect(() => {
    if (themeMode === ThemeMode.Dark) {
      document.body.classList.add('dark');
    } else {
      document.body.classList.remove('dark');
    }
  }, [themeMode]);

already have that logic in ThemeProvider

Hello again @sealye09!

The html.dark { is not working. However, using body.dark { worked for me. That said, the "dark" class needs to be added to the body using useEffect in 'src\theme\antd\index.tsx'.

Try changing the colors of html.dark {. They simply do not work. Only the colors of :root { are functioning—test it yourself.

If you have any questions, please feel free to reach out.