Atom | スクロールバーをカスタマイズ(色とサイズ)
![Atom | スクロールバーをカスタマイズ(色とサイズ)](https://1-notes.com/wp-content/uploads/2020/01/Atom.png)
Atomのスクロールバーはデフォルトサイズの横幅が細すぎてマウスカーソルを合わせるのに掴みにくくてちょっと大変ですよね。
パッケージの「minimap」を使っているとビューがスクロールバーの代わりになって楽ですが、関数ビューなどビュー機能を増やしていくと、どれか削りたくなります。
スタイルシートでスクロールバーをカスタマイズ
いくつかの記事を参考にAtomのスクロールバーをスタイルシートでデザイン、色を変更して太くしました。あとborder-radiusを無くしています。
「ファイル」ー「テーマ」の「Atomはスタイルシートで編集してスタイルを変更することもできます。」から「styles.less」にアクセス。
![Atomのstyles-lessにアクセス](https://1-notes.com/wp-content/uploads/2020/01/Atomのstyles-lessにアクセス-1024x340.png)
![Atomのstyles-lessにアクセス](https://1-notes.com/wp-content/uploads/2020/01/Atomのstyles-lessにアクセス-1024x340.png)
「styles.less」に以下を追記します。
.scrollbars-visible-always {
/deep/ ::-webkit-scrollbar {
width: 30px;
height: 30px;
&-thumb {
border: 10px;
border-radius: 0;
background-color: #32cd32 !important;
}
}
}
![Atomのスクロールバーをカスタマイズ](https://1-notes.com/wp-content/uploads/2020/01/Atomのスクロールバーをカスタマイズ-1024x459.png)
![Atomのスクロールバーをカスタマイズ](https://1-notes.com/wp-content/uploads/2020/01/Atomのスクロールバーをカスタマイズ-1024x459.png)
ディスカッション
コメント一覧
まだ、コメントがありません