Pieloaf/BetterDiscordPlugins

HideSidebar: Not light mode compatible.

Closed this issue · 2 comments

Possible solution:

.hide-sidebar-btn {
  color: var(--interactive-normal);
  background-color: var(--background-secondary);

  transition: background-color .15s ease-out,color .15s ease-out;
}

.hide-sidebar-btn:hover {
  color: #fff;
  background-color: var(--brand-experiment);
}

At first, I wanted it to look the same as the original but I thought it may be a better idea to replicate the colors of the Discord button and server icons.
The text color is a bit lighter than the original in dark mode but I'm maybe you could find another variable you could use.
The background color I changed to blue just like the Discord button and servers without explicit icons.
The transition used is the same as the transition on the Discord button and server icons.
The hover color and background color are also the same as on the Discord button and servers.

Comparison

Dark mode

Before

image
image

After

image
image

Light mode

Before

image
image

After

image
image

Note that putting the CSS in the custom CSS editor may not work just because of the specificity in CSS. Putting e.g. body (notice there's a space right after it) before the 1st and 8th line (both starting with a dot) should make it work there

I quite like that idea ^^ I also added the same transition for the border radius, so it reacts the same as hovering over server icons where the corners become less rounded. Also thanks for suggesting using CSS variables for theme compatibility. Will push the update for it today.

image
image