Customize Color Labels (w/ Stylish)


#1

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%;

}

Customize Theme Color [Pro?]
#2

Looks great :slight_smile:


#3

I’ve been meaning to look into this for some time thanks!

the schema you have reminds me of w3schools.com


#4

Certainly, don’t want to take all the credit for this. Erica provided the code. I just tweaked the settings.


#5

Regarding the use of Chrome extensions, Stylish is one of my favourites.


#6

Thank you @Rodion_Y
I use your code for stylish

But shortcut is “ctrl + shift +L”


#7

The shortcuts were changed recently, that’s why. Link: http://blog.dynalist.io/shortcut-changes/


#8

is better, likely not by much tho esp if you dont care about privacy

this should likely be put into dyna if only for the reason that lighter highlighting is better for readability, light highlight on dark font is better contrast

the bar thing is likely better overall too tho have to test to really know

tho it’s only cosmetic, these things typically have a very marginal effect, if any

without a doubt, def support lighter highlighting tho


PSA for Stylish Users