Thunderbird: Fluent Windows 11 Design

[paintbox]

I understand that search bar position is not changeable by theming, it's a Thunderbird team's decision, but it irks me to see it take up so much premium space. It was the same with browsers, it took many years and iterations to get where we are now (tabs on top, no wasted space) and I think those lessons should be carried over.

[diggan]

> where we are now (tabs on top, no wasted space)

Tabs at the top is wasted space, I much prefer my tabs on the side instead, as most web content is taller than it is wide, and I have a widescreen monitor. I understand the choice of tabs on top when 640x480 was the most common resolution, but for desktop usage today? Tabs on top seems like an outdated layout choice.

[chartered_stack]

The Thunderbird search bar really sucks. Advanced search with the actual functionality is hidden away behind some weird menu while the big honking bar at the top of each page does basic text search and offers nothing more.

[BobbyTables2]

Indeed. Take a look at late 1990s software, even things with complex toolbars (Word, Corel Draw, etc).

At 640x480 resolution, the toolbar was tiny but powerful.

Now at 1920x1080 resolution the toolbar is relatively huge and dumbed down.

All the benefits of higher resolutions and larger monitors have been lost on stupid UI trends.

[Calzifer]

> I understand that search bar position is not changeable by theming,

It is changeable. With enough dedication you can go a long way just with CSS.

In this case it is even rather easy because the "unified toolbar" the thing containing the search box, the menu bar (if shown) and the tab bar are three elements in the same flex box. They can be reordered by setting the order property.

Only downside in this case is that (if client side decoration is not disabled in the settings) the window buttons (close, minimize) are also part of the unified toolbar and would end (without further fixes) below the tab bar.

As a quick (and dirty) experiment I moved the tab bar left to the search bar in the same row just with:

  #titlebar {
    flex-direction: row;
    > unified-toolbar { order: 2; width: 50vw; }
    #tabs-toolbar { order: 1; width: 50vw; }
  }

And a hacky way which often works good enough is to reposition and hardcode stuff with position:absolute/fixed/sticky.

Finally Thunderbird's own customization dialog can be used to fill the empty space around the search bar. By default it has a spacer left and right but that is easy to change even without custom CSS.

[hulitu]

> tabs on top, no wasted space) and I think those lessons should be carried over.

hell no. I want the title bar, the scrollbars and the window border back. I work with more than one window.

[dazzawazza]

I agree with you but it irks me more that the search doesn't find the content I'm looking for. Apple Mail search feels much more useful.

[eviks]

There is plenty wasted space in browser tabs, from close buttons to padding to rounded/non-rect corners

[ttoinou]

Do the people who style their app actually use their app on a daily basis for long amount of time ? It seems to me the basic design of app are often the best for eye fatigue, frequent usage, recognizing which information is where fast, contrast, low margin / good usage of space etc. The current design of Thunderbird is not pretty, but it's effective. I used Thunderbird everyday for 10+ years with 100k+ emails in 10+ email boxes, never once did I think about changing the design

[KetoManx64]

Yes, I style my LibreWolf/Floorp desktop applications to suit my preferences/workflow and I spend 8+ hours a day using them. I hide elements I don't need, make my sidebar tabs auto collapse/expand when I hover over them, change the scaling factor. While yes, the basic design is good and works for 90% of people that use Firefox, I have over the last decade developed a personal a workflow that works very well for me, and i would argue is much more efficient than the average users. The advantage of open source software is that you can mold them into the shape that suits your preferences.

[stronglikedan]

> It seems to me the basic design of app are often the best

Considering the plethora of options, I'd say it's impossible to say what is better until an alternative is tried. And then you can only say that particular alternative is not better than basic, but you still can't say basic is best.

People that style their apps try many alternatives, and often find things that work better than basic for them.

[cosmic_cheese]

Generally if I care enough to style/mod an app it’s because I’m using it a lot and its stock UI isn’t doing the trick.

Sometimes it can also drive me to switch to a different app, like with Firefox. FF used to be my secondary browser, but Zen (a Firefox fork) aligns with my needs and preferences better and doesn’t require userChrome mods and addons that are likely to break after some random update some day, so I switched.

Thunderbird would benefit from its own Zen-like fork in my opinion. Its UI has always felt clunky and awkward, and the “new” design just shifts around the awkwardness.

[conductr]

> Do the people who style their app actually use their app on a daily basis for long amount of time ?

yes, I'm not wasting my time customizing something unless I use it frequently.

Not a Thunderbird user, but the Outlook default looks similar to the screenshot on the linked page. Initial things that drive me crazy; 1) left pane is a complete waste of screen real estate. I have mine collapsed to just be icons, it's about 1/6th the width as what's shown. It expands if I need it to (on tap/hover). 2) I like my inbox above my message preview not next to it. On the inbox pane, I get From & Subject on line 1 and initial message text on line 2. Same real estate with more content and context. I really like having the message preview line without actually clicking on the message.

