u/-__Supreme__-

I started using Thunderbird a year ago. It was good enough but didn't really look good. So I went looking for tweaks to make it look aesthetically pleasing.

I used three things:

1. Fluent bird: https://github.com/Deathbyteacup/fluentbird. Follow the instructions on the GitHub page to install it. It's extremely easy. Just copy the folder content and paste it into the chrome folder in Thrunderbird.
2. Themes I recommend: Sakura Blossoms & Birds by MaDonna (Light) and Thunderglobe (Dark)
3. Custom CSS (Claude wrote it): You will put the code in the custom.css file in the chrome folder.

​

/* =====================================================
   1. FLUENT UI VARIABLES (AUTO-ADAPTS TO LIGHT/DARK)
   ===================================================== */
:root, :root[lwtheme] {
    --fluent-bg-active: #ffffff;
    --fluent-bg-glass: rgba(255, 255, 255, 1); /* Made fully solid/opaque */
    --fluent-bg-capsule: rgba(255, 255, 255, 0.35);
    --fluent-bg-capsule-hover: rgba(255, 255, 255, 0.65);
    --fluent-bg-hover: rgba(0, 0, 0, 0.06);
    --fluent-bg-pressed: rgba(0, 0, 0, 0.08);
    --fluent-border: rgba(0, 0, 0, 0.15);
    --fluent-border-light: rgba(0, 0, 0, 0.08);
    --fluent-rim-light: rgba(255, 255, 255, 0.9);
    --fluent-shadow-sm: rgba(0, 0, 0, 0.08);
    --fluent-shadow-md: rgba(0, 0, 0, 0.12);
    --fluent-shadow-lg: rgba(0, 0, 0, 0.15);
    --fluent-text: #202020;
    --fluent-text-strong: #000000;
    --fluent-accent: #0060df; /* Thunderbird Blue */
}

/* Instantly swaps colors when Dark Mode is enabled */
 (prefers-color-scheme: dark) {
    :root, :root[lwtheme] {
        /* Brighter active background so it doesn't blend into the black canvas */
        --fluent-bg-active: #3d3d3d; 
        --fluent-bg-glass: rgba(40, 40, 40, 1); /* Made fully solid/opaque */
        --fluent-bg-capsule: rgba(255, 255, 255, 0.08); 
        --fluent-bg-capsule-hover: rgba(255, 255, 255, 0.15);
        --fluent-bg-hover: rgba(255, 255, 255, 0.1);
        --fluent-bg-pressed: rgba(255, 255, 255, 0.15);
        /* Stronger, crisper white borders to define edges in the dark */
        --fluent-border: rgba(255, 255, 255, 0.25); 
        --fluent-border-light: rgba(255, 255, 255, 0.12);
        --fluent-rim-light: rgba(255, 255, 255, 0.08);
        --fluent-shadow-sm: rgba(0, 0, 0, 0.4);
        --fluent-shadow-md: rgba(0, 0, 0, 0.6);
        --fluent-shadow-lg: rgba(0, 0, 0, 0.8);
        --fluent-text: #eaeaea;
        --fluent-text-strong: #ffffff;
        --fluent-accent: #58a6ff; /* Lighter, glowing blue for dark mode */
    }
}

/* =====================================================
   2. ACTIVE SPACES TOOLBAR BUTTON
   ===================================================== */
:root[lwtheme] #spacesToolbar .spaces-toolbar-button.current {
    --spaces-button-active-bg-color: var(--fluent-bg-active) !important; 
    background-color: var(--fluent-bg-active) !important; 

    /* ADDED: A glowing accent line on the left side so it's unmistakable */
    box-shadow: inset 3px 0 0 var(--fluent-accent), 0 1px 3px var(--fluent-shadow-sm) !important;
    color: var(--fluent-text-strong) !important;
}

:root[lwtheme] #spacesToolbar .spaces-toolbar-button.current:hover {
    background-color: var(--fluent-bg-active) !important;
}

/* =====================================================
   3. MESSAGE HEADER BUTTONS - CAPSULE & POP-OUT
   ===================================================== */
