Part 0 - Prerequisites

Before we look at customising anything, we will first copy the default Sway config into our home directory and edit that version. To do this we simply need to make the directory and copy the file.

$ mkdir -p ~/.config/sway
$ cp /etc/sway/config ~/.config/sway/config

Sway will look for this file and use it automatically when logging in or reloading the configuration when changes are made.

NOTE: After each change reload the Sway config by pressing $mod+Shift+c.

Part 1 - Keyboard Layout

As I use an ISO keyboard, I needed to add this to the config, there is an example of how to do this already in the config file. You can also use identifiers to explicity set which input you are using, to do this you would need to use swaymsg -t get_inputs and look through.

It was as simple as adding the following to ~/.config/sway/config:

input * {
    xkb_layout "gb"
}

Part 2 - Outputs

Next I needed to confgure the monitors as I use two monitors with one of them being in portrait. Again there is an example of how to do this in the config file. Use swaymsg -t get_outputs to determine the name of your ouputs.

I added this to ~/.config/sway/config:

output DP-1 {
    bg ~/Wallpapers/bg1.jpg fill
    resolution 2560x1440
    position 0 500
}

output DP-2 {
    bg ~/Wallpapers/bg1.jpg fill
    resolution 2560x1440
    position -1440 0
    transform 270
}

I have DP-1 as my main monitor and DP-2 as my portrait monitor to the left of DP-1. I also set the background image to use on both displays and set it to fill. Use transform to rotate for portrait monitors.

I also added the following so that workspace 1 is always on the left portrait monitor and workspace 2 on the right monitor:

workspace 1 output DP-2
workspace 2 output DP-1

Part 3 - Alacritty Terminal

One of the dependencies that gets pulled in when installing Sway is the Alacritty terminal. To theme this we’ll need to create a config file again, Alacritty uses a .yml file for this.

$ mkdir -p ~/.config/alacritty && touch ~/.config/alacritty/alacritty.yml

If you head over to the Alacritty colour-schemes Github page here you can copy whichever one you like to use. I personally use Gruvbox on all my machines (and this site) so my Alacritty config looks like this:

# Colors (Gruvbox dark)
colors:
  primary:
    # hard contrast background - '#1d2021'
    background:        &gruvbox_dark_bg '#282828'
    # soft contrast background - '#32302f'
    foreground:        '#fbf1c7'
    bright_foreground: '#f9f5d7'
    dim_foreground:    '#f2e5bc'
  cursor:
    text:   CellBackground
    cursor: CellForeground
  vi_mode_cursor:
    text:   CellBackground
    cursor: CellForeground
  # search:
  #   matches:
  #     foreground: '#000000'
  #     background: '#ffffff'
  #   focused_match:
  #    foreground: CellBackground
  #    background: CellForeground
  #   bar:
  #     background: ''
  #     foreground: ''
  # line_indicator:
  #   foreground: None
  #   background: None
  selection:
    text:       CellBackground
    background: CellForeground
  bright:
    black:   '#928374'
    red:     '#fb4934'
    green:   '#b8bb26'
    yellow:  '#fabd2f'
    blue:    '#83a598'
    magenta: '#d3869b'
    cyan:    '#8ec07c'
    white:   '#ebdbb2'
  normal:
    black:   *gruvbox_dark_bg
    red:     '#cc241d'
    green:   '#98971a'
    yellow:  '#d79921'
    blue:    '#458588'
    magenta: '#b16286'
    cyan:    '#689d6a'
    white:   '#a89984'
  dim:
    black:   '#32302f'
    red:     '#9d0006'
    green:   '#79740e'
    yellow:  '#b57614'
    blue:    '#076678'
    magenta: '#8f3f71'
    cyan:    '#427b58'
    white:   '#928374'
  # indexed_colors: []

# Fonts
font:
  normal:
    family: Source Code Pro
    style: Regular

  bold:
    family: Source Code Pro
    style: Bold

  italic:
    family: Source Code Pro
    style: Italic

  bold_italic:
    family: Source Code Pro
    style: Bold Italic

  size: 11.5

# Display tabs using this many cells
tabspaces: 4

# Background Transparency
background_opacity: 0.95

I’m using the Source Code Pro font and I’ve set the transparency to just slightly view the background behind.

Note: If you’ve used something like URXVT you’ll be familiar with copy and paste but if not you’ll need to use Ctrl+Shift+c and Ctrl+Shift+v respectively.

Part 4 - Sway Colours

As I sometimes change colour themes, I like to use variables in my setup for the colours. I created the ~/.config/sway/colorscheme file in the Sway config directory and added the following:

## Base16 Gruvbox dark, hard
# Author: Dawid Kurek (dawikur@gmail.com), morhetz (https://github.com/morhetz/gruvbox)

set $base00 #1d2021
set $base01 #3c3836
set $base02 #504945
set $base03 #665c54
set $base04 #bdae93
set $base05 #d5c4a1
set $base06 #ebdbb2
set $base07 #fbf1c7
set $base08 #fb4934
set $base09 #fe8019
set $base0A #fabd2f
set $base0B #b8bb26
set $base0C #8ec07c
set $base0D #83a598
set $base0E #d3869b
set $base0F #d65d0e

In order to use those colours you first need to edit your ~/.config/sway/config file and add an include to the colourscheme file.

include colorscheme

Then to set these colours, add the following section to the ~/.config/sway/config file:

# Colours
# Basic color configuration using the Base16 variables for windows and borders.
# Property Name         Border  BG      Text    Indicator Child Border
client.focused          $base05 $base0D $base00 $base0C $base0D
client.focused_inactive $base01 $base01 $base05 $base03 $base01
client.unfocused        $base01 $base00 $base05 $base01 $base01
client.urgent           $base08 $base08 $base00 $base08 $base08
client.placeholder	$base00 $base00 $base05 $base00 $base00
client.background	$base07

Part 5 - Lockscreen

Make sure you have the swaylock package installed as per the last installment of this series. In the Sway config ~/.config/sway/config you need to add a binding for the lockscreen, I use:

bindsym $mod+Shift+x exec swaylock --daemonize

By default the lockscreen uses a blinding white, I’ve changed this to match the same colours that I use everywhere else. To do this you just need to make the config file and then add the colour, there are many other options but I haven’t bothered to change them.

$ mkdir -p ~/.config/swaylock && echo 'color=282828' > ~/.config/swaylock/config

There’s no dialog box as such, but just typing your password will reveal an animation to show it’s working.

Part 6 - Customise

Now it should just be a case of adjusting parts how you like them, I recommend starting with changing colours to your preferred theme.

Next time we’ll look at editing the bar, setting up an application launcher and some other tweaks.