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.
You can also listen to it on SoundCloud.com/vivaldibrowser or read its transcript below.
Enjoy!
As always, please share your thoughts about today’s podcast by leaving a comment below.
Transcript: Vivaldi Browsercast: The making of the new theming engine (episode 3)
INTRO
Gaëlle – Hello and welcome to our 3rd episode of Vivaldi Browsercast. Today we’d like to introduce you to two of our developers who join us to talk about Vivaldi’s new themes and why they are so different and unique.
Without further ado, here’s Ruarí Ødegaard, Senior QA, and Henrik Helmers, Designer at Vivaldi to share just how much fun, and how truly useful Vivaldi themes can be!
—
Ruarí – Hi my name is Ruarí and I’m a tester at Vivaldi browser. I’m here today with Henrik who is, kind of crosses the borders. He’s both a designer and a developer at Vivaldi and he’s been working on our new themes. So we’re just going to have a chat with him to see what he thinks about how it came about, and so on…
Henrik …how awesome they are!
Ruarí – …how awesome they are, of course. So how are themes — the themes that we have — different from the other browsers? What’s unique about them?
Henrik – Well they take a very different approach. Most of the other themes they will start with a picture, then you make some small adjustments: maybe you can decide where you want the picture or how to display a picture. That’s it. We take a completely different approach by focusing on colors. So the main idea is that you pick a background color and a foreground color. And based on that you change the entire UI of the browser.
Ruarí – What made you come up with this concept of doing it? How did this come about?
Henrik – We had a very unique opportunity with Vivaldi, since we started from scratch. Most of the other browsers are based on frameworks for growing their interfaces. And using the frameworks, that usually puts limitations on what you can do. With Vivaldi we control everything so it was easy for us. [Laughs] Well, maybe not easy, but at least it was possible for us to do proper themes. We let the users control everything. I really like that and I’m very pleased with how it turned out.
Ruarí – You talked about the different frameworks that you used and what we used. Obviously I work here and I know that it’s all HTML, CSS, JavaScript for our UI. But what technology in particular is used to do the themes, and why did you use that?
Henrik – We draw our UI using CSS like you said and in order to create all the sophisticated parts we used LESS. Without the LESS CSS framework we would have to write so much boilerplate, so using LESS really helps us out. Initially, I was hoping we could use LESS within the browser to do the theming. That proved very inefficient and also there were some security issues so when we discovered that [Chromium] was adding proper support for CSS variables then I realized that maybe we can use this to add proper theming support. I think, probably, it wasn’t their intention when they added the CSS variables that you could do this thing but it works wonderfully for us. So by using this very new web technology we’re able to let you set the colors on the top of the browser and it sort of trickles down, colorizing everything.
Ruarí – If they didn’t intend it, then I guess it’s pretty nice “thinking [outside] of the box”. So well done with that. One of the things whenever people talk about this stuff, or any other visual eye candy is performance. People are worried about performance. [With] our themes, there seems to be a lot going on – a lot of clever stuff – how does it impact performance?
Henrik – It is creating the theme from the colors that the user defined. That is quite an expensive process, so we spent considerable amounts of time trying to make themes perform well and the way we do this is that we have the calculation for each theme, is only taking place once. So when you actually use it there is next to zero overhead so actually using the browser with or without the theme has almost the same performance cost. There is no extra work being done, so that is very nice. And that’s also because of the technology that was chosen and how we integrated that into our process. So it’s pretty cool.
Ruarí – That’s nice and I know some people would be put off, right? There are certain groups of users that try to stream everything down — use the minimum — to get the most performance. But if this has no major impact then there is no reason not to try it.
Another thing that is interesting with colors in particular — and I know this from my past also working with browsers and so on; and a lot with themes used in Linux Distro, which is also a favorite of mine: they do all kinds of weird themes — is that you can get into this state where it can be kind of hard to read, or it’s harsh on the eyes. You know, thinking of people with disabilities and so on, how does this affect them? You can set up horrible themes and strain your eyes. So what have we got to cover that?
Henrik – The first line of defence is that you shouldn’t make ugly themes, right?! You should try to avoid that. We have tried to solve this with a layered approach. Before joining Vivaldi I was developing websites and we had all kinds of accessibility requirements. So I mean this is very important and I know it can affect the design – I mean it should affect the design – and should be something you think about during the design phase. And we have been doing this at Vivaldi. We have tried so hard to make sure our UI is within certain contrast limits. But there’s always been a challenge. So the goal was to solve this once and for all with themes. I’m super pleased with the solution we came up with because it enables us to have themes be free-form in that you can create any color combination and it just works but if you need that extra contrast then you can tell the browser to put a limit on how low of a ratio you’re willing to accept.
Ruarí – And what does that do to the colors? So if I pick a light purple on pink…
Henrik – …which is no surprise [laughing]
Ruarí – [laughing] Actually… my daughter’s favorite colors, so I was thinking of her! But what do you do then because those colors can be quite similar, so how does it actually work for the user?
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…
Ruarí – So it will tweak the colors but it will try to keep it close to what the users wanted to do?
Henrik – Yeah, exactly. I mean the main upside as I see it is that you can select any theme you want; you have complete freedom in making a theme and selecting a theme. But then afterwards you can say “oh, and I want this contrast ratio”. So I mean instead of saying “ok you get these two
accessibility themes and that’s what you get”, you can pick any theme and then we let you adjust the contrast later. So we were pleased with that.
Ruarí – I noticed some other things with the themes as well. Of course there’s the colors. You [also] have rounding options and so on. Is that a hint at future plans, or what is the thinking there?
Henrik – You know, designers like rounded corners [laughs] so 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. Colors was a lot of work because of color theories and what I just explained but the rounding and the corner radius is quite simple: it’s just a number that you get to decide. So I really wanted to add something other than colors so I picked this because I like…
Ruarí – …you like round things! [laughing]
Henrik – …I like round objects. Round and shiny objects. Also, I worked at Opera previously and back then round objects were all the rage. Everything was round. But now at Vivaldi it’s a new age so things are a bit flatter and square. I think it’s nice to give users the ability to select something else if they prefer.
Ruarí – Yeah, and to which degree that they want that as well. So I also have another thing. There’s a bunch of themes that are preinstalled and obviously you can make your own. What’s your favorite theme? Do you have one, do you use your own? Do you use one of the preinstalls?
Henrik – I would say that the default theme is pretty good but my favorite theme out of the ones that we shipped would probably be the pink one…
Ruarí – …and you were saying to me! [laughing]
Henrik – well, pink is my go-to testing color. So I test everything with pink. Pink is probably my favorite color but I don’t want to discriminate. We need a good selection, right? Do you have any favorites? Maybe pink as well?
Ruarí – Actually, the pink one isn’t bad. I kind of like all of them. They’ve been well thought out, it’s a nice little selection. I never run my desktop in a dark mode but I have a soft spot for the darker themes. The reason being, again, I also used to work at Opera and I remember in the old days when we tried to make the browser work with dark themes on Linux environments (which is quite common) we had so many issues. And so it’s really nice to see a dark theme that actually works because it just makes me feel like we finally fixed some of those things. And on top of that the one I probably like the most, because it has dark elements and a hint of Linux which is dear to my heart I guess, is Human. I’m not an Ubuntu user but it has very much that look and feel so it gives, even though we’re not using a native technology to do stuff, it allows the Linux users — and a large amount of them are on Ubuntu — to kind of instantly have something that feels natural. So I have a bit of a soft spot for that, I suppose.
Henrik – I know a lot of the designers here prefer the subtle theme because it’s…
Ruarí – Subtle? [laughing]
Henrik – Yeah. We’re a good mix of people. I like the pink one and the subtle type.
Ruarí – Yeah I like the dark ones for now, but yeah I think they’re great. So I mean I guess that kind of covers it. Is there anything else specifically you wanted to add?
Henrik – There is so much to talk about. We could go on and on about this!
Ruarí – We could. We’ll do that for another time. I think in the meantime I encourage others who find this thing interesting and want to see what we’ve done, go and download the latest version of Vivaldi which is 1.3 from vivaldi.com. Add some more colors in your browsing and try out all the different themes and make your browser the most colorful one. No one does it quite the same way we do so I think you’ll find something interesting and it’s definitely worth a try. If you do like it, get onto social media, on Twitter, Facebook and let us know your feedback. Thanks very much and bye.
Henrik – Yeah, it was great to talk about some of the stuff I’ve been working on for the past months. Finally it’s out to the open. Thanks for listening to us.
Ruarí – Yeah, thanks a bunch.
—
OUTRO
Gaëlle – Thanks again for spending time with us here at Vivaldi Browsercast. We hope you enjoyed today’s podcast and look forward to spending more time with you, our friends. If you haven’t done it already, remember to download vivaldi.com.
