Boosts

Overview

Boosts let you customize the appearance and behavior of any website. You can inject custom CSS, override colors and fonts, or run JavaScript. Changes persist per site across sessions, so a boost stays attached to the pages it targets.

Boosts are useful when a site needs a different reading experience, a cleaner layout, or a small behavior change that you want to keep every time you return.

How boosts apply

A boost targets pages by URL pattern and can be scoped to a specific space. When a matching page loads, Maho applies the configured CSS and optional JavaScript.

The core model is simple:

• Match a page by URL pattern
• Apply the boost inside the selected space scope
• Inject CSS on page load
• Run JavaScript if the JS toggle is enabled
• Keep the boost active across sessions until you disable it

CSS injection

Custom CSS is the main way to restyle a site.

What CSS boosts can do

• Apply full CSS syntax
• Use media queries
• Define animations
• Set custom properties
• Override layout, spacing, color, and typography

Runtime behavior

CSS is injected into the page on load. Edits are live, so you can update a rule and see the effect immediately without rebuilding or reloading the boost definition.

Example

body {
  background: #111;
  color: #f5f5f5;
}

article {
  max-width: 72ch;
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

JavaScript injection

Boosts can also run custom JavaScript on page load.

Behavior

• JavaScript has its own toggle
• You can enable CSS without enabling JS
• Scripts run in the page context
• Scripts have full DOM access

Common uses

• Hide elements that distract from reading
• Modify page behavior
• Add keyboard shortcuts
• Adjust site interactions that CSS alone cannot change

Example

const banners = document.querySelectorAll('.promo, .sticky-ad');
for (const banner of banners) {
  banner.remove();
}

Color overrides

If you only need to change a site’s palette, color overrides are the fastest option.

Available overrides

• Background color, for the page background
• Text color, for body text
• Link color, for hyperlinks

Implementation detail

These overrides are applied via CSS custom properties under the hood. That keeps the feature lightweight while still giving you quick control over common color changes.

Font overrides

Boosts can alter typography site by site.

Font controls

• Font family, to swap to a different system font or web font
• Font size, to scale text up or down
• Line height, to change text spacing for readability

Font overrides are useful when a site feels too dense, too small, or visually inconsistent with your preferred reading setup.

Preset templates

Maho includes 10 built in boost presets that you can apply with one click.

| Preset | What it does | |--------|--------------| | Dark Mode | Inverts colors and adjusts contrast for dark browsing | | Sans Serif | Replaces all fonts with a clean sans serif typeface | | Large Text | Increases base font size for better readability | | Hide Ads | Removes common ad containers and sticky banners | | Sepia Mode | Applies a warm sepia tone for comfortable reading | | High Contrast | Maximizes contrast between text and background | | Hide Images | Removes all images for distraction free reading | | Narrow Width | Constrains content width for better line length | | Monospace | Switches all text to a monospace font | | Remove Fixed Elements | Strips sticky headers, footers, and floating elements |

Preset usage

Presets are a fast starting point. You can apply one directly, then refine it with custom CSS or JavaScript if needed.

URL pattern matching

Boosts target pages using URL patterns.

Pattern types

• Glob patterns, such as *.example.com/* and https://news.ycombinator.com/*
• Regex patterns, with full regular expression support

Matching scope

A pattern can target:

• A single page
• A whole domain
• A broader URL pattern across multiple pages

The pattern decides whether the boost applies when a page loads.

Space scoping

Boosts can be scoped to a specific space.

Scope behavior

• A boost active in one space does not apply in another space
• Global boosts apply across all spaces
• Space scoping keeps work and personal customizations separate

This is useful when the same site should behave differently depending on context.

Toggles

Each boost has independent toggles for CSS and JavaScript.

Toggle behavior

• Disable JavaScript while keeping CSS active
• Disable CSS while keeping JavaScript active
• Temporarily turn off a boost without deleting it

Independent toggles make it easy to test a boost in pieces and keep only the parts you want.

Authoring workflow

A typical boost workflow looks like this:

1. Create a boost for the site or pattern you want
2. Decide whether the boost should be global or space scoped
3. Add CSS, JavaScript, or both
4. Pick a preset if you want a quick starting point
5. Refine color or font overrides if needed
6. Use the toggles to isolate CSS or JavaScript changes

When to use boosts

Boosts are a good fit when you want persistent, site specific customization.

Use them for:

• Reading improvements
• Layout cleanup
• Behavior tweaks
• Per site typography changes
• Site specific visual preferences

If you want the same adjustment every time you visit a site, a boost is the right place to store it.