Customize: Use your own file - BillyBlaze/OctoPrint-TouchUI GitHub Wiki

With version 0.3.0 of TouchUI, you can add your own LESS variables, on this wiki you will find all the variables that are used and their default value.

The philosophy is that we include your file after importing the main LESS file of TouchUI. You've total control and can even overwrite CSS selectors if needed.

Even after upgrading TouchUI, your custom file will not be overwritten, all new updates are still applied, you might need to update obsolete or updated variables. If we change variables, then please see the Release Notes for the changes.

General styling

@main-color
default: #00B0FF
This defines the main color that is used as background for the header, dropdowns, buttons, table-headers, links etc.
@main-color-text
default: contrast(@main-color, @dark-color, @light-color, 51%)
This defines the main text color that used on the @main-color
@main-color-dark
default: darken(@main-color, 5%)
This is a small background alternative used for hover, active and pagination
@main-color-dark-text
default: contrast(@main-color-dark, @dark-color, @light-color, 60%)
This defines the text color that is used on top of @main-color-dark
@main-color-darker
default: darken(@main-color, 15%)
Another alternative of @main-color that is used for buttons inside the dropdown, @main-color-dark is the default background color of a button, this property is used for active and focus.
@main-background
default: @dark-color
This defines the main background color used inside the content of tabs
@text-color
default: @light-color
This defines the main text color used inside the content of tabs
@main-font-size (new in 0.3.9)
default: 16
This defines the main font size

Gutter properties

@main-gutter
default: 30px
This defines the main distance from the browser window to the start of content
@modal-gutter
default: 30px
This defines the distance inside the modal between the outer rims to the start of the content
@terminal-gutter
default: 10px
This defines the distance inside the terminal between the outer rims to the start of the content
@dropdown-gutter
default: 15px
This defines the distance from the outer rim of the dropdown to start of content

Tables

@table-row-background
default: mix(@main-background, contrast(@main-background), 80%)
@table-row-header-background
default: @main-color
@table-row-header-text-color
default: @main-color-text

Progress

@progress-background
default: @table-row-background
@progress-active-background
default: @main-color

Swipe listing (e.g. files)

@swipe-list-background-color
default: @table-row-background
@swipe-list-background-open-color
default: mix(@main-color, @dark-color, 60%)

Modal

@modal-background
default: @light-color
@modal-backdrop
default: fade(@dark-color, 70%)
@modal-footer-background
default: fade(contrast(@modal-background), 5%)
@modal-border
default: fade(contrast(@modal-background), 7%)
@modal-text
default: @dark-color

Buttons

@btn-background
default: @light-dark-color
@btn-text
default: contrast(@light-dark-color, @dark-color, @light-color)
@btn-main-background
default: @main-color
@btn-main-text
default: @main-color-text
@btn-danger-background
default: #D40000
@btn-danger-text
default: contrast(@btn-danger-background, @dark-color, @light-color);

Dropdown and online/offline indicator

@online-color
default: #9AFD00
@offline-color
default: red
@dropdown-color
default: @main-color;
@dropdown-color-text
default: @main-color-text
@dropdown-divider-color
default: @main-color-dark

Terminal

@terminal-color
default: #0F0
@terminal-background
default: @main-background
@terminal-text-color
default: @terminal-color

iScroll scrollbars

@terminal-iScroll-color
default: fade(@terminal-color, 70%)
@dropdown-iScroll-color
default: fade(@light-darker-dark-color, 70%)
@main-iScroll-color
default: fade(contrast(@main-background), 70%)

Inputs

@input-background
default: contrast(@main-background, @dark-light-color, @light-dark-color, 50%)
@input-text-color
default: contrast(@input-background)

Addon's

@addon-background
default: @dark-lighter-color
@addon-text-color
default: @light-color

Keyboard

@keyboard-background
default: @dark-light-color
@keyboard-color
default: contrast(@keyboard-background)
@keyboard-accept
default: #00C751
@keyboard-remove
default: #9E0000

General styles used for contrast etc.

@dark-color
default: black
@dark-light-color
default: lighten(@dark-color, 20%)
@dark-lighter-color
default: lighten(@dark-color, 30%)
@neutral-color
default: #555
@light-color
default: white
@light-dark-color
default: darken(@light-color, 2%)
@light-darker-color
default: darken(@light-color, 20%)
@light-darker-dark-color
default: darken(@light-color, 50%)
@light-darker-darker-color
default: darken(@light-color, 55%)