Customize: Use your own file

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

1. @main-color
   default: #00B0FF
   This defines the main color that is used as background for the header, dropdowns, buttons, table-headers, links etc.

2. @main-color-text
   default: contrast(@main-color, @dark-color, @light-color, 51%)
   This defines the main text color that used on the @main-color

3. @main-color-dark
   default: darken(@main-color, 5%)
   This is a small background alternative used for hover, active and pagination

4. @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

5. @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.

6. @main-background
   default: @dark-color
   This defines the main background color used inside the content of tabs

7. @text-color
   default: @light-color
   This defines the main text color used inside the content of tabs

8. @main-font-size (new in 0.3.9)
   default: 16
   This defines the main font size

Gutter properties

1. @main-gutter
   default: 30px
   This defines the main distance from the browser window to the start of content

2. @modal-gutter
   default: 30px
   This defines the distance inside the modal between the outer rims to the start of the content

3. @terminal-gutter
   default: 10px
   This defines the distance inside the terminal between the outer rims to the start of the content

4. @dropdown-gutter
   default: 15px
   This defines the distance from the outer rim of the dropdown to start of content

Tables

1. @table-row-background
   default: mix(@main-background, contrast(@main-background), 80%)

2. @table-row-header-background
   default: @main-color

3. @table-row-header-text-color
   default: @main-color-text

Progress

1. @progress-background
   default: @table-row-background

2. @progress-active-background
   default: @main-color

Swipe listing (e.g. files)

1. @swipe-list-background-color
   default: @table-row-background

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

Modal

1. @modal-background
   default: @light-color

2. @modal-backdrop
   default: fade(@dark-color, 70%)

3. @modal-footer-background
   default: fade(contrast(@modal-background), 5%)

4. @modal-border
   default: fade(contrast(@modal-background), 7%)

5. @modal-text
   default: @dark-color

Buttons

1. @btn-background
   default: @light-dark-color

2. @btn-text
   default: contrast(@light-dark-color, @dark-color, @light-color)

3. @btn-main-background
   default: @main-color

4. @btn-main-text
   default: @main-color-text

5. @btn-danger-background
   default: #D40000

6. @btn-danger-text
   default: contrast(@btn-danger-background, @dark-color, @light-color);

Dropdown and online/offline indicator

1. @online-color
   default: #9AFD00

2. @offline-color
   default: red

3. @dropdown-color
   default: @main-color;

4. @dropdown-color-text
   default: @main-color-text

5. @dropdown-divider-color
   default: @main-color-dark

Terminal

1. @terminal-color
   default: #0F0

2. @terminal-background
   default: @main-background

3. @terminal-text-color
   default: @terminal-color

iScroll scrollbars

1. @terminal-iScroll-color
   default: fade(@terminal-color, 70%)

2. @dropdown-iScroll-color
   default: fade(@light-darker-dark-color, 70%)

3. @main-iScroll-color
   default: fade(contrast(@main-background), 70%)

Inputs

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

2. @input-text-color
   default: contrast(@input-background)

Addon's

1. @addon-background
   default: @dark-lighter-color

2. @addon-text-color
   default: @light-color

Keyboard

1. @keyboard-background
   default: @dark-light-color

2. @keyboard-color
   default: contrast(@keyboard-background)

3. @keyboard-accept
   default: #00C751

4. @keyboard-remove
   default: #9E0000

General styles used for contrast etc.

1. @dark-color
   default: black

2. @dark-light-color
   default: lighten(@dark-color, 20%)

3. @dark-lighter-color
   default: lighten(@dark-color, 30%)

4. @neutral-color
   default: #555

5. @light-color
   default: white

6. @light-dark-color
   default: darken(@light-color, 2%)

7. @light-darker-color
   default: darken(@light-color, 20%)

8. @light-darker-dark-color
   default: darken(@light-color, 50%)

9. @light-darker-darker-color
   default: darken(@light-color, 55%)