A beach inspired Chrome theme,
for when you just want to feel like you're on holiday.
I recently found myself wanting a specific kind of theme for Chrome that was interesting, in addition to being not so detailed that I can't read my bookmarks or tab names. But I couldn't find what I was looking for on the Chrome web store. So, I decided to see how I could make one of my own that fits my needs.
I register to be a chrome developer, and pay the $5 registration fee, only to later realise I probably didn't need to if I only wanted to create one for myself (you can use created themes via chrome://extensions by switching on developer mode).
In any case, after a couple hours of googling I manage to find some resources on what paramaters are usable for the theme manifest.json (since I couldn't find any detailed information in google's documentation). I played around with the paramaters to get an understanding of the capabilities and limits, before going in and making the theme I wanted.
Once I was done, I published it (since I payed the registration fee anyway). My first theme was a dark theme with a bright accent, so I just titled it High Contrast Dark. The theme was under review before it got published, when I checked back in the next day it was up on the web store.
Now that I got a taste of theme customization, I had to make another. While in the first theme I used a pattern I found on this Subtle Patterns website, this time I wanted to make my own.
I wanted to do something with bubbles, and I was reminded of a typography assignment I did while I was at uni. I designed and created a typeface with the same thought in mind, and called it "elegance of ocean."
Holding onto that thought, I looked up some beach Imagery. It wasn’t long before I found an image that caught my interest, a sunset/rise on the beach. I really liked the colours in the photo so I decided to use it as my primary reference. After finding a few similar images to use for reference, I began working on drawing the patterns and images that would be included in the theme.
I started with the new tab background, while will probably be viewed the least often, it is also the largest image. Rather than using a pattern for the background I wanted to create a scene, for that I used a canvas a bit bigger than my own max browser-window dimensions, 1920px * 947px rounded up to 2000px * 1500px.
I added a bit extra onto the height since it was going to be difficult to tile the image along the y-axis (so I wasn’t doing it). I made the image seamless on the x-axis, to accommodate slightly wider screens. I did the same with the patterns for the Chrome header section.
The Chrome header seems to be a fixed pixel height (I didn’t test this on other devices), so I designed the patterns with that in mind. For example; The toolbar section includes the active tab, the url bar, and the bookmarks bar, the pattern I created differentiates the three sections while still keeping the imagery unified.
After all the images were done, I added colours to all the other elements; picking colours from the images I drew. I tested the theme, took some screenshots, designed some images for promo tiles and an icon from one of the patters, and finally submitted the theme for review.
Overall, I’m pretty proud of this theme. I think it’s a nice light and interesting theme, when I set out to create this theme I didn’t think it would turn out so well.
The theme can be installed from the Chrome Web Store.
