Is there a way to customize the slider?

[Jesse1786]

I'm using the VSCode theme for CodeMirror, however my sliders look out of place with the rest of the style:

In the VSCode theme preview, their sliders looked much nicer:

How would I make my sliders like the ones in the preview?

[jaywcjlove]

Customizing scrollbar styles using CSS:

1. Basic Styles

/* For Webkit browsers (Chrome, Safari) */
::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
    height: 12px; /* Height of the horizontal scrollbar */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color of the scrollbar track */
}

2. Change Scrollbar Color on Hover

::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Thumb color when hovered */
}

3. Customize Scrollbar Transparency

/* Custom scrollbar transparency */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

4. Add Border to the Scrollbar

::-webkit-scrollbar-thumb {
    background-color: #888;
    border: 3px solid #f1f1f1; /* Border color of the thumb */
    border-radius: 10px;
}

5. Control Scrollbar Width

/* Narrow scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

/* Wide scrollbar */
::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 8px;
}

6. Apply Styles to Specific Container Only

If you want to apply the scrollbar styles only to a specific container:

.cm-scroller::-webkit-scrollbar {
    width: 10px;
}

.cm-scroller::-webkit-scrollbar-thumb {
    background-color: #00aaff;
    border-radius: 5px;
}

7. Custom Scrollbar for Firefox

For Firefox, use scrollbar-width and scrollbar-color to control scrollbar styles:

/* Set scrollbar width */
.cm-scroller {
    scrollbar-width: thin; /* Options: 'auto', 'thin', or 'none' */
    scrollbar-color: #888 #f1f1f1; /* Thumb color and track color */
}

8. Dark Mode Scrollbar Customization

You can use media queries to change the scrollbar style based on dark mode or light mode:

@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-thumb {
        background-color: #444;
    }
    ::-webkit-scrollbar-track {
        background-color: #222;
    }
}

[Jesse1786]

Thank you!