Changing the text selection color

2024-09-21

Here's something cool. I can change the text selection color, that thing that appears when you drag your mouse with a click on text. It's actually pretty easy, I just need to add a selection thing to my CSS stylesheet.

I did that on the micro-blog so that it would match the colors of the blog and it looks super cool.

::selection {
	background-color: #00000
  	color: #ffffff

So this will make it so that highlighting text with the cursor will have a black background and white text.

But I can make this even cooler by making it follow the colors of the blog. Which is what a friend helped me do on the micro-blog.

::selection {
	background-color: var(--heading-color);
  	color: var(--background-color);

This makes it so that on my micro-blog, the "block" color follows the colour of the headers and the text color follows the color of the background of the blog. And what's cool is that it follows the light and the dark theme!

It looks super cool on the micro-blog and I think I'm going to make it like that for all of my CSS stylesheets. :D