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 %>
}
]
}
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 %>
}
]
}
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 %>
}
]
}
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'
}
]
}
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 onThe Lounge, the Warp 10 Community Slack.