Dark Theme

Dark Theme

DataGridXL themes are simple Javascript objects. No need to hassle with complex CSS selectors. Pass the theme option to the DataGridXL instance and behold this pretty dark theme!

Code

<style>
#grid {
  height: 400px;
}
</style>

<div id="grid"></div>

<script src="https://code.datagridxl.com/datagridxl2.js"></script>
<script>
var dark_theme = {

  "component"                 : "#15202b",
  
  // bottombar & topbar
  "button"                    : "#2f3b47",
  "button-icon"               : "#8899a6",
  "input"                     : "#15202b",
  "input|text"                : "#ffffff",
  "input|border"              : "#000000",
  "input:focus|border"        : "#0078ff",
  "input-info"                : "#8899a6",

  // contextmenu
  "contextmenu"               : "#15202b",
  "contextmenu|text"          : "#ffffff",
  "contextmenu-item:highlight": "#192734",
  "contextmenu-item-shortcut" : "#8899a6",


  "blanksheet"                : "#15202b",
  "sheet"                     : "#192734",
  "sheet|text"                : "#ffffff",

  // scrollbar
  "scrollbar"                 : "#000000",
  "scrollbar|border"          : "#444444",

  // grid lines
  "gridline"                  : "#ffffff",
  "gridline-tip"              : "#ffffff",
  "gridline|opacity"          : 0.10,

  // headers
  "header"                    : "#15202b",
  "header|text"               : "#ffffff",
  "header:highlight"          : "#192734",
  "header:selected"           : "#2a4157",
  "header:selected|text"      : "#ffffff",
  "header-icon"               : "#ecf5f4",

  // action ranges
  "cellrange:cut"             : "#0078ff",
  "cellrange:copy"            : "#0078ff",
  "cellrange:fill"            : "#ffffff",

  // selection
  "cellcursor"                : "#0078ff",
  "cellrange:selected"        : "#0078ff",
  "cellrange:selected|border" : "#0078ff",
  "cellrange:selected|opacity": 0.10,

  // fill handle
  "fillhandle"                : "#0078ff",

  // cell editor
  "celleditor"                : "#0078ff",

  // search
  "searchcursor"              : "#ecf5f4",
  "cell+found"                : "#abc5dc",
  "cell+found|opacity"        : 0.25,

  // freezeline
  "freezeline"                : "#2a4157",
  "freezeline-tip"            : "#2f5478",
  "freezelineplaceholder"     : "#2f5478",

  // move action
  "move?ghost"                : "#ffffff",
  "move?ghost|opacity"        : 0.1,
  "move?guide"                : "#8899a6",
  "move?guide|opacity"        : 0.5,

  // freeze action
  "freeze?hint"                : "#0078ff",
  "freeze?ghost"               : "#ffffff",
  "freeze?ghost|opacity"       : 0.1,
  "freeze?guide"               : "#8899a6",
  "freeze?guide|opacity"       : 0.5,

  // resize action
  "resize?hint"                : "#0078ff",
  "resize?guide"               : "#0078ff",
  "resize?guide|opacity"       : 1,

  // show action
  "show?hint"                  : "#15202b",
  "show?hint-icon"             : "#ffffff",
  "show?hint|border"           : "#0078ff"

};

var grid = new DataGridXL("grid", {
  theme: dark_theme
});
</script>

Leave email to receive latest updates!