If anyone wants to change the appearance of the color labels (the ones that change the background of the item if you press Ctrl+Shft+1-6), here is the code that you can add to Stylish Chrome extension and tweak. The code below makes the existing colors lighter a bit and adds a solid bar to the left of the text.
Check it out:
/* change color labels*/
.set-color-label[data-color="1"], .Node-contentContainer.mod-color-label-1 {
background: #FFDBD3 !important;
border-radius: 0;
padding-left: 3px !important;
border-left: solid red;
max-width: 70%;
}
.set-color-label[data-color="2"], .Node-contentContainer.mod-color-label-2 {
background: #FFEFD3 !important;
padding-left: 3px !important;
border-left: solid orange;
border-radius: 0;
max-width: 70%;
}
.set-color-label[data-color="3"], .Node-contentContainer.mod-color-label-3 {
background: #FFF9D3 !important;
padding-left: 3px !important;
border-left: solid #FFE84A;
border-radius: 0;
max-width: 70%;
}
.set-color-label[data-color="4"], .Node-contentContainer.mod-color-label-4 {
padding-left: 3px !important;
border-left: solid green;
border-radius: 0;
max-width: 70%;
}
.set-color-label[data-color="5"], .Node-contentContainer.mod-color-label-5 {
background: #EDF4FF !important;
padding-left: 3px !important;
border-left: solid #09387D;
border-radius: 0;
color: #09387D !important;
max-width: 70%;
}
.set-color-label[data-color="6"], .Node-contentContainer.mod-color-label-6 {
background: #F6EBFC !important;
padding-left: 3px !important;
border-left: solid purple;
border-radius: 0;
max-width: 70%;
}