How can I change the color of inline code using a css tweak

#1

My inline code using a single backtick, e.g. hello world, is currently generating red text. I would like to change that to lime or #00ff00 using css but I can’t figure out where to do it. If I just add

code {
  color: #00ff00;
}

to my cssTweaks.css file the change is overridden.

Thanks in advance.

#2

This works on TW .com

image

#3

If it does not work it could mean it is being overwritten by a stylesheet with higher priority, so you can either change it to

code {
  color: #00ff00 !important;
}

OR the more advisable choice, is to make a list-after field and for the value, type $:/themes/tiddlywiki/vanilla/base which will put it at a higher priority.

Something like this: (Pseudo Code Below)

Tiddler Title:"$:/themes/CaptainPackers/stylesheets/Code"
Tiddler Tags:"$:/tags/Stylesheet"
Tiddler Text:"
code {
	color: #00ff00;
}"
(Field) list-after:"$:/themes/tiddlywiki/vanilla/base"

Just a fair warning, any further changes made on the same stylesheet will also have higher priority, and any CSS you put in it will be applied.

But this is (in my opinion, please take it with a grain of salt) a better choice since ending all of your CSS with !important will make it a bit of a pain to figure out what you’re trying to change.

Side Note, this will override any palettes, so if you like a specific palette, you can go into the control panel, and edit the color of the font color there.

I believe it is called “Code foreground (code-foreground)” in all palettes.

Hope this helps! ^^

#4

You’re all going to think I’m nuts, but I liked what DarkReader did to my theme on my node tiddlywiki, so I exported the css and put it in a stylesheet. That stylesheet had a red text color set for the code style. I don’t know why that particular style sheet overrides everything else, but it seems like it does, and sometimes gets me in trouble when I forget to look there for things like this.

I did try changing the code-foreground in the palette at one point but it had no effect, probably for the same reason.

Anyhow, your posts helped me figure out what was going on and I thank you.

#5

I must say I cant stand that red for the inline code single backticks myself.

See Control Panel > Info > Advanced > Stylesheets to see the order of stylesheet tiddlers with the last winning in the cascade. You can also drag and drop the order there.

  • Remember importing the stylesheet or inline <style></style> tags are also involved and not in the above list.
1 Like
#6

Awesome! Thanks. This is the best support group ever, I have learned so much here. Sometimes I wonder if there is anything tiddlywiki can’t do!

#7

You can change the setting in the colour-palette setting in the $:/ControlPanel → Appearence → Palette tab.

Scroll down and click the Show Editor button. Then search for. code-foreground

image
image1810×458 35.5 KB

Change the color-foreground setting and you are done.

#8

Good to know. Thanks.