Published on [Permalink]
Reading time: 2 minutes

Changing the Color of your Tufte Theme

If you love your Tufte theme like I do (thanks @pimoore!) but you want a different color, here’s a look at how to do it in CSS.

I chose my preferred color (#D0E0EE) and inserted it as a new background color, plus I added the same color as the link shading color. Otherwise you end up with a white link shadow.

This all goes in the CSS box (near the footer box on the design page).

Note: I wasn’t able to retain the nice CSS spacing below, so you may want to go into your styles.css file to see what the spacing looks like, if you get errors.

body { background-color: #D0E0EE; }

a:link, .tufte-underline, .hover-tufte-underline:hover { text-decoration: none; background: -webkit-linear-gradient(#D0E0EE, #D0E0EE), -webkit-linear-gradient(#D0E0EE, #D0E0EE), -webkit-linear-gradient(currentColor, currentColor); background: linear-gradient(#D0E0EE, #D0E0EE), linear-gradient(#D0E0EE, #D0E0EE), linear-gradient(currentColor, currentColor); -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; background-size: 0.05em 1px, 0.05em 1px, 1px 1px; background-repeat: no-repeat, no-repeat, repeat-x; text-shadow: 0.03em 0 #D0E0EE, -0.03em 0 #D0E0EE, 0 0.03em #D0E0EE, 0 -0.03em #D0E0EE, 0.06em 0 #D0E0EE, -0.06em 0 #D0E0EE, 0.09em 0 #D0E0EE, -0.09em 0 #D0E0EE, 0.12em 0 #D0E0EE, -0.12em 0 #D0E0EE, 0.15em 0 #D0E0EE, -0.15em 0 #D0E0EE; background-position: 0% 93%, 100% 93%, 0% 93%; }

Basically I isolated the CSS that changed the background (body background, a:link), and then I copied those sections into my CSS box in micro.blog. Finally, I changed the existing HTML color code to my preferred color.

Click here to find HTML color codes.

I chose a pale blue because it reminds me of those old blue essay booklets from school. 🙂

Note: Changing your background color in this way is a bit hacky, and it screws up your theme’s dark mode. I decided that I didn’t want dark mode, so I went into the styles.css file in the Tufte theme, found the section so helpfully labeled dark mode, and deleted it.

If you want to retain your dark mode, you’ll need to fiddle with the dark mode CSS to make it compatible with my hacky hack above.

Have fun!