🐛 Bug Report: Scrollbar shows as white in dark mode

[stnguyen90]

👟 Reproduction steps

1. change the height of the window to be smaller than the content

👍 Expected behavior

A scrollbar appears that is dark

👎 Actual Behavior

A scrollbar appears that is light:

A community member, Sujata, as suggested to add something like:

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #161b22;
}

::-webkit-scrollbar-thumb {
  background: #969ba5;
}

🎲 Appwrite version

Appwrite Cloud

💻 Operating system

Linux

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

• [X] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• [X] I have read the Code of Conduct

[sujatagunale]

I studied appwrite cloud code a bit to see how CSS is being applied to different themes. Maybe using this will fix the issue of scrollbar color:

<style lang="scss">
  /* Dark mode */
  :global(.theme-dark) & {
    --scrollbar-track-color: #161b22; /* Dark mode scrollbar track color */
    --scrollbar-thumb-color: #969ba5; /* Dark mode scrollbar thumb color */
  }

  /* Light mode */
  :global(.theme-light) & {
    --scrollbar-track-color: #f2f2f8; /* Light mode scrollbar track color */
    --scrollbar-thumb-color: #666666; /* Light mode scrollbar thumb color */
  }

  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
  }
</style>

[elad2412]

@stnguyen90 Previously, the main Console scroll had the same design for all browsers.

However, for iOS, this removed the default behavior of MacOS, which is to hide scroll when not being used.

Because of this, I checked with Eldad about this issue, and we decided to keep the native scroll only for the central scroll.

[stnguyen90]

However, for iOS, this removed the default behavior of MacOS, which is to hide scroll when not being used.

So, is the problem with the scrollbar in iOS or macOS?

[elad2412]

@stnguyen90 It isn't a problem; if we design the scroll, it will affect all browsers and act the same. However, the issue is that it kills the native fading effect after stopping scrolling in MacOS. And after doing so, there is no other way to bring it back.

[stnguyen90]

Also, it looks like this is only a problem on older Macs (MacOS 12.6.7) and looks better in newer Macs.

[stnguyen90]

On MacOS 12.7.1, the scrollbar is transparent

and then disappears after you stop scrolling.

[stnguyen90]

I'm curious which OS's this is a problem in and how many people are affected by it 🧐

[stnguyen90]

Need to bump pink