:root[lwtheme] #messageHeader .toolbarbutton-1 {
    border-radius: 50px !important; 
    border: 1px solid var(--fluent-border) !important;
    background-color: var(--fluent-bg-active) !important; 
    box-shadow: 0 2px 5px var(--fluent-shadow-sm) !important; 
    margin: 2px 4px !important; 
    overflow: hidden !important; 
    transition: all 0.2s ease !important; 
    color: var(--fluent-text) !important;
}

:root[lwtheme] #messageHeader .toolbarbutton-1:hover {
    box-shadow: 0 5px 10px var(--fluent-shadow-lg) !important;
    transform: translateY(-2px) !important; 
}

/* Cleanup for split-buttons */
:root[lwtheme] #messageHeader .toolbarbutton-menubutton-button,
:root[lwtheme] #messageHeader .toolbarbutton-menubutton-dropmarker {
    border: none !important; 
    background-color: transparent !important;
    box-shadow: none !important;
}

:root[lwtheme] #messageHeader .toolbarbutton-menubutton-dropmarker {
    border-left: 1px solid var(--fluent-border-light) !important;
}

/* =====================================================
   4. MODERN FANCY POP-UP MENUS (SOLID STYLE)
   ===================================================== */
:root menupopup {
    appearance: none !important;
    background-color: var(--fluent-bg-glass) !important; 
    border: 1px solid var(--fluent-border-light) !important; 
    border-radius: 8px !important; 
    padding: 4px 0px !important; 
    box-shadow: 
        inset 0 1px 0 var(--fluent-rim-light), 
        0 12px 32px var(--fluent-shadow-md), 
        0 2px 6px var(--fluent-shadow-sm) !important; 
}

:root menuitem, :root menu {
    appearance: none !important;
    padding: 6px 12px !important;
    border-radius: 5px !important; 
    margin: 1px 4px !important; 
    color: var(--fluent-text) !important;
}

:root menuitem:hover, :root menu:hover,
:root menuitem[_moz-menuactive="true"], :root menu[_moz-menuactive="true"] {
    background-color: var(--fluent-bg-hover) !important; 
    color: var(--fluent-text-strong) !important;
}

/* Clean Separator Lines */
:root menuseparator {
    appearance: none !important;
    margin: 4px 12px !important; 
    border-top: 1px solid var(--fluent-border-light) !important; 
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important; 
    background-color: transparent !important;
    height: 0px !important;
    padding: 0px !important;
}

:root menuseparator::before,
:root menuseparator::after {
    display: none !important;
    content: none !important;
}

/* =====================================================
   5. FANCY FLOATING TABS (FROSTED GLASS EFFECT)
   ===================================================== */
:root[lwtheme] .tabmail-tab {
    margin: 2px 4px !important; 
    border-radius: 8px !important; 
}

:root[lwtheme] .tab-background {
    border-radius: 8px !important;
    box-shadow: none !important;
    border: 1px solid transparent !important; 
    background-color: var(--fluent-bg-capsule) !important; 
    backdrop-filter: blur(4px) !important; 
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border 0.2s ease !important; 
}

:root[lwtheme] .tabmail-tab:not([selected="true"]):hover .tab-background {
    background-color: var(--fluent-bg-capsule-hover) !important; 
    box-shadow: 0 2px 6px var(--fluent-shadow-sm) !important;
}

:root[lwtheme] .tabmail-tab[selected="true"] .tab-background {
    background-color: var(--fluent-bg-active) !important; 

    /* ADDED: A crisp top-border line to vividly mark the active tab */
    border-top: 2px solid var(--fluent-accent) !important; 
    border-left: 1px solid var(--fluent-border) !important;
    border-right: 1px solid var(--fluent-border) !important;
    border-bottom: 1px solid var(--fluent-border) !important;

    box-shadow: 0 6px 16px var(--fluent-shadow-lg) !important; 
}

:root[lwtheme] .tabmail-tab .tab-text {
    font-weight: normal !important; 
    color: var(--fluent-text) !important;
}

:root[lwtheme] .tabmail-tab[selected="true"] .tab-text {
    color: var(--fluent-text-strong) !important;
}

