Matt Langford

I’ve been pleasantly surprised by the number of people who have chosen Tiny Theme for their micro.blog. It is built to be both simple and customizable. One of the most common changes to make to the theme is a change in color scheme.

Changing Default Theme Colors

Tiny theme uses CSS variables to assign these colors throughout the design. The main benefit of using variables is the ability to change colors throughout a theme with the least amount of work/code.

These are the default colors set by the theme:

/* Light Mode */
:root {
	--text: #000000;
	--link: #0000EE;
	--link_visited: #0000EE;
	--accent1: #333333;
	--accent2: #666666;
	--background: #ffffff;
	--code: #e3e3e3;
	--button-text: #ffffff;
	--blockquote: #fffee0;
	--note: #FFFF00;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--text: #f8f8f2;
		--link: #8be9fd;
		--link_visited: #8be9fd;
		--accent1: #f8f8f2;
		--accent2: #f8f8f2;
		--background: #282a36;
		--code: #44475a;
		--button-text: #282a36;
		--blockquote: #44475a;
		--note: #44475a;
	}
}

As you can see, there are 2 values for each element. 1 for Light Mode, 1 for Dark Mode. Copy the above code and paste it into your custom CSS.

NOTE: You can add custom CSS by going to Design → Edit CSS in the Micro.blog dashboard.

Once it’s in there, you can change the hex values to the colors of your choice. For example, if you’d like the background of your site to be beige instead of white in light mode, simply change the light mode background value to #F5F5DC. Save it and refresh your site in another tab.

The colors you choose in your Custom CSS will override the theme defaults.

Changing Colors for a Specific Element

There may be times where you’d like to change the color for a specific element. For example, you want all of your navigation buttons to be blue, except for the subscribe button which should be red. In this case, you’ll need to lookup the CSS elements and classes to target that specific button.

Tiny theme is full of descriptive classes that work well with micro.blog. Navigation elements include a class name that’s the same as the text and individual posts include class names equal to their assigned post categories.

I suggest using a web inspector to dive into it and test your changes. If you’re having trouble with a specific customization, feel free to let me know.