Also, by having the message preview pane wider than tall, long paragraphs do not wrap so abruptly and I get more content on the screen. This lessens my need to scroll unless the message has a lot of paragraphs or images. Same for the initial message preview that's visible in the inbox line 2, if it's wider I can see more text. For a lot of emails, I find they are short enough that I can read it all in the inbox without even looking at the message pane. This means I can scroll/scan my inbox quickly without opening each item in the message pane to view it.

Anyways, I wouldn't care if I didn't use Outlook daily. For some people, maybe the defaults work but I feel like I get a lot of productivity out of these minor customizations

[bshacklett]

I would love to know what software Atlassian uses to maintain documentation, because I have a hard time believing they’re eating their own dog food.

[berkes]

I've used thunderbird for over 20 years and used many others inbetween: sylpheed, the bat, evolution, kmail, Pegasus.

I still have Thunderbird installed and configured for the odd "advanced task", but my daily driver has been Geary for over 10 years now. Precisely because its so much better looking than thunderbird.

Looks, done properly, are an important part of a good UX. For me, less clutter, more whitespace, clearer focus, works far better than the "widgets thrown onto a square" that Thunderbird is (I have ADHD, it may contribute to this preference for clean, simple, focused design)

[hammyhavoc]

Something not making my eyeballs bleed is part-and-parcel to me actually wanting to use it. I value function over form, but Thunderbird has never been a looker. Plenty of UX friction too. It's just convoluted and messy.

[ape4]

Maybe I am the only one who didn't know this. It seems "fluent" doesn't refer to a fluent interface in programming https://en.wikipedia.org/wiki/Fluent_interface but rather its a name of a Microsoft style https://fluent2.microsoft.design

[xpressvideoz]

Perhaps embarrassingly, I knew the second one, but not the first.

[huhtenberg]

  So  much  padding

  So  much  wasted  space

  Such  low  

    information  density

Will collect many votes on Dribbble though.

[Night_Thastus]

Screens these days are huge and high resolution, and my eyes aren't getting any younger. I'm finding that I like more white space and padding as time goes on.

For normal Thunderbird, I swapped from the more compact options to the most loose/padded options.

[carlosjobim]

There's a lot of padding in the screenshot, but you can also see that any user can reduce it by resizing the sidebar and inbox column.

[userbinator]

Much padding, such space. Wow.

