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.

Verbiage

During setup, you were given the option of defining a language for your site. Defining the language changes the visible text throughout the site. For example, on the home page, “Fresh Off the Press” is translated into different languages. But what if you want to go further than that and change the text entirely? Maybe you want it to say, “Latest Posts” or something else entirely? Here’s how.

In the Micro.blog Dashboard, go to Design and choose Open Theme. Scroll through the file list until you find your language file. It will look like this: i18n/en.json (for English). Once you’ve selected your language, you’ll see the different things you can customize. The text on the left side of the document must not be changed. You can only change the text on the right side of each colon.

Here is the default English file for reference: