[FEATURE] Scrollbar Styling and Adding Color Variables with Transitions

[divyanshudhruv]

Is this a unique feature?

• [X] I have checked "open" AND "closed" issues and this is not a duplicate

Is your feature request related to a problem/unavailable functionality? Please describe.

The current scrollbar lacks custom styling, and some UI elements could benefit from the use of CSS variables for colors and smoother transitions. Adding these features would enhance the user experience and visual consistency across the application.

Proposed Solution

• Scrollbar Styling: Customize using ::-webkit-scrollbar and ::-webkit-scrollbar-thumb for better design.

• Color Variables: Use CSS variables (e.g., --primary-color, --secondary-color) for consistency.

• Transitions: Add transition to buttons and links for smoother effects (e.g., transition: all 0.3s ease).

Screenshots

Do you want to work on this issue?

Yes

If "yes" to above, please explain how you would technically implement this (issue will not be assigned if this is skipped)

• Using ::-webkit-scrollbar pseudo-elements to customize the scrollbar's appearance (width, color, hover effects).

• Definining CSS variables (e.g., --primary-color, --secondary-color) in your :root selector for consistent theming.

• Applying these variables throughout your CSS for elements like backgrounds and text.

• Adding transition properties to elements (e.g., buttons) for smoother hover effects (like color change and scaling). Test:

At last checking the styles in your browser to ensure everything looks and functions as expected.

[Bashamega]

Nice idea

[divyanshudhruv]

@Bashamega is it ok if I add a new file style.css and then link it to the main index file, because all the custom styles would be organized at one place.

[Bashamega]

@Bashamega is it ok if I add a new file style.css and then link it to the main index file, because all the custom styles would be organized at one place.

Sure