Help us understand the problem. What is going on with this article?

[VSCode] エクスプローラのディレクトリ階層を色分けするカスタムCSSを作った

VSCode を使っているとディレクトリの階層が深くなって見づらいことがよくあるので、階層ごとに色分けするカスタム CSS を作ってみました。

色や透明度などを各自でカスタマイズして、Node.js で css をビルドするようになっています。

導入方法はリポジトリの README に書いてあるのでここでは省略します。
https://github.com/yarnaimo/vscode-explorer-colorizer

実装

VSCode は Electron で作られているので、「Custom CSS and JS」などの拡張機能を使うとカスタム css が適用できます。

エクスプローラはこのように Element がフラットに並んでいて、各 Element は aria-level 属性で階層の深さ、aria-expanded 属性で展開されているかどうかがわかるので、それに応じてスタイルを割り当てています。

image.png

各Elementの塗り分けには linear-gradient を活用しています。 linear-gradient は、手前の色とその次の色を同じ位置に指定すると、グラデーションではなく複数色で塗り分けたようにできるので、階層の深さに応じてそれを割り当てています。

例: (フランス国旗ではない)

image.png

yarnaimo
Webサービスの開発などを行っています。 TypeScript / Firebase / React / Next.js / Node.js / UI Design
https://yarnaimo.vercel.app
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away