:root[lwtheme] .tabmail-tab .tab-close-button {
    display: flex !important; 
    visibility: visible !important;
    opacity: 1 !important;
    border-radius: 50px !important; 
    transition: background-color 0.15s ease !important;
}

:root[lwtheme] .tabmail-tab .tab-close-button:hover {
    background-color: #ff4d4d !important; 
    color: white !important;
    fill: white !important;
}

/* =====================================================
   6. UNIFIED TOOLBAR & GLOBAL SEARCH BAR
   ===================================================== */
:root[lwtheme] global-search-bar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

:root[lwtheme] #searchInput {
    appearance: none !important;
    background-color: var(--fluent-bg-capsule) !important;
    border: 1px solid var(--fluent-border) !important;
    border-radius: 20px !important; 
    padding: 2px 12px !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.2s ease !important;
    min-height: 28px !important;
}

:root[lwtheme] #searchInput input,
:root[lwtheme] .search-textbox-input {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--fluent-text) !important;
}

:root[lwtheme] #searchInput:hover {
    background-color: var(--fluent-bg-capsule-hover) !important;
}

:root[lwtheme] #searchInput[focused="true"] {
    background-color: var(--fluent-bg-active) !important;
    border-color: var(--fluent-accent) !important; 
    box-shadow: 0 0 0 2px var(--fluent-border-light) !important;
}

:root[lwtheme] #unifiedToolbar .toolbarbutton-1,
:root[lwtheme] #tabs-toolbar .toolbarbutton-1 {
    border-radius: 6px !important; 
    border: 1px solid transparent !important;
    background-color: transparent !important;
    margin: 0px 2px !important;
    transition: all 0.15s ease !important;
    color: var(--fluent-text) !important;
}

:root[lwtheme] #unifiedToolbar .toolbarbutton-1:hover,
:root[lwtheme] #tabs-toolbar .toolbarbutton-1:hover {
    background-color: var(--fluent-bg-hover) !important; 
    border: 1px solid var(--fluent-border-light) !important;
    box-shadow: 0 2px 6px var(--fluent-shadow-sm) !important;
    backdrop-filter: blur(5px) !important;
}

:root[lwtheme] #unifiedToolbar .toolbarbutton-menubutton-dropmarker {
    border-left: 1px solid var(--fluent-border-light) !important;
}
/* =====================================================
   7. RESPONSIVE MESSAGE HEADER BUTTONS
      - Shows icon + text when space allows (≤2 lines)
      - Shows icon only when space is tight (>2 lines)
      - Hides problematic "More" button
   ===================================================== */

/* Enable container query */
:root[lwtheme] #messageHeader {
    container-type: inline-size;
    container-name: msgheader;
}

/* =========================
   NARROW MODE (icons only)
   ========================= */
 msgheader (max-width: 600px) {

    /* Hide text labels */
    :root[lwtheme] #messageHeader .toolbarbutton-text {
        display: none !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    /* Center buttons */
    :root[lwtheme] #messageHeader .toolbarbutton-1 {
        padding-inline: 10px !important;
        min-width: unset !important;
        justify-content: center !important;
    }

    /* Center icons cleanly */
    :root[lwtheme] #messageHeader .toolbarbutton-icon {
        margin: 0 auto !important;
    }

    /* Remove "More" button completely */
    :root[lwtheme] #messageHeader #otherActionsButton {
        display: none !important;
    }
}

/* =========================
   FALLBACK (no container queries)
   ========================= */
u/media (max-width: 800px) {

    :root[lwtheme] #messageHeader .toolbarbutton-text {
        display: none !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    :root[lwtheme] #messageHeader .toolbarbutton-1 {
        padding-inline: 10px !important;
        min-width: unset !important;
        justify-content: center !important;
    }

    :root[lwtheme] #messageHeader .toolbarbutton-icon {
        margin: 0 auto !important;
    }

    :root[lwtheme] #messageHeader #otherActionsButton {
        display: none !important;
    }
}

Note: I still haven't finished the customization but it felt good enough so I am sharing with the community. Would love to know some custom.css you guys are using.

Edit: Posted Screenshots ↓

---

Light Theme

Dark Theme