Skip to content

Conversation

brennercruvinel
Copy link
Contributor

Summary

  • Fixed white scrollbar appearing in Tauri desktop app with dark theme
  • Implemented ultra-thin (3px) elegant scrollbars globally
  • Cleaned up redundant CSS and improved performance

Changes Made

  • Added color-scheme: dark meta tag and CSS for native dark scrollbar support
  • Reduced scrollbar width from 12px to 3px for more elegant appearance
  • Removed overflow-hidden container that was cutting scrollbar at top
  • Cleaned up redundant scrollbar styling in components
  • Optimized CSS for both web browser and Tauri webview environments

Technical Details

The root cause was missing color-scheme: dark declaration, which is the standard way to inform webviews to use dark-themed UI controls including scrollbars. This is particularly important for Tauri applications which use system webviews.

Test Plan

  • Test scrollbar appearance in development mode
  • Verify scrollbar is not cut off at container edges
  • Confirm scrollbar works in both web and Tauri environments
  • Check scrollbar thickness and hover states
  • Validate CSS cleanup doesn't break existing functionality

Screenshots

The scrollbar now appears properly themed and sized in the Tauri application.

- Add color-scheme: dark meta tag and CSS for proper dark scrollbars
- Implement ultra-thin (3px) elegant scrollbars globally
- Remove overflow-hidden that was cutting scrollbar at top
- Clean up redundant scrollbar CSS and component styling
- Optimize scrollbar appearance for both web and Tauri desktop

Fixes scrollbar visibility issues in dark theme across all components.
@brennercruvinel
Copy link
Contributor Author

Screenshot 2025-07-24 at 8 23 10 PM

@mufeedvh mufeedvh merged commit 6780008 into winfunc:main Jul 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants