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>