Alto theme

Alto is a medium contrast colour scheme developed with the intention of appearing neutral, though not without a personality of its own. It comes in light and dark variants, while using a single 16-colour palette.

Packages or ports of it are available for the Atom text editor, Vim, the Vim Airline plugin, Jekyll websites using the Rouge gem, as well as the Xfce4, Terminator, iTerm2, urxvt, and Hyper terminal emulators.

Palette

Dark base

182D2A 283D3A 687D7A 98ADAA

Light base

FAFAEC EAEADC 8A8A7C 5A5A4C

Accent values

C6414D C9753D 679945 378BBD
C97885 C6A13D 57AB8B 9A7BC8

Base values from left to right: background, background highlight, secondary text, primary text.

Atom text editor packages

Alto light available at

Atom GitHub Or run the command apm install alto-syntax

Alto dark available at

Atom GitHub Or run the command apm install alto-dark-syntax

Vim and Vim Airline

All Prot16 themes (including Alto) are available as plugins for Vim and Vim Airline. To install them, use your favourite plugin manager. With vim-plug:

Plug 'protesilaos/prot16-vim'
Plug 'protesilaos/prot16-vim-airline'

Then specify your choice in .vimrc. Use either the light or dark variant:

colorscheme alto_light
let g:airline_theme='alto_light'

" or use these instead
colorscheme alto_dark
let g:airline_theme='alto_dark'

Atom and Vim colour mapping

Primary

Secondary

Tertiary


Primary: Class names, variables, functions, etc.
Secondary: Measurement units, strings, support functions, etc.
Tertiary: Cursor, support classes, etc.

Terminal emulators

Palette value correspondance to 16-colour terms
0 = dhl; 1 = red; 2 = gre; 3 = yel; 4 = blu; 5 = mag; 6 = cya; 7 = lhl;
8 = dbg; 9 = ora; 10 = lt1; 11 = dt2; 12 = lt2; 13 = vio; 14 = dt1; 15 = lbg
283D3A C6414D 679945 C6A13D 378BBD C97885 57AB8B EAEADC 182D2A C9753D 5A5A4C 687D7A 8A8A7C 9A7BC8 98ADAA FAFAEC

Terminal Base values (light theme)
Background: FAFAEC
Foreground: 5A5A4C
Cursor: 5A5A4C
Bold colour: 5A5A4C

Terminal Base values (dark theme)
Background: 182D2A
Foreground: 98ADAA
Cursor: 98ADAA
Bold colour: 98ADAA

For Alto, the following terminal emulators are supported thus far:

Jekyll blog with Rouge for highlighting

To use Alto on your Rouge-enabled Jekyll site, go ahead and implement either the the light or the the dark variant.

This demo makes use of the Rouge gem to create the markup. It is a lightweight solution for highlighting code on the web. Bear in mind that it is not a perfect representation of the Atom packages or terminal ports.

#!/bin/bash

# Random bits and pieces
match=$(echo "${array[@]:0}" | grep -o ${schemeslug})  

# Do the work if there is a match
if [ ! -z ${match} ]; then
	scheme=${schemeslug}
	echo "Found ${scheme}"
	echo "Accepted commit message '${commit}'"
	echo "Message '${apmsemver}'"
    
    # Work goes here ...

# Error message if scheme name does not exist
else
	echo "${redbg}${whitefg}Error${colourreset} some message"
	echo "Try any one of these instead"
	echo ${array}
	exit 1
fi

# here is how to stop the server
for pid in `ps aux | grep 'node ../server.js' | awk '{print $2}'` ; do
  sudo kill -9 $pid 2> /dev/null
done

exit 0
#!/bin/bash

# Random bits and pieces
match=$(echo "${array[@]:0}" | grep -o ${schemeslug})

# Do the work if there is a match
if [ ! -z ${match} ]; then
	scheme=${schemeslug}
	echo "Found ${scheme}"
	echo "Accepted commit message '${commit}'"
	echo "Message '${apmsemver}'"

    # Work goes here ...

# Error message if scheme name does not exist
else
	echo "${redbg}${whitefg}Error${colourreset} some message"
	echo "Try any one of these instead"
	echo ${array}
	exit 1
fi

# here is how to stop the server
for pid in `ps aux | grep 'node ../server.js' | awk '{print $2}'` ; do
  sudo kill -9 $pid 2> /dev/null
done

exit 0
// Random elements
$weight: bold !default;
$color: red;

@mixin example($arg1, $arg2) {
    background-color: $arg1;
    color: $arg2;
}

%placeholder {
    display: block;
    margin: 0 auto;
}

// FIXME a comment is here
.class {
    font-family: 'A string', sans-serif;
    font-size: 16px;
    font-weight: $weight;

    %extend placeholder;

    @include example(#123123, white);

    &::before,
    &::after {
        content: "";
        display: block;
        width: calc(calc(100% - 5rem) - 10px);
        height: 10px;
    }

    &:not(.other-class) {
        border-bottom: thin solid darken($color, 3%);
    }
}
// Random elements
$weight: bold !default;
$color: red;

@mixin example($arg1, $arg2) {
    background-color: $arg1;
    color: $arg2;
}

%placeholder {
    display: block;
    margin: 0 auto;
}

// FIXME a comment is here
.class {
    font-family: 'A string', sans-serif;
    font-size: 16px;
    font-weight: $weight;

    %extend placeholder;

    @include example(#123123, white);

    &::before,
    &::after {
        content: "";
        display: block;
        width: calc(calc(100% - 5rem) - 10px);
        height: 10px;
    }

    &:not(.other-class) {
        border-bottom: thin solid darken($color, 3%);
    }
}

Related git repositories

Wish to contribute? Check out these repos:

Protesilaos profile photo

Protesilaos Stavrou

EU policy analyst. Philosopher. Web developer.
Full profile