Theming

Color Schemes

Available color schemes are:

CSS variables

You should hide inner WarpScript code and use css vars as much as possible.

@import url('https://fonts.googleapis.com/css?family=Jura:300,400,500,600,700&subset=cyrillic,cyrillic-ext,latin-ext');

body {
    font-family: 'Jura', sans-serif;
    font-size       : 12px;
    line-height     : 1.52;
    background : fixed url(https://robertsspaceindustries.com/rsi/static/images/gridbg_glow.png), url(https://robertsspaceindustries.com/rsi/static/images/common/bg-stars-2560.jpg) repeat;
    color           : #FFFFFF;

    --wc-split-gutter-color            : #404040;
    --warp-view-pagination-bg-color    : #343a40 !important;
    --warp-view-pagination-border-color: #6c757d;
    --warp-view-datagrid-odd-bg-color  : rgba(255, 255, 255, .05);
    --warp-view-datagrid-odd-color     : #FFFFFF;
    --warp-view-datagrid-even-bg-color : #212529;
    --warp-view-datagrid-even-color    : #FFFFFF;
    --warp-view-font-color             : #FFFFFF;
    --warp-view-chart-label-color      : #FFFFFF;
    --gts-stack-font-color             : #FFFFFF;
    --warp-view-resize-handle-color    : #111111;
    --warp-view-chart-legend-bg        : #000;
    --gts-labelvalue-font-color        : #ccc;
    --gts-separator-font-color         : #FFFFFF;
    --gts-labelname-font-color         : rgb(105, 223, 184);
    --gts-classname-font-color         : rgb(126, 189, 245);
    --warp-view-chart-legend-color     : #FFFFFF;
    --wc-tab-header-color              : #FFFFFF;
    --wc-tab-header-selected-color     : #404040;
    --warp-view-tile-background        : #3A3C46;
}

.discovery-dashboard {
    color: transparent;
}

Custom CSS

You can also use customStyles option's property to skin tiles. Here is a dark theme:

'options' {
  'scheme' 'CHARTANA'
  'customStyles' {
    '.discovery-tile'
    <'
        background-color: #3A3C4622;
        border-radius: 50px;
    '>
    
    '.discovery-dashboard-main' 
    <'
        font-size       : 12px;
        line-height     : 1.52;
        background: #404040 !important;
        color           : #FFFFFF;

        --wc-split-gutter-color            : #404040;
        --warp-view-pagination-bg-color    : #343a40 !important;
        --warp-view-pagination-border-color: #6c757d;
        --warp-view-datagrid-odd-bg-color  : rgba(255, 255, 255, .05);
        --warp-view-datagrid-odd-color     : #FFFFFF;
        --warp-view-datagrid-even-bg-color : #212529;
        --warp-view-datagrid-even-color    : #FFFFFF;
        --warp-view-font-color             : #FFFFFF;
        --warp-view-chart-label-color      : #FFFFFF;
        --gts-stack-font-color             : #FFFFFF;
        --warp-view-resize-handle-color    : #111111;
        --warp-view-chart-legend-bg        : #000;
        --gts-labelvalue-font-color        : #ccc;
        --gts-separator-font-color         : #FFFFFF;
        --gts-labelname-font-color         : rgb(105, 223, 184);
        --gts-classname-font-color         : rgb(126, 189, 245);
        --warp-view-chart-legend-color     : #FFFFFF;
        --wc-tab-header-color              : #FFFFFF;
        --wc-tab-header-selected-color     : #404040;
    '>
  }
}

Next step: Cookbook