How to Rice Your SWMO



So you want to use Sway in SXMO but you can't stand the default colors and can't seem to find a resource for how to change all of them? Sure, the sway-bar colors are easy but what about bemenu? wvkbd? foot? Well I've got good news and bad news. The good news is you've found the place that's going to tell you how to do it all (kinda*). The bad news is it's nowhere near as easy as editing an .Xresources file. Though, if I find the confidence, I'll do my best to write a script or something that will allow you to set the colors in one place.

Sway

Let's start with the easy one. It's likely that you've already done this without much issue but I gotta cover it for those who are afraid of breaking something and haven't touched their Sway config. You want to edit ~/.config/sxmo/sway and scroll down to around line 213 (it might be higher or lower depending on other changes you might've made in this file) to find where colors are defined. To save you having to pull the man page, here are the options and what they mean:


background <color>
This is the color of your status bar.

statusline <color>
This is the color of the text in the status bar (the bits one the right side, not the workspace icons.

separator <color>
If you have a separator set, I think this changes the color. I tried setting it and nothing changed.

focused_background <color>
If you are converging and using multiple displays, this will be the color of the bar on the focused display.

focused_statusline <color>
If you are converging and using multiple displays, this will be the color of the text on the status bar on the focused display.

focused_separator <color>
See 'separator'. This is also only noticed with mutiple displays.

The above focused options override their default counterparts. If you don't intend to utilize multiple displays with convergence, they can be ignored.

focused_workspace <border> <background> <text>
These are the colors for the icon on the bar for your active workspace. The border is a thin box surrounding the background.

active_workspace <border> <background> <text>
This is another multiple display specific option. It sets the color for a workspace button when it is visible but not focused.

inactive_workspace <border> <background> <text>
These are the colors for any workspace that you have not focused. In SXMO, you will only see this if you have something open on that workspace but it is not focused.

urgent_workspace <border> <background> <text>
Highlight for a workspace button when there is an urgency hint.

binding_mode <border> <background> <text>
These are the colors of the relevant workspace buttons when you have multiple workspaces showing on one screen. If not set, this defaults to urgent_workspace.

You can also set the font in the colors definition. Setting that is simply font "<font>" which should be defined already by SXMO.


Alright so you've set all your colors but there's still one problem, there's no way to change the border color on a window! Fear not, there is. It's just somewhere else because it wouldn't be fun if it were in the same place as all the other colors. For the sake of ease and since it's not already defined, create a new line outside of the 'border' closing bracket and add:

client.focused #4c7899 <border_color> #ffffff

Those other 2 colors are for the "border" and text colors respectively. What I have listed as border color is called the background color by Sway. As far as I can tell, changing border and text colors have no effect in SXMO but they must be defined.

bemenu

Alright this one is gross but it's all in one place. The way bemenu sets options is through a variable called BEMENU_OPTS. Typically, you'd define this in your shell's config (e.g. .bashrc) but pmOS/SXMO uses ash which doesn't have an .ashrc. You have 2 options here. Edit ~/.profile or edit ~/.config/sxmo/profile. They're going to both do the same thing but it's probably safe to assume that the latter is a safer option considering it's referenced in other startup scripts.

Now, unfortunately, SXMO uses bemenu as a popup window and that behavior is defined in BEMENU_OPTS as well. So if you just export the color changes, you'll lose the other SXMO specific configurations. This is where this guide comes in and instead of making you search for the default arguments (they're in /etc/profile.d/sxmo_init.sh btw), I will give them to you. Input the following command anywhere you'd like in the profile document (though I feel like higher is probably better):

BEMENU_OPTS="--fn 'Mono 14' --scrollbar autohide -s -n -w -c -l8 -M 40 -W 20 <colors>"

Where "<colors>" is using the following options (any colors you do not set will use the default color):

--tb <color> Background for the "title". This is the word in the top left defining which menu you're in
--tf <color> Text color for the title
--fb <color> Background for the bar next to the title
--ff <color> Color of the text when you begin typing
--nb <color> Non-selected background
--nf <color> Non-selected text color
--hb <color> Background for a highlighted option
--hf <color> Text color for a highlighted option
--sb <color> Selected background
--sf <color> Selected foreground. As far as I can tell, the selected options do nothing.
--scb <color> The color of the left side that isn't the scrollbar
--scf <color> The color of the scrollbar

That will change all of the colors except for the "Next Page" messages. I need to spend more time looking into if that can be changed. It is not affected by --sb or --sf.

Foot

Foot is extremely straightforward and, if I ever write a script to do all this the easy way, I will probably exclude it unless it's setting transparency. Just edit ~/.config/foot/foot.ini. It is very clear on which line changes what.


*As of current writing. This is the extent to which I found you can customize the colors on SXMO in Sway. wvkbd does allow for custom colors but I haven't found a way to do it without having to recompile it which will interfere with the sxmo-wvkbd package and you'll run into problems when there is an update to SXMO. If you want to fight with that, go on ahead. You can set the colors in its config.h and run make to compile it.

So that covers anything that I would've changed in .Xresources on dwm. If you would like to see me make a script, and possibly even a wayland version of the theming tool on sxmo.org, let me know by @ing me in the PINE64 or PinePhone chats or the SXMO irc. Though I will warn you that it might be one of the ugliest scripts you'll ever see.


***UPDATE 22 APR 22***

As soon as I shared this guide in the SXMO irc, ya boi mrrabbit informed me that you can customize wvkbd without having to fight with the sxmo-wvkbd package. So I spent the day after I posted this guide writing the script to easily do the Sway and bemenu parts in one place, then I spent the following day figuring out how to do the wvkbd customization myself, and today I wrote the script on it. So I could just share the script and then tell you to just edit and run it to customize wvkbd but that's not my style. I'm gonna go step by step and explain how you can customize wvkbd and you're going to skip past it all and download the beautiful script that does it all for you.

wvkbd

This is by far the most involved process when it comes to customization because you need to compile it and it needs to be compiled with a name other than the default name. None of it is hard, it's just more than editing a config file and rebooting. So the idea here is we are compiling a new version of wvkbd with our own colors, layouts, and dimensions then exporting it to KEYBOARD. Please note that while this will not break any updates, if there is a keyboard update (which is pretty unlikely at this point), you won't notice unless you comment out or delete the KEYBOARD definition in your profile file.

So the first thing you need to do is install all the necessary libraries and programs. I apologize to all 4 of the arch/sxmo users that can't just copy paste this command.

doas apk add git make pango-dev libxkbcommon-dev waylandpp-dev gcc libc-dev

Now that we've got that, lets clone wvkbd. If you want to put it in a directory that you're not in, just add the directory after the link (with a space in between them):

git clone https://github.com/jjsullivan5196/wvkbd

cd into the directory that's been created. By default it will be 'wvkbd'. We're not monsters here who edit default files so create a copy of config.def.h titled config.h

cp config.def.h config.h

And we need to change the names of a few files to match the name of our version of wvkbd. I'm not creative today and have decided to name the program wvkbd-custom so the filenames will reflect that. I only messed with colors so I'm not sure if there's any benefit to editing the layout.<name>.h file. As far as I know, unless you're adding more layouts, it's just a matter of editing config.h.

cp keymap.mobintl.h keymap.custom.h 

 cp layout.mobintl.h layout.custom.h

The next step is quick and easy, open config.mk in your favorite text editor and change "mobintl" into whatever name you put for the keymap and layout file names. It is imperative that all of these have the same name or else wvkbd will not compile.

Finally, we can get to the editing of colors. Edit config.h and you'll see that the colors are fairly simply laid out for you but, of course, I will explain each in detail because you'll notice there are actually 2 sets of colors (Oh my!). The first set of colors is referring to the keys in the inner portion of the keyboard such as the letters and spacebar in the default layout. The second set is for the colors on the outside of those. I haven't played with it enough, but it seems that the first set will be used if the 2nd set isn't defined. At least that's the case with the 1st set background setting which makes me wonder if the outer background setting actually does anything. Play with it and let me know. In my testing I set them both to the same color anyway but I set only the inner key background when I tested the script and left the outer as the default color and it changed the whole keyboard.

Anyway, here's what each of the colors mean:

.bg This the color of anything that isn't a key
.fg Key color
.high Key pressed color
.swipe Swiped key color. You won't see this unless you use a third party swipe program (the wvkbd readme suggests swipeGuess)
.text Text color

I've neglected to mention the most jarring part. These colors are not hex and are instead bgra with the exception of text color which is just a 32-bit integer. By default, it's 2.147B (why yes I play RuneScape, how could you tell) but there's good news to all this. You have options. If you'd like to set the colors in bgra, even the text color, you can do that. For the text color, just change ".color" to ".bgra" and copy the format of the above lines. If you're on another plane of existence, you can just put the unsigned 32-bit integer for the color you want for all of them. For this you need to change all of the .bgra lines to ".color = <integer>". What I chose, thanks to people who understand this better than I do (I believe it was Aren in the SXMO irc), was setting everything to .color and using hex formatted as ".color = 0xAARRGGBB". Just go with whatever makes you happiest.

Save and exit and run the following command to compile it to /usr/bin.

doas make clean install PREFIX=/usr

Now go to ~/.config/sxmo/profile and add the following line somewhere around where you put BEMENU_OPTS. If you did not use the prefix or chose a different name, your path will be different:

export KEYBOARD="/usr/bin/wvkbd-custom"

Reboot and now all of your changes should have taken effect.

I know this is what you came you here for and I made you scroll through this huge wall of text that I poured my heart and soul into... Here's the script to do all of this for you. Just simply uncomment the lines for the things you want to color, edit the hex codes, run the script, and reboot.

If you did read through all of this, I really appreciate it. I really did put a lot of effort into figuring out the customizations, putting it all into a single in-depth guide, and learning how to write a decent POSIX script. The next step in all this is to try to make the theme-o-matic for SWMO. Tentative name is the Themescape but I'm open to suggestions. Hell, if I've got the stones, I'll just extend theme-o-matic if it's not too hard. Anyway, thanks for reading the guide and using my script <3.