Skip to content
This repository has been archived by the owner on Oct 22, 2021. It is now read-only.

Terminal color filters

Gaby edited this page Apr 29, 2019 · 1 revision

If you want to customize the color scheme of eDEX's terminal, but you're too lazy to specify a full color scheme (I don't blame you), you can use a special key in your theme, under the terminal section, called colorFilter.

From the showcase theme tron-colorfilter.json:

...
"terminal": {
    "colorFilter": [
        "rotate(180)",
        "saturate(0.5)",
        "mix(0.7)"
    ]
},
...

Explanation

When specific terminal colors aren't specified in a theme, eDEX applies a bunch of filters on a hardcoded color scheme to generate a monochrome one that follows the theme's main color (set in the colors key).

Setting a colorFilter array allows you to override this behavior with any color manipulation steps of your choice. They will be applied in order on each "base" color, and the resulting color scheme will be used on the terminal.

Note: Manually specifying terminal colors and using filters is not incompatible. Any color that you have not specified will go through the filtering process.

Available filters

eDEX-UI uses color.

In a theme, you can apply the following filters:

negate()         // rgb(0, 100, 255) -> rgb(255, 155, 0)
 
lighten(0.5)     // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)
darken(0.5)      // hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
 
saturate(0.5)    // hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)
desaturate(0.5)  // hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)
grayscale()      // #5CBF54 -> #969696
 
whiten(0.5)      // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)
blacken(0.5)     // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)
 
fade(0.5)        // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
opaquer(0.5)     // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)
 
rotate(180)      // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)
rotate(-90)      // hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)
 
mix()            // mix with theme's color
mix(0.3)         // mix with theme's color, specifying percentage

There are no restrictions on how many filters you use and you can use them more than once.