Modifying the Color Scheme
Saturday, January 25, 2025
You can customize the color scheme and some other setting of mnml directly within the Micro.blog dashboard 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 what you want to edit.
Paste the following CSS in as your starting point:
:root {
--background: #ffffff;
--text: #42444a;
--link: #0d88d8;
--link-hover: #101115;
--accent-1: #f6f6f6;
--accent-2: #d4d4d6;
--accent-3: #93959a;
--highlight: #e3e3e6;
--site-width: 64rem;
--header-width: 94rem;
--photos-wide: 120rem;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #282c35;
--text: #f7f7f7;
--link: #45c8f7;
--link-hover: #ffffff;
--accent-1: #3d4149;
--accent-2: #53565d;
--accent-3: #d4d4d6;
--highlight: #53565d;
}
}
This is the default color scheme and element widths for mnml. You can change the color for any (or all) variables by simply modifying the hex value. To revert back to the default, either paste the code into your custom CSS again, or delete it entirely.