(Outdated) Analyzing the current Ubuntu desktop theme situation: Problems and solutions #2677
Replies: 8 comments 12 replies
-
Hey @Feichtmeier, this is a huge sum up, thanks for the hard work 👍 |
Beta Was this translation helpful? Give feedback.
-
If I read it right, you are exposing two main problems
A definitive solution to point 1 is "Create a theming API".
I tried to move to this field extending a Gnome proposal by Adrien Plazas (more here). I must admit I totally failed here, partially due to the free time available for sure, but mostly for the lack of knowledge (and working at weird times I did not want to bother Gnome devs during nights and out of their working times, my bad). Problem 2 is part a theme problem and part a lack of feature.
I believe that Yaru should jump on the "Create a theming API" wagon. That's it. This would solve all the problems, but not in a near future. |
Beta Was this translation helpful? Give feedback.
-
Thanks for the epic write-up @Feichtmeier 👍 My only counter-arguments are on these bits: "android and ios define what are minimum features for a modern desktop and people got very used to dark/light modes and expect it form a modern operating system!" Personally, I don't think the typical user will base their expectations of a desktop OS on Android or iOS. I think there are still some fundamental differences between mobile devices and PCs, in terms of typical use. Most people use their laptops and desktops indoors, during the day. Either the lighting is optimised for productivity (at the office) or they control the lighting themselves (at home). People use smartphones in a much bigger range of places (in bed, on the bus) and in places where they have no control over the light (a sunny park, a romantic restaurant). So I suspect that a bigger chunk of users engage with light/dark themes on mobile phones compared to laptops. I said before I think it's mainly power users who care about dark themes because they're doing computer stuff late at night. On reflection, I think the average person probably uses their smartphone like coders use their PCs. My parents don't code late at night, but I bet they read text messages in the dark! Speaking personally, I'm always changing my phone's brightness setting, but when I'm on my laptop, I'm far more likely to turn the light on or close the curtains. There are other differences on mobile. For instance: there's less need to divide the screen into distinct panels because fewer things are in view at once. One of the most popular ways to organise a desktop UI is to have dark-on-light for the main area and then smaller areas that are inverted. On desktop, the heading of an app is also a handle you can "grab" to move it around, so there's value in making it stand out from the body of the app. IMO, people's expectations of desktop UIs will be less influenced by Android and more by stuff like Office, Teams - even the Amazon web UI - where the mixed approach is still commonplace: I bet some newcomers are surprised by the default Ubuntu theme, but I honestly think it's because of the jazzy colour scheme, rather than the mix of dark and light elements? "Medium - users not familiar to the history of Ubuntu themes are not known to the concept of "mixed" themes and would expect the theme to be either dark or light [...] remove the mixed themed and provide only dark and light application themes" Based on my previous comments, for me, the argument in favour of retiring the default (mixed) theme is purely the fact that it's apparently really hard to make an inverted title bar work, in our current Gnome world. And tbh, that's already a good argument. I love the current default theme and would prefer to keep it, but I also like the all-light variant, and it makes a lot of problems go away. I can even imagine an all-light variant that I'd love, but we're constrained by having to stay close to upstream (basically, I don't like the way Adwaita - and therefore Yaru Light - distinguishes between foreground and background). I'm less convinced by the argument that we should have all-light and all-dark only because that's what Android and iOS are doing. For me, the acid test is to think how the user community would respond to the announcement. If we said "We're getting rid of inverted header bars because users will expect Ubuntu to be like Android and iOS," then some people would be happy and some people would be sad, but I think a lot of people would just go ":facepalm: why are devs obsessed with making desktop UIs look like smartphone UIs nowadays." Whereas if we said "we're getting rid of inverted header bars because it's a big departure from Adwaita, which has unexpected consequences for some apps and makes them look awful" then I think people would be far more understanding? Also... I personally feel like problem 1 is actually "High". All these problems flow from the fact that, when it comes to visual styling, important choices are made by people who aren't responsible for (or beholden to) Ubuntu. |
Beta Was this translation helpful? Give feedback.
-
I can Screencast from a MacBook tomorrow. They follow the trend and offer a similar approach on light/dark mode. And I'm very sure Windows 10 will follow soon. What you describe as coloured headerbars are still themes that have either the light or the dark attribute assigned to them. "This is a light theme". So when the system flips and the app opted in it can flip too. I must admit that I personally don't like the idea of colouring a whole block in an app with a branding colour, but this is okay as long as it could be determined as a light or a dark theme. What we do is something different. We overwrite all windows to have a dark headerbar. GTK apps though still assume that they are put into a light window. |
Beta Was this translation helpful? Give feedback.
-
"I can Screencast from a MacBook tomorrow. They follow the trend and offer a similar approach on light/dark mode. And I'm very sure Windows 10 will follow soon." I've actually got a Macbook in the flat - and it's true that Windows 10 might follow - but it doesn't necessarily mean that we have to copy them. If you're using lots of windows and some are in windowed mode, there are actually some benefits to a contrasting headerbar. E.g., compare these: Yaru light Yaru dark With this: Yaru default If you've got a several apps open and some are in windowed mode, it's easier to spot the file manager app and bring it to the front or move it around when the window headers are visible. Obviously it's not a problem on mobile because each app would fill the screen and you'd be swiping between them. It's also not a problem if your desktop workflow is analogous to that. Personally, I often have one window maximised with others in windowed mode, and bring the little ones to the front and move them around when I need to compare things (especially when I'm doing graphics or making notes on something). Funnily enough, one reason I don't like MacOS very much is because it's not set up to make that easy 🤷 But that's another issue. IMO, it's easy for the desktop to turn into a wall of white (or a wall of black) if there aren't areas of contrast in the UI to help your eyes find things. But I'm not saying I'm right or that the Mac approach is wrong. I just don't think we should take it for granted that people are going to come to Ubuntu expecting an all-light mode and and all-dark mode and be disappointed by the mixed mode, because that's what Android does and now Mac are doing the same, and they expect us to do it too. Especially if there's actually an all-light and all-dark option as well. Except... "What we do is something different. We overwrite all windows to have a dark headerbar. GTK apps though still assume that they are put into a light window. Yep, I can't fault this point - the actual implementation of the dark header bars in Yaru causes issues that would go away if we didn't bother. It's definitely hacky, right? |
Beta Was this translation helpful? Give feedback.
-
Thank you for this very complete presentation @Feichtmeier 👍 I agree in all points with @ubuntujaggers about the headerbar. About the shell, as the top bar is dark I think put the dark shell as default is a good idea. It's very classy IMO. In fact the source of all problems stems from the first one: Ubuntu isn't use his own technologies for his desktop. I never daily used another OS than Ubuntu since my 7 years old and it was ... Windows XP ^^ ... so I can't have really points of comparison with other modern systems. |
Beta Was this translation helpful? Give feedback.
-
Another example for why the mixed theme is a little bit problematic is that if we would someday provide an "auto" option depending on for example the environment light tracked by the webcam or just a time schedule, that our current three themes would not work. Either we would need to kill the light theme and say the mixed theme is the light theme by definition, or we would need to kill the mixed theme, or we would leave out the mixed theme as default and not selectable here and just as an option later |
Beta Was this translation helpful? Give feedback.
-
Hi @ubuntu/yaru-team @elsiehupp @elioqoshi 👋 I am very late to answer for this discussion and I believe by now most of the annoying issues (mixed-theme headerbar) have been addressed by the removal of standard-theme. Now currently this repository only offers Yaru (Light theme/Default theme) and Yaru-dark (Dark-theme). The only highly affected issue remaining is: 4a: the user preference for a dark or a light mode is not respected globallyProposed solution:Based on the discussions from discord and telegram 1) GNOME Shell:
gcc.appearance.mp4
Peek.2021-07-04.16-49.mp4
Peek.2021-07-04.16-57.mp42) Gedit color-scheme (issues: #2924, #2732)
Peek.2021-07-02.02-23.mp4Thanks! hope to see this being implemented in ubuntu-desktop 21.10 ^ ^ |
Beta Was this translation helpful? Give feedback.
-
Introduction
To make it easier for designers and non-gnomers or non-gnome-techies to jump into the color problem discussion I will summarize the current situation of the Ubuntu desktop design/theme, it's design and technical problems or limitations and give a list of potential solutions.
What UI components does the Ubuntu desktop use?
Roughly speaking it consists of two technologies for the UI:
Problem 1: Both of those technologies are disconnected from each other and created, designed and maintained by the GNOME project and not by Ubuntu alone.
How does the GNOME project theme it's desktop?
Each of the two independent technologies feature their own theme. They are technically completely disconnected and both themes come bundled with their technology.
This means that there is a built-in theme for apps and another built-in theme for the desktop.
Problem 2: There is no theming API neither included in GTK nor in gnome-shell, unlike for example in android!
How does Ubuntu theme it's desktop?
Ubuntu as a brand features a different color scheme (
#E95420
,#FFFFFF
,#000000
,#772953
,#77216F
,#5E2750
,#2C001E
,#111111
,#333333
,#AEA79F
,#0e8620
) than the GNOME project (#3584e4
,#33d17a
,#f6d32d
,#ff7800
,#e01b24
,#9141ac
,#986a44
,#c0bfbc
).Problem 3: Or to be concrete and less detailed in the gnome project everything that should be highlighted is featured in a vivid blue, whereas ubuntu mainly features orange and purple.
With the return to full gnome the desire to have the Ubuntu desktop branded in Ubuntu colors and realizing Problem 1, 2 and 3 this project was created.
So in a very smart way to built two individual theme stacks, namely themes for the apps and themes for the system, plus a full icon and cursor theme (which won't be discussed here), this repository creates themes for the Ubuntu desktop for each release cycle.
Those themes can be used via settings in gnome, which are normally hidden from the user in the gnome desktop to overwrite the default gnome look (blue->orange+purple+green).
Dark themes and light themes
What is a dark mode/theme, why are they used?
Possibly connected to how you print and draw on white paper in reality, UIs used to exist mainly with dark fonts, glyphs and symbols on a white or light background.
Recently, or actually since quiet some time, UIs or apps or systems can have their whole visual representation swapped from dark text on light background to light text on dark background.
This is useful and popular because how good you can see the elements on your screen are bound to the current lightning conditions in your room and the quality of your display.
So when you use your computer/smartphone in the evening or in the night, where your environment most likely sends less light onto your display the contrast of a white screen against the dark room becomes too high. This is very bad for the eyes and can result in an actual loss or at least reduction of eyesight quality.
So this is probably better for your eyes when you work while your room is dark:
Flip the situation: light themes
The opposite problematic situation is to be negated when your room is super bright or the sun is shining into your eyes / onto the screen and your UI is dark:
This is when light themes kick in and are actually really helpful to still be able to see everything on your screen even when it is bright outside of the screen:
How are dark modes implemented on other operating systems?
Android
In Android every theme you create with the theming API has a brightness property, i.e. "is this a light theme?" or "is this a dark theme?" which you can set.
Android apps can follow this user set system preference and can opt-in to use "system light/dark preference" and if they have a theme with the "light" and a theme with the "dark" attribute.
When the user toggles the system theme, which includes android settings, the onscreen display, notifications and widgets, the apps that have opted in switch along side with the system theme.
if the user still wants a specific app to not follow this global theme, he can again opt-out an app with a selected "always dark" or "always light" option.
TLDR: android has it all 👍
iOS
Apple smartphone feature a similar option, but it is not as easily toggled, so you need to enter the system settings app. But the opt-in works like on android.
GNOME
The gnome desktop does not have a dark mode. The default design language "adwaita" is light with blue accents. Certain apps that could be classified as "media-apps" feature an inverted adwaita theme which can be opted-in with the "prefer dark" option.
The system theme (gnome-shell theme) is always dark:
Ubuntu
In Ubuntu the dark mode situation is slightly better and slightly worse at the same time.
While there is a theme selector page put into gnome control center, it can not target the system theme. So even when users chose between a dark, a light and a mixed application theme, the system stays light all the time.
Resulting in
Problem 4a: the user prefence for a dark or a light mode is not respected globally
Problem 4b: and the default application theme plus the default system theme are not really light themes and not really dark themes so they are neither optimized for the day nor optimized for the night!
Technical limitations with theming the GNOME desktop in Ubuntu
Problem 2 described that no theming API exists in gnome DE so there is not system "accent color" that could be opted-in from some setting/preferences or similar things like in Windows10.
So the only possibility to bring Ubuntu's colors to the gnome desktop is to provide a gtk theme and a gnome-shell theme, which are not connected to each other.
GTK themes are basically a css file in a "themes" directory. Each widget in the gnome application toolkit can be styled with a selector.
Example
When an application wants to use a widget outside of the toolkit there is no existent selector with which those widgets are themed. This means that the app developer needs to provide a custom stylesheet for this widget.
The default gnome application theme "adwaita" puts special variables on the top of the stylesheet which applications can look up and take them to style their applications. Roughly said those variables are
So when an app has a newly created custom widget that is not part of the gnome toolkit they can look up the "global colors" in the stylesheet. (But this is not a really an theming API, it could be described as an "agreement" of colors.)
So in gnome the developer can decide when those custom stylesheets are loaded, either before the system theme or after the system theme. Resulting in ...
Problem 5: no matter how carefully we style the gnome applications gnome app developers can always block this from happening, resulting in some parts of the app being themed by the gnome theme and other parts with the ubuntu colors!
Quiet problematic example is the gnome control center (System settings app) where you always see the blu progress bubbles for the volume output:
This is especially problematic for ubuntu desktops default theme, which features a light window, crowned by the dark headerbar.
So when a theme puts a custom widget into the headerbar and looks up for the current global background color it won't find the background color of the headerbar!
So we end up with the following problem quiet often:
Problem 6: the headerbar colors are not exported at the top of the stylesheet of gtk!
Examples: #2358, #2526
Enough problems let's think about solutions
Problem 1: Both of the UI technologies used in Ubuntu desktop are developed disconnected from each other and created, designed and maintained by the GNOME project and not by Ubuntu alone.
Problem severity
Low
Possible solutions
Problem 2: There is no theming API neither included in GTK nor in gnome-shell, unlike for example in android!
Problem severity
Medium
Possible solutions
Problem 3: In the gnome project everything that should be highlighted is featured in a vivid blue, whereas ubuntu mainly features orange and purple.
Problem severity
Very low, it is very common that different companies and or brands have a different color palette. It is actually one of the first things you think about when you create a new brand
Possible solutions not needed
Problem 4a: the user preference for a dark or a light mode is not respected globally
Problem severity
High - android and ios define what are minimum features for a modern desktop and people got very used to dark/light modes and expect it form a modern operating system!
Possible solutions
Problem 4b: the default application theme and the default system theme are not really light themes and not really dark themes so they are neither optimized for the day nor optimized for the night!
Problem severity
Medium - users not familiar to the history of Ubuntu themes are not known to the concept of "mixed" themes and would expect the theme to be either dark or light
Possible solutions
Problem 5: no matter how carefully we style the gnome applications gnome app developers can always block this from happening, resulting in some parts of the app being themed by the gnome theme and other parts with the ubuntu colors!
Problem severity
High - broken application themes result in a very poor user experience!
Possible solutions
Problem 6: the headerbar colors can not be themed independently from the rest of the app UI (unlike in android)!
Problem severity
High - broken application themes result in a very poor user experience
Possible solutions
I hope I could give a good top-down overview of the situation - please let me know what you think, all those problems and solutions echo in my brain since several years and some of you needed to hear it over and over but mostly in fragments in chats.
CC
@kenvandine @didrocks @cassiocassio @flexiondotorg @clobrano @madsrh @ubuntujaggers @Jupiter007-43 @Muqtxdir @3v1n0
Beta Was this translation helpful? Give feedback.
All reactions