Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: custom scrollbars #1253

Merged
merged 4 commits into from
Jun 16, 2024
Merged

feat: custom scrollbars #1253

merged 4 commits into from
Jun 16, 2024

Conversation

Araxeus
Copy link
Contributor

@Araxeus Araxeus commented Jun 16, 2024

Closes #1244

Colors could be lighter, and im not sure if raw css is your preferred way of dealing with this, thoughts?

used the colors from

sidebar: '#24292e',
dark: '#161b22',
darker: '#090E15',
darkest: '#000209',

@Araxeus Araxeus changed the title feat: using custom scrollbar css for dark mdoe feat: using custom scrollbar css for dark mode Jun 16, 2024
@setchy
Copy link
Member

setchy commented Jun 16, 2024

thanks @Araxeus 👏 would you mind adding a screenshot for light and dark mode 🙏

Colors could be lighter, and im not sure if raw css is your preferred way of dealing with this, thoughts?

What do you think about adding it into index.html directly?

@Araxeus
Copy link
Contributor Author

Araxeus commented Jun 16, 2024

Light mode: (didnt touch the style, thats how it natively looks on Windows 10)

image
image
image

Dark mode:

image
image
image

@setchy
Copy link
Member

setchy commented Jun 16, 2024

Looks really nice!

Do you think it's worth making the light theme match the custom scrollbar (with suitable colors)?

@Araxeus
Copy link
Contributor Author

Araxeus commented Jun 16, 2024

Do you think it's worth making the light theme match the custom scrollbar (with suitable colors)?

Here are some screenshots of that

image
image
image

overall i'd say it looks better than the native one? should i commit this?

@Araxeus
Copy link
Contributor Author

Araxeus commented Jun 16, 2024

Well I can't even commit, it looks like its because the change is only affecting an html file, and biome throw an error because it has nothing to check?

image

@setchy
Copy link
Member

setchy commented Jun 16, 2024

Well I can't even commit, it looks like its because the change is only affecting an html file, and biome throw an error because it has nothing to check?

just pushed a fix to our lint-staged config. can you try again now please

note: `html::-webkit-scrollbar` is used because a top level `::-webkit-scrollbar` would override the `html.dark::-webkit-scrollbar` style even with `!important`
@Araxeus
Copy link
Contributor Author

Araxeus commented Jun 16, 2024

note: html::-webkit-scrollbar is used because a top level ::-webkit-scrollbar would override the html.dark::-webkit-scrollbar style even with !important

which is a bit sad because it makes the css longer but I don't see a better way to do it

sorry for the double force pushes but i made a typo twice in the commit description 🤦‍♂️

Copy link
Member

@setchy setchy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks really good to me. Keen to hear what the others think before merging

Copy link
Member

@afonsojramos afonsojramos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks awesome to me! Always prefer custom scrollbars 😁

@afonsojramos afonsojramos merged commit bac98a9 into gitify-app:main Jun 16, 2024
8 checks passed
@setchy setchy added this to the Release 5.9.0 milestone Jun 16, 2024
@setchy setchy added the enhancement New feature or enhancement to existing functionality label Jun 16, 2024
@setchy setchy changed the title feat: using custom scrollbar css for dark mode feat: custom scrollbars Jun 17, 2024
@setchy
Copy link
Member

setchy commented Jun 17, 2024

Just sharing an observation... scrollbars are now permanently visible on macOS when there is overflow content.

Previously they would hide/show based on scrolling activity.

Screenshot 2024-06-17 at 7 41 43 AM Screenshot 2024-06-17 at 7 40 26 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or enhancement to existing functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Custom Scrollbar
3 participants