128

Vlad Any timeline for when this will be implemented? The mockup looks good.

  • Vlad replied to this.
      13 days later

      Brief Summary
      I wish I could set the top window bar to some color.

      Details:
      Most of the "content" of any browser is the web pages themselves, so Orion ends up looking very much like Safari (which is a good thing), but that means that it is hard to tell them apart. I keep my Firefox bar orange just so I can tell which browser I am using when I have it open. I wish I could make Orion's top bar light purple, but the ability to "pick a color" is less important than the ability to have it just use some color which distinguishes it from Safari.

      Thanks!

        Merged 3 posts from Set window top bar to some color.

          ForumNinja404 This is extremely hard to do and will take 3-4 weeks dedicated time. So when everyone stops publishing more bugs and claiming that is the last thing stopping them from using Orion 🙂

              2 months later

              In Arc browser, whose UX I like quite a bit, they allow you to theme the browser chrome with very discernible color schemes, and choose different ones per-profile. They also show the active profile icon/emoji whenever you're looking at a profile.

              I found this very useful with multiple profiles, since I could easily distinguish which profile I'm on without having to think about it. With the Orion profile settings, I have no real clue which profile I'm on without hitting profile shortcuts or hovering over the app icon in the browser.

              Would be really nice if profiles were more obvious on Orion!

                There is an indicator in the address bar, and can be changed to 3 different views:

                  Merged 3 posts from Profiles: clear indication of which one you're on.
                    2 months later

                    Vlad hello there! I'm very interested in this feature. I think having the option to tint the window to the current tab theme-color website's attribute makes it an immersive experience, just like Safari. I like the settings mockup you posted a while ago.

                    Maybe this helps the development: I made a Firefox extension that does that. This is the extension: colorf0x. This was possible because Firefox exposes an API to manipulate some aspects of the browser via extensions, like the colors of the UI.

                    The bit you may be interested is the code in the file background.js. Specifically, the functions getForegroundScheme() and toolbar_field_colorCSS(). I also make usage of the chroma.js library to manipulate the colors.

                    Spent a long time trying to get the color algorithms just right to get the best text contrast (white or black) depending on the background color. Some colors may have the same level of computed luminance, but we don't perceive the same luminance with our eyes with certain hues. This code gets everything just right. It also computes different colors for the tabs and URL bar in a smart way, so the perceived HUEs and coloration remains consistent by changing the relative brightness (according to the WCAG definition).

                    I've put a lot of effort to match the colors like Chrome for Android does, so the equations and algorithms are there and may be useful for this feature. In my extension, it ignores the dark theme setting of the browser/system because some websites have a theme-color for dark color schemes.

                    Also, please if you happen to implement this feature, would be great to have an option to enable or disable the transparency effects in the toolbar. Most websites with these theme-color attributes usually look the best with opaque windows because they blend with an opaque header. I've came across some sites with Orion that have a gradient black background in the header, but looks messy with the elements appearing again in Orion toolbar when they should have disappeared completely in the header's site.

                    Safari seems to implement transparency support in the theme-color tag, but haven't tested it further to see how it works. A simple support for enforced opaqueness + theme-color + watch if the values changes dynamically in the DOM should be enough at least for a first itteration.

                    Hopefully you find this helpful. Thank you so much!

                      17 days later

                      I confess that I download Orion every month to see if FINALLY this feature is available.
                      And it still isn't. This is quite surprising, given that almost all other browsers support this feature by default:

                      I'm still hoping that one day I'll be able to replace Safari with Orion+.
                      See you soon 🙂

                        5 days later
                        a month later

                        Am following up on this feature as well. I don't like the idea of a static color. I like the immersive effect of an adaptive tab/tool bar.

                        This Firefox extension: Adaptive Tab Bar Color, has done an incredible job with this. I was actually pretty blown away by how good it is. To be honest, I think it even does a better job than Safari since Safari needs a the website developers to include a property or some type of flag which some websites don't bother to do. Makes the experience feel a little fragmented.

                        I tried to see if that Firefox extension worked in Orion, but it didn't. Would've been sweet. However, I think this kind of thing should be built into the browser.

                        Here's the repo for that Firefox extension's repo—maybe it can inspire a solution.

                          Feature:
                          Allows users to set a custom theme color for the address bar in their browser profiles, adding personalization beyond the standard light and dark themes.

                          User Experience Impact:
                          Enhances browsing experience by enabling users to choose a theme color that reflects their style and preferences.

                          Usage Scenario:
                          Users access profile settings to personalize their theme color. They can choose from preset colors or enter a custom hex code. Similar to Brave Browser, the selected theme color appears in the address bar across all tabs and windows linked to the profile.

                          Brave Browser:

                          Extension of Existing Features:
                          Seamlessly integrates with existing profile management, offering users an easy way to personalize their browsing.

                            Merged 2 posts from Profile Theme Color Customization.

                              Vlad When do the RC updates usually take place? I bought Orion+ to check it out

                                  Marking this done as it finally landed in Orion RC. Let us know the feedback!

                                    there is a lag in updating to correct colors when switching tabs

                                    colors are have extremely low contrast. compare with safari:
                                    note how orion's red traffic light are blending into the background, and that the selected tab is extremely white

                                    orion:

                                    edit: see #7815 and #7816