Multiple Root Folders: UI design stylesheet extras - suggestion for theme builders


Microarchitecture is a common project architecture these days and so it’s great to see support for multiple Root Folders in Atom hit recently.

I noticed having the different Root Folders look distinct to each other in a memorable way would aid productivity, so I threw together the following styles in my user stylesheet in Atom. I thought it’s a good starting point, but themes could do a much better (and more integrated) job.

//multiple project roots different styles
.project-root ~ .project-root {
  border-top:solid 1px white;

.project-root ~ li:nth-of-type(3n-3) > .header.list-item {
  color:rgb(249, 249, 59); //yellow

.project-root ~ li:nth-of-type(3n-2) > .header.list-item {
  color:rgb(249, 89, 89); //red

.project-root ~ li:nth-of-type(3n-1) > .header.list-item {
  color:#4496E8; //blue

Anyone else got some interesting user styles to enhance the new Multiple Root Folders feature?