overleaf-dark-scrollbar.user.js

// ==UserScript==
// @name         Overleaf Code Editor: Dark Scrollbar
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Adds a dark scrollbar to the Overleaf Code Editor
// @author       nx10
// @license      MIT
// @match        https://www.overleaf.com/project/*
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    const scrollbarStyles = `
        /* Scrollbar styles */
        ::-webkit-scrollbar {
            width: 12px;
        }

        ::-webkit-scrollbar-track {
            background: #1e2632;
            border-radius: 6px;
        }

        ::-webkit-scrollbar-thumb {
            background: #3a4655;
            border-radius: 6px;
            border: 2px solid #1e2632;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #4a5a70;
        }

        /* For Firefox */
        * {
            scrollbar-width: thin;
            scrollbar-color: #3a4655 #1e2632;
        }
    `;

    function addGlobalStyle(css) {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.textContent = css;
        (document.head || document.documentElement).appendChild(style);
    }

    addGlobalStyle(scrollbarStyles);
})();