Customize

Bayou Theme can be heavily customized using a combination of CSS and Microhooks. These are some of the most likely customizations and tips for the average user.

Modifying Colors

You can modify the color scheme of Bayou Theme in the Micro.blog dashboard. In the Design settings, choose Open Theme. You’ll see a list of files you can edit. Choose, Custom CSS. Paste this:

:root {
	--background: #FFF;
	--primary: #1E6FBA;
	--secondary: #fafafa;
	--tertiary: #e4e4e4;
	--accent: #D6E9F8;
	--text-color: #000;
	--black: #000;
	--white: #fff;
	--font-primary: 'Atkinson Hyperlegible';
	--font-secondary: 'Inter';
	--alert: #FFE4E1;
	--alert-accent: #FFDAB9;
	--note: #FFF9DB;
	--note-accent: #D2B48C;
}

That is the default color scheme for Bayou Theme. You can modify any or all of those elements. When you’re done, click Update CSS. After a minute or two, your site should reflect your changes.

Add Dark Mode

Follow the same instructions above for modifying the color scheme. This time, paste this:

@media (prefers-color-scheme: dark) {
:root {
	--background: #FFF;
	--primary: #1E6FBA;
	--secondary: #fafafa;
	--tertiary: #e4e4e4;
	--accent: #D6E9F8;
	--text-color: #000;
	--black: #000;
	--white: #fff;
	--font-primary: 'Atkinson Hyperlegible';
	--font-secondary: 'Inter';
	--alert: #FFE4E1;
	--alert-accent: #FFDAB9;
	--note: #FFF9DB;
	--note-accent: #D2B48C;
}
}

Edit those colors to your preferred dark scheme. When done, save the results.

Dealing With Long Site Names

If the title of your site is too long and creates line breaks on smaller devices, you may want to decrease the font-size of the title font. In the Micro.blog Design settings, choose Open Theme and add this:

header .site-title {
    font-size: 1em;
}

When saved, that will lower the font size of your site title. You can make it even smaller by choosing 0.95em, etc.

Adding Analytics

Most analytics providers will provide you with a snippet of code to add to your site. You may prefer to add that to the head of your site or the footer. If you’d like to add it to the head of your site, you need to use Bayou Theme’s microhooks. If you’d like to add it to the footer, you do that directly in the Micro.blog dashboard (see the following section).

You can modify the footer of Bayou Theme directly in the Micro.blog dashboard. Go to Design → Open Theme. Choose Custom Footer and add your content using HTML. When done, save the footer.

Choosing A Date Format

You can change the format of all dates shown throughout the theme (with the exception of individual comments) by adding a new config.json file in the Micro.blog Dashboard theme editor (if you’ve already added one to define your language, you can just modify that one). Here’s an example config.json with modifications:

{
    "paginate": 20,
    "defaultContentLanguage": "it",
    "params": {
         "dateFormatLong": "2 January 2006",
         "dateFormatShort": "2 Jan 2006"
    }
}