ayu is a simple theme with bright colors and comes in three versions — dark, mirage and light for all day long comfortable work.

This theme has been inspired by the multicolor theme from Awesome WM Copycats and uses the gorgeous ayu color palette.

Screenshoots

dark

mirage

light

Installation

Dependencies

optional to switch colorschemes

wpgtk

Preconfigured awesome configuration

My awesome configuration uses this theme. Follow the instruction in my awesome-rc repo to use my setup as a starting point.

Use theme with your custom configuration.

Follow these instruction to use my theme in your custom awesome configuration.

Clone vicious and theme to ~/.config/awesome/

cd $HOME/.config/awesome
mkdir themes
git clone https://github.com/MArpogaus/awesome-ayu.git themes/ayu
git clone https://github.com/vicious-widgets/vicious.git vicious

Install Font Awesome 4 and mononoki

# Debian / Ubuntu
apt install fonts-font-awesome fonts-mononoki
# Manjaro
pamac build ttf-font-awesome-4 ttf-mononoki

Download and install owfont

wget -O /usr/share/fonts/TTF/owfont-regular.ttf 'https://github.com/websygen/owfont/blob/master/fonts/owfont-regular.ttf?raw=true'

Create your configuration file.

cp themes/ayu/config.lua.template config.lua

Load the theme in your rc.lua

local chosen_theme= "ayu"
beautiful.init(string.format("%s/.config/awesome/themes/%s/theme.lua", os.getenv("HOME"), chosen_theme))
awful.screen.connect_for_each_screen(beautiful.at_screen_connect)

Optional: install wpgtk to switch colorschemes. JSON colorschemes and a Rofi template can be found in the wpg folder.

# Install from Pip
sudo pip3 install wpgtk
# Install from AUR
pamac build wpgtk-git

# install colorschemes
cd $HOME/.config/awesome/themes/ayu/img
cs=light; wpg -a $cs.png; wpg -i $cs.png ../wpg/ayu_$cs.json
cs=dark; wpg -a $cs.png; wpg -i $cs.png ../wpg/ayu_$cs.json
cs=mirage; wpg -a $cs.png; wpg -i $cs.png ../wpg/ayu_$cs.json

# install wpgtk templates for icons, gtk and rofi themes
wpg-install.sh -gir

# install modified rofi template
cp $HOME/.config/awesome/themes/ayu/wpg/templates/rofi.base $HOME/.config/wpg/templates/rofi.base

# restore on startup
echo '$HOME/.config/wpg/wp_init.sh' > $HOME/.xprofile

Configuration

The configuration file config.lua allows you to adjust the appearance of the theme to your needs. The following table gives an overview of all configuration parameters:

Name	Description	Type
`tyrannical`	using Tyrannical tag managment engine	bool
`xresources`	load colorschemes from xresources	bool
`color_scheme`	colorscheme to use	string
`dpi`	number of pixels per inch of the screen	string
`icon_theme`	icon theme to use	string
`wallpaper`	path to your wallpaper	string
`desktop_widgets`	enable/disable desktop widget	bool
`wibar_widgets`	widgets for the wibar	array of strings
`arc_widgets`	widgets for the the desktop pop up	array of strings
`widgets_arg`	widget parameters (see below)	table

If parameters are unset the following defaults are used:

{
    -- Load colorschemes from xresources
    xresources = false,
    color_scheme = 'light',

    -- icon theme to use
    icon_theme = 'HighContrast',

    -- disable desktop widget
    desktop_widgets = true,

    -- Using Tyrannical tag managment engine
    tyrannical = false,

    -- widgets to be added to wibar
    wibar_widgets = {
        'net_down',
        'net_up',
        'vol',
        'mem',
        'cpu',
        'fs',
        'weather',
        'temp',
        'bat',
        'datetime'
    },

    -- widgets to be added to the desktop pop up
    arc_widgets = {'cpu', 'mem', 'fs', 'bat'}
}

Widget Parameters

Some widgets (weather, temp, net) require additional configuration. The parameters for each widget are stored in a table under the key widgets_arg in the configuration.

A example configuration is shown in the following listing:

{
    weather = {
        -- Your city for the weather widget
        city_id = '2643743',
        app_id = '4c57f0c88d9844630327623633ce269cf826ab99'
    },
    temp = {
        -- Set resource for temperature widget
        thermal_zone = 'thermal_zone0'
    },
    net = {
        -- Network interface
        net_interface = 'eth0'
    }
}

The following table gives an overview of all widget parameters:

Name	Description	Type
`city_id`	open weather map id of your city. Find it here: https://openweathermap.org/find?q=	string
`app_id`	open weather map API key. Sign up here: https://home.openweathermap.org/users/sign_up	string
`thermal_zone`	resource for temperature widget: https://vicious.readthedocs.io/en/latest/widgets.html#vicious-widgets-thermal	string
`net_interface`	network interface to monitor: https://vicious.readthedocs.io/en/latest/widgets.html#vicious-widgets-net	string

Helper functions

A set of helper functions is provided to toggle the colorscheme using key bindings. This functionality is implemented in multiple steps:

The awesome colorscheme is updated. This involves updating the theme colors and regenerating all widgets.
wpgtk is used to update gtk and rofi themes.

Note: remember to use wpg-install.sh to install the wpk templates for gtk, icons and rofi
sed is used to change the sublime text colorscheme.

Note: the settings file is expected to be found under ~/.config/sublime-text-3/Packages/User/Preferences.sublime-settings
xsettingsd is used to change the icon theme.

Warning: This is optimized to work on my machine. You might want to check the implementation to avoid any damage to your system.

To use these functions import the utilities packages

local util = require('themes.ayu.util')

and add the following key bindings to your rc.lua:

...
awful.key(
    {modkey, altkey, 'Control'}, 'l', util.set_light,
    {description = 'set light colorscheme', group = 'theme'}
), awful.key(
    {modkey, altkey, 'Control'}, 'm', util.set_mirage,
    {description = 'set mirage colorscheme', group = 'theme'}
), awful.key(
    {modkey, altkey, 'Control'}, 'd', util.set_dark,
    {description = 'set dark colorscheme', group = 'theme'}
)
...

License

Related projects

ayu for Ace: https://github.com/ayu-theme/ayu-ace
ayu colors as NPM package: https://github.com/ayu-theme/ayu-colors
ayu for VSCode: https://github.com/teabyii/vscode-ayu
ayu for XCode: https://github.com/vburojevic/ayu-xcode-theme
ayu for Sublime Text 3: https://github.com/dempfi/ayu

MArpogaus / awesome-ayu