Vivaldi Browsercast: The making of the new theming engine (episode 3)


  • Vivaldi Team

    You can now customize Vivaldi browser more than ever before. In the third episode of our Browsercast series, designer Henrik and QA engineer Ruarí talk about how they made the new theming engine for Vivaldi 1.3.

    They discuss the technology and frameworks that were used and the overall design philosophy behind it.

    See the full blog post here



  • that won't work ;)

    <audio controls="controls">
    <source src="https://downloads.vivaldi.com/podcast/Vivaldi-Browsercast-Themes-Ruari-Henrik.ogg” type=">
    <source src="https://downloads.vivaldi.com/podcast/Vivaldi-Browsercast-Themes-Ruari-Henrik.mp3" type="audio/mpeg">

    </audio>



  • How come? It's working over here. Isn't Soundcloud a good alternative otherwise? https://soundcloud.com/vivaldibrowser/browsercast-3-themes



  • No, because the ogg source (src=) is closed with a different quotation mark and the type attribute for ogg is not closed at all:
    ” type="/>



  • Thanks a mil! It's corrected, all good now? :)



  • many thanks for the transcript :D it's a really hard work to do!



  • well, almost ;)

    just change the line:

    <source src="https://downloads.vivaldi.com/podcast/Vivaldi-Browsercast-Themes-Ruari-Henrik.ogg" type="&quot;">
    ```to
    

    <source src="https://downloads.vivaldi.com/podcast/Vivaldi-Browsercast-Themes-Ruari-Henrik.ogg" type="audio/ogg">

    
    nice podcast btw (sound could be a bit louder though)


  • And thank you from me too. Reading the transcript takes mere minutes and we can focus on the part we like.



  • The most important part of Vivaldi is the Speed Dial, but I won't keep looking at it all the time. It is there for the user to open an important web page. Top panel and tab colouring is nice, but once they are set, it'd that way for a long time.

    In windows, if you change the system wide theme colour, Google Chrome and Chromium based browsers would take that theme, but Firefox and Edge won't. In Linux, sky is the limit for themes, all browsers would take the user chosen theme.

    Vivaldi is quite pretty. I'd be happy, if there is a way to change the font contrast, or to have default high contrast fonts. The fonts on the tabs are somewhat fuzzy.



  • Just for info, I'm on Linux, and only Konqueror and Otter are using the system wide colors, not Firefox, not Chromium or Opera. Vivaldi neither but I can set them.



  • Thanks for 1.3! It's the version that I think "did it" for me. I already recognized the tons of features in Vivaldi that set it apart before, but now that I can customize it just how I like even the colors and look down to rounded corners or not (or how much!), it feels like it fits me better than any other browser… should I say bother to fit me. I know there are theme support in other browsers, but then you are always in the hands of the theme designer. Isn't that weird? There is surprisingly little attention to catering to the user today. A certain big company starting with "G" develops their browser to push their platform more than anything else, for example. I hope you can find a good business model and rake in these tasty profits for long term visions. You have sure deserved that.



  • Opera can, if undecorated, Chromium can't in Linux, Just checked. Using Chromium 54. Opened the same page in Vivaldi and in Chromium. There is a time lag in Vivaldi. Maybe the colours and themes are adding time.
    (This was meant as reply to Cqoicebordel, but placed here)



  • Hey guys could you release these on Pocketcasts as well? Thanks



  • Vivaldi for Windows has a EULA, while not for Linux. For the first time, I read a eula to the end. Quite interesting.



  • "So if I pick a light purple on pink…" –> aha!!!!!!!!!!! oh yessssssssssssssssss :-)



  • Hah, I love pink though I have a thing for magenta/pink hybrid , I guess it's a designer's thing?
    The one I like it's very close to this tone: http://image.slidesharecdn.com/manualdemarca-100605101237-phpapp01/95/manual-de-marca-sorvetes-pink-1-728.jpg?cb=1275732826

    I also have a thing for everything that's 80's, including synthwave. So I normally combine it with cyan, though cyan is a super agressive color and I normally need to tone it down.

    BTW, it's a bit ironic that this post about design broke the main blog.

    Bring in WordPress already!



  • Nice podcast!
    My first thought after hearing and reading this was that Henrik is a beast! lol.

    The CSS variables sounds amazing. I think he is quite right when saying

    when we were working on themes we realized that this system has so much power so we’re sort of just scraping the surface of what we can control with variables.

    I could imagine using them to scale objects all over the place. Is this possible? It would be so freaking cool if we could use something like that to re-size different objects or parts of the UI at will. For example It would be cool if we could resize/scale the panel, or the extension icons at will. I'm guessing this could be used for the full UI customization you guys are planing.

    I think, probably, it wasn’t their intention when they added the CSS variables

    You bet it wasn't, but good thing we have you guys to show them how to use them ;).

    This part is gold right there:

    Henrik - I learned quite a bit of color theory while working on themes. To condense it down, the thing that we do is that we use a formula to determine the lightness value of each color and then we compare those lightness values and we ensure that the difference between them is enough that you can actually see the foreground against the background. Then the next step is of course to define which colors should contrast against which colors. That was a big job. Also, [laughs] it can have some interesting effects when you increase the ratio too much, but it works. What it will do is that it will take the color, then it will apply the minimum amount of adjustment necessary in order to make it compliant with the ratio that you have; the minimum contrast…

    It is very interesting to see how complicated the behind the scenes really is for themes. Vivaldi gives us tons of options but I just realized that each of those are especially crafted with many use cases and ton of quality in mind. The Color Theory, modern design, contrast ratio and performance are all taken care of and thought out very well. Usually when other developers make customization and multiple features like these, they are not made with that level of scrutiny, instead they try to simplify everything to the point where the software feels very restrictive, something that people call "the easy way out" (looking at chropera where they made changes thinking they were always right).

    Also, I agree completely with Ruari, Dark theme in Ubuntu looks so cool. It feels like the native browser for Ubuntu.

    I like these podcasts more and more. Have you guys tried using a video format instead? I think, even if it is just talking to us or between the Vivaldi team, it would make things more interesting. Maybe upload them to your Youtube channel so that my subscription to the Vivaldi channel would tell me when there is something new =P. I know it is a lot of work tho, so no pressure just a thought.



  • @Cqoicebordel:

    Just for info, I'm on Linux, and only Konqueror and Otter are using the system wide colors, not Firefox, not Chromium or Opera. Vivaldi neither but I can set them.

    Just installed Chromium 54.0.2829.0 in stock Ubuntu 16.04. The tab and the panel colours change with the system theme. Installed few themes to check this.



  • One important thing missing from themes is the choice of font and font size. Regardless of the Direct Write issue, the titles on the tabs are hard to read for us older folk.

    I can read the text OK if I zoom the Interface to 150% but that's too big for other elements. To fit six speed dial thumbnails on by 1920 x 1080 monitor I use 115% zoom, but then the text is too small to read comfortably.

    Another problem is that the Settings dialogue always defaults to the same size, and does not remember its size and position when reopened. It's designed for 100% interface zoom, and does not work well with anything bigger.



  • True! And the font contrast is a necessity.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.