Make Firefox look OK

When I open a freshly installed Firefox browser, it does not look good.

It needs a bit of fine-tuning to look better. When you spend much of your day inside the browser window, the browser needs to become invisible.

Since I’ve posted this note, Firefox released the native support for the vertical tabs, which is the mode I currently use. This required me to rethink the styling. See the updates at the end of the post.

These are the steps to make it look OK:

1. Enable “compact” mode

In about:config, set the browser.compactmode.show setting. This will show the otherwise hidden, “Compact” density mode in the “Customize toolbar” menu. Set the density mode to compact.

2. Disable favicons

Disable the browser.chrome.site_icons setting. This removes the site icons from the browser’s tabs.

3. Disable tabs preview

Disable the browser.tabs.hoverPreview.enabled and browser.tabs.hoverPreview.showThumbnails settings. This disables the previews when one hovers over the tabs, and just show the tooltip.

4. Enable userChrome.css

Activate the toolkit.legacyUserProfileCustomizations.stylesheets setting.

Then, create a userChrome.css file in the Firefox’s current profile directory, %PROFILE%/chrome/userChrome.css, and add the styles:

:root {
    &[uidensity=compact] {
        --tab-min-height: 24px !important;
    }

    --tab-block-margin: 3px !important;
}

#tabbrowser-tabs {
    .tab-background:is([selected], [multiselected]) {
        box-shadow:
            0 0 1px inset rgba(0,0,0,0.1),
            0 -1px 1px rgba(0,0,0,0.1),
            0 1px  1px rgba(0,0,0,0.1),
            0 0    2px rgba(0,0,0,0.1),
            0 0    4px rgba(0,0,0,0.1),
            0 0    6px rgba(0,0,0,0.05) !important;
        outline: none !important;
    }

    .tabbrowser-tab:not(:hover) .tab-close-button {
        display: none;
    }

    .tab-close-button {
        width: 18px !important;
        height: 18px !important;
        padding: 3px !important;
    }
}

#alltabs-button {
    display: none !important;
}

#navigator-toolbox .titlebar-spacer {
    width: 10px !important;
}

5. Install a good light theme

I use the “Safari - MacOS Monterey Light” theme, which is very minimal and fits nicely into macOS.

Update 2025-07 Lately, inspired by Zen browser, I’ve revisited the styling to make it even more compact and minimal.

The think about Zen browser’s UI, that I don’t like, is that they, similar to Arc (and similar to Opera before them), frame the whole browser window in an annoying border/margin 🖼️. This looks sexy on screenshots. But this makes no sense when my browser window fills the whole screen.

This is what Firefox looks to me now. Plain canvas with close to zero design:

The styles from the userChrome.css:

:root {
    --tab-selected-bgcolor: rgba(0,0,0,0.09) !important;
    --toolbar-field-background-color: rgb(255,255,255) !important;

    --tab-block-margin: 0 !important;
}

#tabbrowser-tabs .tab-background:is([selected], [multiselected]) {
    box-shadow: none !important;
    outline: none !important;
}

#tabbrowser-tabs {
    & .tabbrowser-tab:not(:hover) .tab-close-button {
        display: none;
    }

    &[orient="vertical"] .tabbrowser-tab {
        padding-block: 2px !important;

        &:first-of-type {
            padding-block-start: 6px !important;
        }
    }

    .tab-close-button {
        width: 18px !important;
        height: 18px !important;
        padding: 3px !important;
    }
}

#nav-bar {
    margin-top: -30px !important;

    &:has(#urlbar[focused]) {
        margin-top: unset !important;
    }
}