128

tom The "Allow website theme tinting" option in the screenshot is meant to address that. Perhaps it should be renamed?

    Then it should be more clear:
    it should be a select menu with choices:

    • Allow website tinting
    • Custom color

    also, disable the theme stuff if "allow website tinting" is selected

      eirk Not so trivial, as only a small percentage of websites have theme themeing and we should use the user selected theme when this is not present. Welcoming further suggestions.

        7 days later

        To be honest, I'd vote against this feature. A random color behind the interface that you cannot control often means the interface becomes a mess.

        a year later
        Merged 5 posts from AESTHETIC::Tab bar picks colour from website banner.

          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