Skip to content

Using Dark Mode in Avellin

Understand Avellin’s dark-mode toggle, saved preference, system preference and separate dark color controls.

Avellin includes a dark-mode button in the navigation. Dark mode is part of the theme itself, not an external plugin.

How the initial mode is chosen

Avellin first looks for a saved light/dark preference. If none exists, it follows the visitor’s operating-system preference.

What happens when the visitor uses the toggle

The chosen mode is saved so it can persist while the visitor navigates through the Blogger site. The theme applies the mode at the document level and updates the navigation icon and accessible label.

Customize dark colors

Theme Designer contains a dedicated Dark Mode Colors group for the dark page background, surfaces, text, headings, muted text, primary accent, secondary accent and borders.

Test more than the homepage

Check individual recipes, comments, sidebar forms, Recipe Index, search results, footer, static pages and mobile navigation. Avellin contains dark-state styling for all of these components, so a single bright rectangle usually indicates stale CSS or custom content with its own hard-coded background.