Изменение цвета полосы прокрутки атома-текста-редактора

Question

Я только что переключился на атом из возвышенного текста и попытался применить обычные темы. К несчастью, тема, которую я использую (spacegray eighties sublime port), не содержит правильной темы для полос прокрутки. Мне удалось зафиксировать вид полос прокрутки на панели дерева. Однако по какой-то причине я не могу применить одно и то же к текстовому редактору. Мой styles.less заключается в следующем:

atom-text-editor { 
    // Apply same scrollbar color fix. 
} 

// Scrollbar color fix for SpaceGray 
::-webkit-scrollbar { 
    background-color: #262626; 

    &-track {} 

    &-thumb { 
    background-color: #404040; 

    &:window-inactive { 
     background-color: rgb(116, 115, 105); 
    } 
    } 

    &-corner { 
    background-color: #262626; 
    } 
} 

А вот предварительный просмотр моей проблемы:

Я попытался положить ту же ::-webkit-scrollbar CSS в атом-текстового редактора с !important заявления , но не повезло.

Answer 1

Вы были близки, вы должны обернуть стили внутри .scrollbars-visible-always:

.scrollbars-visible-always { 
    ::-webkit-scrollbar { 
    background-color: #262626;  

    &-track {}  

    &-thumb { 
     background-color: #404040;  

     &:window-inactive { 
     background-color: rgb(116, 115, 105); 
     } 
    }  

    &-corner { 
     background-color: #262626; 
    } 
    } 
} 

Answer 2

На самом деле это не похоже на работу больше для текущей версии Atom. С помощью следующего кода я был в состоянии стиль как полосы прокрутки в виде дерева и в окнах редактора:

.tree-view-resizer, atom-text-editor::shadow { 
    ::-webkit-scrollbar { 
    background-color: #262626; 

    &-track {} 

    &-thumb { 
     background-color: #404040; 

     &:window-inactive { 
     background-color: rgb(116, 115, 105); 
     } 
    } 

    &-corner { 
     background-color: #262626; 
    } 
    } 
} 

Answer 3

В Atom 1.18.0 следующие работы для меня для всех скроллинга:

::-webkit-scrollbar { 
    width: 50px; 
    height: 18px; 

    &-track { 
     border: 0px; 
     border-radius: 0px; 
     background-color: transparent !important; 
    } 

    &-thumb { 
     background-color: rgba(213, 213, 213, 0.4) !important; 
     border: 0px; 
     border-radius: 0px; 
    } 
} 

// for new opened files 
.vertical-scrollbar { 
    width: 50px !important; 
}