my profile picture

Sxmo Customization Part II

Introducing the Pine theme


In my last SXMO customization article, I wrote about some configuration tweaks that made sxmo quicker to use and more compatible with my CLI and TUI focused use case. This article's scope will be a bit broader, encompassing themeing for sxmo in general. Guided in large part by Porky's article on the subject, the product of my labor is what I have decided to call the Pine theme.

A purple pinecone on a dark background, my sway background image on my Pinephone

Design principles

The whole idea was inspired by a post on the Pine64 forum by Luke containing a desktop wallpaper that I wanted to adapt to the pinephone's screen size. Luckily sway makes this incredibly easy and I didn't even need to open Gimp to make it work. Just put the desktop wallpaper in your sway config in this format: "output * bg /path/to/wallpaper.jpg fill". This has the added benefit of making it so that when in landscape mode or connected to an external monitor, the wallpaper looks like a normal desktop wallpaper.

I liked the green asthetic of the pinecone wallpaper, so I decided to base as many app configs as I could on the shades of green from this rendition of the Pine64 logo. I settled on the 3 shades of green below, a creamy off-white for text, and the same gray background from the wallpoper. The effect this creates is nice; In TUI apps especially, content seems to glide across the background rather than jarring the user with a quick background color change.

Background: #13191C, Text: #EAEAEA, Green: #0C5F4F, #107762, #108F75

Themeing sway and bemenu

First up, the top bar should follow the color palette of the Pine logo in the wallpaper so that it stands out from the background and the icons are easily readable. By using a few lines in the sway config this was easy enough.

App themeing

Further tweaking wvkbd

my custom mobile dvorak keyboard open browsing the archwiki on firefox

Wrapping Up