Move focus to
evc
UI and colors management that SuperB
Artwork by いのふとん
BUI is a UI and colors management method that export the colors hex through environment variables so any program that can read environment variables can used it.
Set the user interface:
| Value | Invalid | Default | Description |
|---|---|---|---|
BUI_GTK_THEME |
string |
$GTK_THEME (Adwaita) |
GTK theme |
BUI_GTK_TOOLBAR_STYLE |
(GTK_TOOLBAR_ICONS| |GTK_TOOLBAR_TEXT| |GTK_TOOLBAR_BOTH| |GTK_TOOLBAR_BOTH_HORIZ) |
GTK_TOOLBAR_BOTH |
GTK toolbar style |
BUI_GTK_TOOLBAR_ICON_SIZE |
(GTK_ICON_SIZE_MENU| |GTK_ICON_SIZE_SMALL_TOOLBAR| |GTK_ICON_SIZE_LARGE_TOOLBAR| |GTK_ICON_SIZE_BUTTON| |GTK_ICON_SIZE_DND| |GTK_ICON_SIZE_DIALOG) |
GTK_ICON_SIZE_LARGE_TOOLBAR |
GTK toolbar icon size |
BUI_ICON_THEME |
string |
Adwaita |
Icon theme |
BUI_MOUSE_CURSOR_THEME |
string |
Adwaita |
Mouse cursor theme |
BUI_MOUSE_CURSOR_SIZE |
<number> |
0.0 |
Border size |
BUI_BUTTON_IMAGES |
(true|false) |
true |
Button images |
BUI_MENU_IMAGES |
(true|false) |
true |
Menu images |
BUI_EVENT_SOUNDS |
(true|false) |
true |
Event sounds |
BUI_INPUT_FEEDBACK_SOUNDS |
(true|false) |
true |
Input feedback sounds |
BUI_GAPS_SIZE |
<number> |
0.0 |
Gaps size |
BUI_BORDER_SIZE |
<number> |
1.0 |
Border size |
BUI_OPACITY |
(0.0 - 1.0) |
1.0 |
Background opacity |
| Value | Invalid | Default | Description |
|---|---|---|---|
BUI_CURSOR |
(block|beam|underline) |
block |
Text cursor shape |
BUI_CURSOR_BLINK |
(true|false) |
true |
Text cursor blink |
BUI_FONT_FAMILY |
string |
Sans |
Font family |
BUI_FONT_SIZE |
<number> |
10.0 |
Font size |
BUI_FONT_MONO_FAMILY |
string |
Monospace |
Fixed-width font family |
BUI_FONT_MONO_SIZE |
<number> |
10 |
Fixed-width font size |
BUI_FONT_ANTIALIAS |
(true|false) |
true |
Font antialias |
BUI_HINT_STYLE |
(none|slight|medium|full) |
full |
Hint style |
BUI_SUBPIXEL |
(none|rgb|bgr|vrgb|vbgr) |
none |
Subpixel |
First set the hex value of all the colors: BUI_COLOR_<NAME>="#<HEX>".
As for me, I put all the color names that match the Minecraft wool palette (i mean 16 colors with 4 of them being grayscale, looks kinda fit with the terminal color palette)
BUI_COLOR_BLACK
BUI_COLOR_GRAY
BUI_COLOR_GREY
BUI_COLOR_WHITE
BUI_COLOR_BROWN
BUI_COLOR_RED
BUI_COLOR_ORANGE
BUI_COLOR_YELLOW
BUI_COLOR_LIME
BUI_COLOR_GREEN
BUI_COLOR_TEAR
BUI_COLOR_CYAN
BUI_COLOR_BLUE
BUI_COLOR_PURPLE
BUI_COLOR_MAGENTA
BUI_COLOR_PINK
Then you can just associate the colors of the elements with their hex: export BUI_COLOR_<ELEMENT>="$BUI_COLOR_<NAME>.
This is a good practice as it makes the colors more readable (it shows the color name not the hex) and avoids duplication.
Set the color of the elements so that any program can get it:
| Value | Description |
|---|---|
BUI_COLOR_FOREGROUND |
Foreground color |
BUI_COLOR_BACKGROUND |
Background color |
BUI_COLOR_FOREGROUND_ALT |
Alternative foreground color |
BUI_COLOR_BACKGROUND_ALT |
Alternative background color |
BUI_COLOR_CURSOR |
Cursor or focus element color |
BUI_COLOR_CURSOR_ALT |
Alternative cursor or unfocus element color |
BUI_COLOR_SELECTION |
Selection color |
With function and syntax, Base16 is the best architecture as it work on most all color scheme:
| Value | Color |
|---|---|
BUI_COLOR_BASE00 |
|
BUI_COLOR_BASE01 |
|
BUI_COLOR_BASE02 |
|
BUI_COLOR_BASE03 |
|
BUI_COLOR_BASE04 |
|
BUI_COLOR_BASE05 |
|
BUI_COLOR_BASE06 |
|
BUI_COLOR_BASE07 |
|
BUI_COLOR_BASE08 |
|
BUI_COLOR_BASE09 |
|
BUI_COLOR_BASE0A |
|
BUI_COLOR_BASE0B |
|
BUI_COLOR_BASE0C |
|
BUI_COLOR_BASE0D |
|
BUI_COLOR_BASE0E |
|
BUI_COLOR_BASE0F |
Set the terminal color:
| Value | Name | Color |
|---|---|---|
BUI_COLOR_TERMINAL000 |
black |
|
BUI_COLOR_TERMINAL001 |
red |
|
BUI_COLOR_TERMINAL002 |
green |
|
BUI_COLOR_TERMINAL003 |
yellow |
|
BUI_COLOR_TERMINAL004 |
blue |
|
BUI_COLOR_TERMINAL005 |
magenta |
|
BUI_COLOR_TERMINAL006 |
cyan |
|
BUI_COLOR_TERMINAL007 |
white |
|
BUI_COLOR_TERMINAL008 |
bright_black |
|
BUI_COLOR_TERMINAL009 |
bright_red |
|
BUI_COLOR_TERMINAL010 |
bright_green |
|
BUI_COLOR_TERMINAL011 |
bright_yellow |
|
BUI_COLOR_TERMINAL012 |
bright_blue |
|
BUI_COLOR_TERMINAL013 |
bright_magenta |
|
BUI_COLOR_TERMINAL014 |
bright_cyan |
|
BUI_COLOR_TERMINAL015 |
bright_white |
|
BUI_COLOR_TERMINAL016 |
16 |
|
BUI_COLOR_TERMINAL017 |
17 |
|
BUI_COLOR_TERMINAL018 |
18 |
|
BUI_COLOR_TERMINAL019 |
19 |
|
| ... | ... | ... |
BUI_COLOR_TERMINAL255 |
255 |
Foreground, background and cursor are explained in Elements.
# UI
export BUI_CURSOR="block"
export BUI_OPACITY="0.8"
export BUI_FONT_FAMILY="Iosevka Extended"
export BUI_FONT_SIZE="12.0"
# Colors
export BUI_COLOR_DARK="#181818"
export BUI_COLOR_DARK_ALT="#282828"
export BUI_COLOR_BLACK="#383838"
export BUI_COLOR_GRAY="#585858"
export BUI_COLOR_GREY="#B8B8B8"
export BUI_COLOR_WHITE="#D8D8D8"
export BUI_COLOR_LIGHT_ALT="#E8E8E8"
export BUI_COLOR_LIGHT="#F8F8F8"
export BUI_COLOR_BROWN="#A16946"
export BUI_COLOR_RED="#AB4642"
export BUI_COLOR_ORANGE="#DC9656"
export BUI_COLOR_YELLOW="#F7CA88"
export BUI_COLOR_LIME="#A1B56C"
export BUI_COLOR_CYAN="#86C1B9"
export BUI_COLOR_BLUE="#7CAFC2"
export BUI_COLOR_MAGENTA="#BA8BAF"
# Elements
export BUI_COLOR_MAIN="$BUI_COLOR_YELLOW"
export BUI_COLOR_MAIN_ALT="$BUI_COLOR_GREY"
export BUI_COLOR_FOREGROUND="$BUI_COLOR_WHITE"
export BUI_COLOR_BACKGROUND="$BUI_COLOR_DARK"
export BUI_COLOR_FOREGROUND_ALT="$BUI_COLOR_GRAY"
export BUI_COLOR_BACKGROUND_ALT="$BUI_COLOR_DARK_ALT"
export BUI_COLOR_CURSOR="$BUI_COLOR_MAIN"
export BUI_COLOR_CURSOR_ALT="$BUI_COLOR_MAIN_ALT"
export BUI_COLOR_SELECTION="$BUI_COLOR_GRAY"
# Base16
export BUI_COLOR_BASE00="$BUI_COLOR_DARK"
export BUI_COLOR_BASE01="$BUI_COLOR_DARK_ALT"
export BUI_COLOR_BASE02="$BUI_COLOR_BLACK"
export BUI_COLOR_BASE03="$BUI_COLOR_GRAY"
export BUI_COLOR_BASE04="$BUI_COLOR_GREY"
export BUI_COLOR_BASE05="$BUI_COLOR_WHITE"
export BUI_COLOR_BASE06="$BUI_COLOR_LIGHT_ALT"
export BUI_COLOR_BASE07="$BUI_COLOR_LIGHT"
export BUI_COLOR_BASE08="$BUI_COLOR_RED"
export BUI_COLOR_BASE09="$BUI_COLOR_ORANGE"
export BUI_COLOR_BASE0A="$BUI_COLOR_YELLOW"
export BUI_COLOR_BASE0B="$BUI_COLOR_LIME"
export BUI_COLOR_BASE0C="$BUI_COLOR_CYAN"
export BUI_COLOR_BASE0D="$BUI_COLOR_BLUE"
export BUI_COLOR_BASE0E="$BUI_COLOR_MAGENTA"
export BUI_COLOR_BASE0F="$BUI_COLOR_BROWN"
# Terminal
export BUI_COLOR_TERMINAL000="$BUI_COLOR_DARK_ALT"
export BUI_COLOR_TERMINAL001="$BUI_COLOR_RED"
export BUI_COLOR_TERMINAL002="$BUI_COLOR_LIME"
export BUI_COLOR_TERMINAL003="$BUI_COLOR_YELLOW"
export BUI_COLOR_TERMINAL004="$BUI_COLOR_BLUE"
export BUI_COLOR_TERMINAL005="$BUI_COLOR_MAGENTA"
export BUI_COLOR_TERMINAL006="$BUI_COLOR_CYAN"
export BUI_COLOR_TERMINAL007="$BUI_COLOR_GREY"
export BUI_COLOR_TERMINAL008="$BUI_COLOR_GRAY"
export BUI_COLOR_TERMINAL009="$BUI_COLOR_RED"
export BUI_COLOR_TERMINAL010="$BUI_COLOR_LIME"
export BUI_COLOR_TERMINAL011="$BUI_COLOR_YELLOW"
export BUI_COLOR_TERMINAL012="$BUI_COLOR_BLUE"
export BUI_COLOR_TERMINAL013="$BUI_COLOR_MAGENTA"
export BUI_COLOR_TERMINAL014="$BUI_COLOR_CYAN"
export BUI_COLOR_TERMINAL015="$BUI_COLOR_LIGHT_ALT"See my Environment variables for more information and explanations.
bui-appearance: for widget toolkit (GTK)bui-terminal: for terminalbui.kak: for Kakoune
Made with ❤️ by NNB