(Couldn't resist...)

[accrual]

I agree with others about the search bar, kind of looks like a fallen tree in an otherwise pristine field of aero grass.

I love the translucency look of "Fluent" design though. Windows Terminal has a "Use acrylic material in the tab row" which I like to enable. It feels like a callback to Windows 7's Aero which I miss.

Perhaps together with Microsoft's Fluent/acrylic design and Apple's WIP Liquid Glass UI, and with projects like this Thunderbird theme bringing the design to OSS projects, we can bring back some of the optimism and beauty of those early glass designs.

[bluedino]

Had you told me back in 1995, that in 30 years we'd have 4K screens and I would only be able to see 10 emails in my inbox at one time...

Netscape 2.02 or Microsoft Mail client from back then looks amazing by comparison.

[dotancohen]

This isn't Thunderbird. This is a Thunderbird theme.

Normal Thunderbird still gets two to three dozen email subject lines on the screen. I absolutely love it, I've been using it for over 20 years through the rough and through the good. We're in a good period now, and it's been a good period for quite some time.

[ghosty141]

Thats just a setting in thunderbird. Indont see the problem with personal preference to show less emails

[SebastianKra]

I'm to young for Netscape, but do you mean this [^1] interface, that's truncating the subject and hiding the body?

Also, which use-cases do you have where you need to see 20 emails at once?

[^1]: https://www.pixelbeat.org/docs/netscape_email/ns_4_email.jpg

[citrin_ru]

A couple years ago I did run one of early Thunderbird versions in a Windows7 VM and it did look amazing too. TB designers are likely trying to improve UI but most updates are just change how it looks not necessary making it look better or improving UX. Though quick filter is a relatively recent addition if I'm not mistaken and I use it a lot.

[throwaway915]

Change it yourself then. It's right there in the documented CSS file. Not even overobscured SCSS!

And Netscape in 1995 look good in comparison to.. Pine?

[carlosjobim]

Let me tell you then that you can see 9 lines of text in the e-mail which is currently opened.

[ShadowBanThis03]

Did he say it was Thunderbird?

[tummler]

Love the theme.

Now if only Thunderbird weren’t a clunky POS. I’ve lost track of how many times I’ve given it another chance after people swear “it’s really better now” again.

Still refuses to follow chosen settings for how much mail data to download/store locally (it always eventually downloads everything).

[nailer]

JMAP support has been open for 9 years now: https://bugzilla.mozilla.org/show_bug.cgi?id=1322991

[snozolli]

it always eventually downloads everything

I have the opposite problem: I absolutely cannot get it to download everything. What it does do, however, is constantly re-download mail, to the point that it's extremely slow and regularly pops up "folder cannot be compacted because another operation is in progress" errors when I'm just trying to click on folders.

[Dennip]

Why oh why can't the search default to "view as list" weeps

[Calzifer]

> Also, note that some areas of ThunderBird are rendered outside of the influence of userChrome.css in a "Shadow DOM" - as such, it is not possible to fully theme all elements of Thunderbird.

With some limitations it is possible to restyle Shadow DOM elements. It is just a lot harder to select the right element if it is inside a shadow dom.

I found a workaround (don't remember where I found it) which I use extensively in my personal userChrome.css.

The basic concept (afair) is that you can write selectors which match inside the shadow dom as long as they do not need to "cross" the shadow dom "boundary".

A good starting point for me is often to select by tag and part attribute, e.g. image[part="icon"] { ... }

Now the trick to style a particular instance of a web component (shadow dom instance) is to use variables and defaults.

With a selector which targets the "root element" of the shadow dom I set variables for any value I want to change and with a selector which is fully inside the shadow dom I add styles using the variable (which is then only defined for that particular instance) or a default which effectively cancels my custom style anywhere else.

As concrete example the dialog to create new calendar events has a drop down box to select the calendar where each entry is prefixed with a dot with calendar color. The menulist has a shadow dom and the menupopup another. I styled those dots as squares (for fun and because I think the modern web is to round). So to set the variables on the "outside" I have:

  menulist#item-calendar {
    --parthack-boxmarker-radius: 0;
    --parthack-boxmarker-image-size: 1em;
    --parthack-boxmarker-border: inset 0 0 0 1px color-mix(in srgb, black 20%, transparent);
  }

and to apply it

  menuitem.menuitem-iconic > hbox.menu-iconic-left > image.menu-iconic-icon {
    border-radius: var(--parthack-boxmarker-radius) !important;
    width: var(--parthack-boxmarker-image-size, revert-layer) !important;
    height: var(--parthack-boxmarker-image-size, revert-layer) !important;
    box-shadow: var(--parthack-boxmarker-border, none);
  }

(the variable prefix "parthack" has no special meaning; it just evolved because I initially used it to hack styles onto shadow dom elements over the part attribute)

Now this will change only the icons only in the menulist with id 'item-calendar' and leave others unchanged. Whether I use revert-layer as default or something else depends on what style the element has by default and try and error.

[Calzifer]

Also

> it is also not possible to theme the settings areas.

I don't see a reason why this should not work. If by settings area the author means the settings page which in modern Thunderbird is more or less a web page in the content area, it should be stylable with userContent.css instead of userChrome.css.

The hard part is to find the right @-moz-document selectors for each individual content page.

[notpushkin]

Would it be possible to make a PostCSS plugin for this?

[AdmiralAsshat]

I'm still using the Monterail theme for Thunderbird [0], which sadly seems to have never really progressed beyond the proof-of-concept stage and hasn't been updated in eight years.

[0] https://github.com/spymastermatt/thunderbird-monterail/

[thesuitonym]

It's a good looking theme, and definitely fits the design, but I'll never understand why people want to make Thunderbird look like Outlook.

[detectd]

I'd say to make it aesthetically consistent with other apps on the platform, but (especially) Windows is a hodgepodge.

[hk1337]

1. Didn't realize Thunderbird was still available

2. Windows 11 design on macOS would be trippy.

[t0bia_s]

1. There is no better open-source alternative for Windows for mail/calendar/contacts client.

[hammyhavoc]

Is there any extension for Thunderbird that can handle "External Accounts" per-address signatures and sending identities already configured on a Gmail account?

I always go "I'll check out Thunderbird again" then "nope" out when I see it can't handle this kind of set up in the OOBE and most extensions don't receive ongoing support and thus stop being compatible.

I use Gmail on my phone and Pixel Watch, so ditching this setup is a non-starter as reconfiguring something as basic as email every time I get a new device or switch distros isn't my idea of a good time.

[guluarte]

Looks cool, but the last thing I want to do is have my Thunderbird look like Outlook.

[kookamamie]

> Thunderbird

Ahh, does it still have the bug that may accidentally delete/corrupt all your emails?

[MortyWaves]

Using CSS and not using the native implementation of the operating system is going to lead to very brittle and hard to fix problems.

[Calzifer]

It is apparently also hard to maintain over time. I heavily customized my Firefox and Thunderbird and it is annoying how often GUI components which should be equal (e.g. toolbar buttons in different places) look the same* but have multiple different CSS rules.

Some widgets, or rather the repeated reinventions of widgets in HTML+CSS, use variables and the next equally looking widget has none, or other variables with the same values.

From an outsider perspective it looks like a mess.

* or almost the same with minimal, likely unintended, differences like one button has a slight border when hovered but another button right next to it has none

[neogodless]

At first glance, it's visually pleasing... but I need to see a screenshot with 20-50 folders next!

(I use a modified https://johnnydecimal.com/ for email folders, and have probably close to 100 folders, though most stay collapsed so you might see ~20 at one time.)

[Jean-Papoulos]

I love how much unused spaces this adds, I really needed more blank pixels in my mailbox instead of distracting text.