Modifying the Color Scheme

You can customize the color scheme of Sumo Theme directly within the Micro.blog dashboard by using CSS. On the design page, open your custom theme (you may need to add one if you haven’t already). Once your custom theme is open, you should see an option at the top to edit Custom CSS. That’s where you want to be.

Paste the following CSS in as a starting point:

:root {
	--page-background: ;
	--main-text: #4d4d4d;
	--main-link: #333333;
	--main-link-hover: #000000;
	--main-link-border: #e1e1e1;
	--main-link-border-hover: #000000;
	--profile-border: #f0f0f0;
	--navigation-button-border: #e4e4e4;
	--navigation-button-background: ;
	--navigation-button-border-hover: #000000;
	--navigation-button-background-hover: #000000;
	--navigation-text: #8c8c8c;
	--navigation-text-hover: #f0f0f0;
	--heading-color: #000000;
	--button-border: #e4e4e4;
	--button-background: ;
	--button-border-hover: #000000;
	--button-background-hover: #000000;
	--button-text: #8c8c8c;
	--button-text-hover: #f0f0f0;
	--hr: #f0f0f0;
	--blockquote-border: #000000;
	--blockquote-background: ;
	--blockquote-text: #4d4d4d;
	--code-border: #e4e4e4;
	--code-background: #fafafa;
	--pre-border: #e4e4e4;
	--pre-background: ;
	--note: #FFF9C4;
	--alert: #FAD2D2;
	--aside: #F5F5F5;
	--callout: #DDEBF7;
	--conversation-background: ;
	--comment-border: #e4e4e4;
	--footnotes: #8c8c8c;
	--footnote-super: #000000;
	--page-fold: #F5F5F5;
	--video-placeholder: #fafafa;
	--comment-form-background-color: #fafafa;
	--comment-form-border-color: #fafafa;
	--shared-note: #FFF9C4;
	--red-text: #ff0000;
	--highlight: #FFFF00;
}

That is the default color scheme for Sumo. You can change the color of any (or all) items by simply modifying the hex value. To revert back to the default, you can either paste the code in again or delete it entirely.