Theming

Color Schemes

Available color schemes are:

COHESIVE
COHESIVE_2
BELIZE
VIRIDIS
MAGMA
INFERNO
PLASMA
YL_OR_RD
YL_GN_BU
BU_GN
WARP10
NINETEEN_EIGHTY_FOUR
ATLANTIS
DO_ANDROIDS_DREAM
DELOREAN
CTHULHU
ECTOPLASM
T_MAX_400_FILM
MATRIX
CHARTANA
CHALK
VINTAGE

Usage

{
  'options' { 'scheme' 'CHALK' }
  'tiles' [
    {
        'type' 'area'
        'x' 0 'y' 0 'w' 12 'h' 1
        'macro' <% 20 @senx/rand/RANDOMWALK %>
    }
  ]
}
{ 'options' { 'scheme' 'CHALK' } 'tiles' [ { 'type' 'area' 'x' 0 'y' 0 'w' 12 'h' 1 'macro' <% 20 @senx/rand/RANDOMWALK %> } ] }

Custom color scheme

You can also define your own color scheme:

{
  'options' { 'scheme' [ 'pink' '#7FFFD4' 'navy' '#8A2BE2' ] }
  'tiles' [
    {
        'type' 'area'
        'x' 0 'y' 0 'w' 12 'h' 1
        'macro' <% 0 3 <% 20 @senx/rand/RANDOMWALK %> F FOR 4 ->LIST %>
    }
  ]
}
{ 'options' { 'scheme' [ 'pink' '#7FFFD4' 'navy' '#8A2BE2' ] } 'tiles' [ { 'type' 'area' 'x' 0 'y' 0 'w' 12 'h' 1 'macro' <% 0 3 <% 20 @senx/rand/RANDOMWALK %> F FOR 4 ->LIST %> } ] }

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;
    '>
  }
}

Transparent tiles

{
  'title' 'Discovery Dashboard'
  'type' 'flex'
  'options' {
      'customStyles' {
        '.discovery-flex-main, .discovery-dashboard-main'
        <'
          --warp-view-tile-border: none;
          --warp-view-tile-shadow: none;
          --warp-view-tile-border-radius: 0;
          --warp-view-dashboard-background: transparent;
          --warp-view-tile-background: transparent !important;
        '>
        '.discovery-tile'
        <'
          background: transparent !important;
        '>
      }
  }
  'tiles' [
      {
      'type' 'display'
      'x' 0 'y' 0 'w' 4 'h' 3
      'macro' <% 42 %>
    }    
  ]
}
{ 'title' 'Discovery Dashboard' 'type' 'flex' 'options' { 'customStyles' { '.discovery-flex-main, .discovery-dashboard-main' <' --warp-view-tile-border: none; --warp-view-tile-shadow: none; --warp-view-tile-border-radius: 0; --warp-view-dashboard-background: transparent; --warp-view-tile-background: transparent !important; '> '.discovery-tile' <' background: transparent !important; '> } } 'tiles' [ { 'type' 'display' 'x' 0 'y' 0 'w' 4 'h' 3 'macro' <% 42 %> } ] }

Custom style per tile

{
  'title' 'test'
  'tiles' [
    {
      'type' 'display'
      'x' 0 'y' 0 'w' 4 'h' 1
      'options' {
        'customStyles' {
          '.discovery-tile '
          <'
           --warp-view-bg-color: #FAFBFF linear-gradient(40deg, #3BBC7D, #1D434C);
           --warp-view-font-color: white;
          '>
        }
      }
      'data' 'A'
    }
    {
      'type' 'display'
      'x' 4 'y' 0 'w' 4 'h' 1
      'options' {
        'customStyles' {
          '.discovery-tile'
          <'
           background: radial-gradient(circle, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%) !important;
            --warp-view-font-color: red;
          '>
        }
      }
      'data' 'B'
    }
  ]
}
{ 'title' 'test' 'tiles' [ { 'type' 'display' 'x' 0 'y' 0 'w' 4 'h' 1 'options' { 'customStyles' { '.discovery-tile ' <' --warp-view-bg-color: #FAFBFF linear-gradient(40deg, #3BBC7D, #1D434C); --warp-view-font-color: white; '> } } 'data' 'A' } { 'type' 'display' 'x' 4 'y' 0 'w' 4 'h' 1 'options' { 'customStyles' { '.discovery-tile' <' background: radial-gradient(circle, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%) !important; --warp-view-font-color: red; '> } } 'data' 'B' } ] }

CSS variables list

  • --warp-view-active-input-bg-color
  • --warp-view-autocomplete-hover-background-color
  • --warp-view-bar-color
  • --warp-view-bg-color
  • --warp-view-button-bg-color
  • --warp-view-button-border-color
  • --warp-view-button-border-radius
  • --warp-view-button-font-size
  • --warp-view-button-inactive-bg-color
  • --warp-view-button-inactive-label-color
  • --warp-view-button-label-color
  • --warp-view-button-padding
  • --warp-view-button-secondary-bg-color
  • --warp-view-button-secondary-border-color
  • --warp-view-button-secondary-label-color
  • --warp-view-button-width
  • --warp-view-chart-grid-color
  • --warp-view-chart-label-color
  • --warp-view-chip-background-color
  • --warp-view-chip-close-icon-fill
  • --warp-view-chip-hover-fill
  • --warp-view-dashboard-background
  • --warp-view-dashboard-gap
  • --warp-view-datagrid-cell-padding
  • --warp-view-datagrid-even-bg-color
  • --warp-view-datagrid-even-color
  • --warp-view-datagrid-odd-bg-color
  • --warp-view-datagrid-odd-color
  • --warp-view-font-color
  • --warp-view-font-size
  • --warp-view-handle-bg-color
  • --warp-view-input-bg-color
  • --warp-view-input-border-color
  • --warp-view-input-border-radius
  • --warp-view-input-font-size
  • --warp-view-input-label-color
  • --warp-view-modal-bg-color
  • --warp-view-pagination-active-bg-color
  • --warp-view-pagination-active-border-color
  • --warp-view-pagination-active-color
  • --warp-view-pagination-bg-color
  • --warp-view-pagination-border-color
  • --warp-view-pagination-disabled-color
  • --warp-view-pagination-hover-bg-color
  • --warp-view-pagination-hover-border-color
  • --warp-view-pagination-hover-color
  • --warp-view-progress-bg-color
  • --warp-view-progress-size
  • --warp-view-spinner-color
  • --warp-view-tile-background
  • --warp-view-tile-border
  • --warp-view-tile-border-radius
  • --warp-view-tile-shadow
  • --warp-view-tooltip-bg-color
  • --warp-view-tooltip-border-color
  • --warp-view-tooltip-label-color

Found an issue on this page or something missing?

Tell us onSlack iconThe Lounge, the Warp 10 Community Slack.