• Introduction
• Preview
• Base16 Builder
• My color scheme
• Sway
• Waybar
• GTK+ and QT
• Visual Studio Code

Introduction

I love using tilling windows manager but I failed to found a full desktop environnement using one. I don't care to install each components myself but what I really wanted is a uniform look across everything. Thanks to base16 and oomox, I can easily generate a theme for all my applications.

Preview

Base16 Builder

Start by installing python and python-pip packages.

pacman -S python python-pip

Then install pybase16-builder in a new directory.

mkdir base16
cd base16
pip install pybase16-builder

To download and use templates/schemes from the community:

pybase16 update
pybase16 build

If pybase16 is not found, use ~/.local/bin/pybase16 instead.

My color scheme

You can choose between all already available color schemes or create your own. You can also use mine, it's a dark theme only based on the oceanic color scheme with orange as a accent color.

cd templates
git clone https://github.com/aflab-dotfr/base16-morio-scheme.git
mv base16-morio-scheme morio
cd ..
pybase16 build -s morio

schemes/morio/morio.yaml

scheme: "Morio"
author: "Aflab"
base00: "141414" #Default Background
base01: "1F1F1F" #Lighter Background (Used for status bars, line number and folding marks)
base02: "333333" #Selection Background
base03: "CCCCCC" #Comments, Invisibles, Line Highlighting
base04: "EDEDED" #Dark Foreground (Used for status bars)
base05: "F5F5F5" #Default Foreground, Caret, Delimiters, Operators
base06: "FFFFFF" #Light Foreground (Not often used)
base07: "292929" #Light Background (Not often used)
base08: "AB7967" #Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
base09: "C594C5" #Integers, Boolean, Constants, XML Attributes, Markup Link Url
base0A: "6699CC" #Classes, Markup Bold, Search Text Background
base0B: "5FB3B3" #Strings, Inherited Class, Markup Code, Diff Inserted
base0C: "99C794" #Support, Regular Expressions, Escape Characters, Markup Quotes
base0D: "FAC863" #Functions, Methods, Attribute IDs, Headings
base0E: "F99157" #Keywords, Storage, Selector, Markup Italic, Diff Changed
base0F: "EC5F67" #Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?>

Sway

Copy the color scheme file inside your sway config folder.

cp output/sway/themes/base16-morio.config ~/.config/sway/colorscheme

Then, in your sway config, include your colorscheme and set the colors properties.

~/.config/sway/config

include colorscheme

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

Reload your config.

swaymsg reload

Waybar

Copy the color scheme file inside your waybar config folder.

cp output/waybar/colors/base16-morio.css ~/.config/waybar/scheme.css

Import your color scheme inside your stylesheet.

~/.config/waybar/style.css

@import "scheme.css";

* {
    border: none;
    border-radius: 0;
    font-family: Roboto;
    min-height: 0;
}

window#waybar {
    background-color: @base01;
    color: @base04;
}

label {
    padding: 0px 8px
}

Reload your config.

swaymsg reload

GTK+ and QT

Install oomox and download my template from github.

cd templates
git clone https://github.com/aflab-dotfr/base16-oomox.git
mv base16-oomox oomox
cd ..

pybase16 build -t oomox

Generate your theme using oomox shell scripts.

# oomox theme
/opt/oomox/plugins/theme_oomox/gtk-theme/change_color.sh output/oomox/default/base16-morio -o base16

# numix icons
/opt/oomox/plugins/icons_numix/change_color.sh output/oomox/default/base16-morio -o base16

Use the QT configuration tool to install your new QT theme.

pacman -S qt5ct
qt5ct

Add these environnement variables for GTK.

~/.profile

export GTK_THEME=base16
export QT_QPA_PLATFORM=wayland
export QT_QPA_PLATFORMTHEME=qt5ct

If you have GNOME, change your settings.

gsettings set org.gnome.desktop.interface gtk-theme 'base16'
gsettings set org.gnome.desktop.interface icon-theme 'base16'

Visual Studio Code

Download my template from github.

cd templates
git clone https://github.com/aflab-dotfr/base16-vscode.git
mv base16-oomox oomox
cd ..

pybase16 build -t vscode

Copy the extension folder inside the vscode folder.

cp templates/vscode/extension ~/vscode-oss/extensions/base16-theme

Enable the extension inside the extensions tab CTRL+SHIFT+X.

Copy your generated theme json file inside with the name base16-theme.json.

cp output/vscode/themes/base16-morio.json ~/vscode-oss/extensions/base16-theme/base16-theme.json

Restart vscode then activate your theme by pressing CTRL+K CTRL+T and search for "Base16 Theme".