How to change tag background and font color for dark style

❓Help
1

Obviously, I need basic instruction on making changes to improve visibility of tags. I can tweak minor details in a Stylish script but how to change basic DL css settings for display details? This minor change could make a big diff in visual clarity and encourage me to use tags more effectively.

Thanks in advance for hand-holding. Be gentle.

dynalist tags hard to read.jpg1616×754 152 KB

2

Just to make sure I understand correctly… do you want the CSS selector for choosing the tags?

3

I’m not even css literate enough to know where to start looking for code to change tag bkg and font, but as you can see, the deep blue font is not readable against the medium blue background. If I can be directed to that code with some precision, I can make the changes. Otherwise I do a lot of squinting and use tags less and less. Sorry to be so code-naive. I just drive the car, rarely care about tweaking the doohikies.

4

Something like the below:

.node-tag {
    color: #888888;
    background-color: red;
}

Adjust those two colors until it works for you.

5

you could also select # or @ specifically to select each tag and customize them

.node-tag[title^="Filter @"] {
    color: purple;
    background-color: green;
}

.node-tag[title^="Filter #"] { 
  color: blue;
  background-color: red;
}

Above example I had tag background color turned on in dynalist settings

Turning off tag background color looks like this now

result

some reason I had to refresh my stylish extension several times to get this to work not sure why though

1 Like
6

Vincent, thanks. I’m basically hopeless. I took the path of least resistance (and probably not a good idea) and activated your Stylish script AND Piotr’s dark theme, and the tags are brilliantly visible. I did not know where to go to implement @Erica’s suggestions, so of course was left in the dust with yours. Slowly, I’m looking under the hood. Very slowly!

2 Likes
7

Fred here’s how you would modify it

go to Stylish > manage extensions

Next make a theme or edit one (this one was mine for instance)

copy paste the new snippet at the top

eB7OijL.png703×353 23.7 KB

hit save and now you can customize whatever theme you have set on :slight_smile:

Make sure this is at the bottom (URLs starting with dynalist.io)

refresh your dynalist.io notes and you should be able to see the new changes

8

Vincent, many thanks. I did finally have a chance to attempt to tweak tag bkg and font color per your instructions. I don’t find the code you mention in that or any other position in the Simple Colors template. See screenshot. What am I missing?

Screen Shot 12.jpg1292×1008 166 KB

9

so what you do is copy the below snippet (literally, copy this snippet below)

.node-tag[title^="Filter @"] {
    color: purple;
    background-color: green;
}

.node-tag[title^="Filter #"] { 
  color: blue;
  background-color: red;
}

and paste that right into whatever your stylish theme.

Its not going to be on the simple colors template since it wasn’t on there by default,

we’re tweaking the settings for your personalized settings :slight_smile:

this gif explains process

so basically you have a tweaked version of the “simple colors template” theme

I would play around with the color settings too though, e.g. modify color and background-color to a different color

Check out this list for color options

example of different color options

.node-tag[title^="Filter #"] { 
  color: ForestGreen ;
  background-color: Fuchsia;
}

.node-tag[title^="Filter #"] { 
  color: GhostWhite ;
  background-color: gold;
}
1 Like
10

Thanks, Vincent, I’m getting there! Baby steps. I appreciate your pedacological patience!

1 Like
11

I used the Pro feature available here:
Settings > Dynalist Pro > Custom CSS

So far, I’ve enjoyed this combination the best:

.node-tag {
color: #515151;
background-color: #181818;
}

example_download

1 Like