diff --git a/packages/perspective-jupyterlab/src/ts/index.ts b/packages/perspective-jupyterlab/src/ts/index.ts index 2d98de19df..b47d964456 100644 --- a/packages/perspective-jupyterlab/src/ts/index.ts +++ b/packages/perspective-jupyterlab/src/ts/index.ts @@ -58,7 +58,7 @@ export class RenderedPSP extends Widget implements IRenderMime.IRenderer { } else if (key === 'colorscheme'){ if(layout[key]==='dark'){ this.node.classList.add(PSP_CONTAINER_CLASS_DARK) - psp.addEventListener('loaded', ()=>{ + psp.addEventListener('perspective-view-update', ()=>{ // Call once rendered let grid = this.node.querySelector('perspective-hypergrid'); if (grid){ @@ -68,6 +68,14 @@ export class RenderedPSP extends Widget implements IRenderMime.IRenderer { rowProperties: [ { color: '#eee', backgroundColor: '#2a2c2f' }, ], + hoverRowHighlight: { + enabled: true, + backgroundColor: '#555' + }, + hoverCellHighlight: { + enabled: true, + backgroundColor: '#444' + }, }); } }); diff --git a/packages/perspective-viewer-hypergrid/src/js/hypergrid.js b/packages/perspective-viewer-hypergrid/src/js/hypergrid.js index 3c5ad0bede..1b24f19e22 100644 --- a/packages/perspective-viewer-hypergrid/src/js/hypergrid.js +++ b/packages/perspective-viewer-hypergrid/src/js/hypergrid.js @@ -55,6 +55,14 @@ const base_grid_properties = { halign: 'left', headerTextWrapping: false, hoverColumnHighlight: { enabled: false }, + hoverRowHighlight: { + enabled: true, + backgroundColor: '#555' + }, + hoverCellHighlight: { + enabled: true, + backgroundColor: '#333' + }, noDataMessage: '', minimumColumnWidth: 50, multipleSelections: false, @@ -75,7 +83,7 @@ const base_grid_properties = { treeHeaderForegroundSelectionFont: '12px "Arial", Helvetica, sans-serif', useBitBlit: false, vScrollbarClassPrefix: '', - voffset: 0 + voffset: 0, }; const light_theme_overrides = { @@ -175,7 +183,9 @@ bindTemplate(TEMPLATE)(class HypergridElement extends HTMLElement { const grid_properties = generateGridProperties(Hypergrid._default_properties || light_theme_overrides); const style = window.getComputedStyle(this, null); + const header = window.getComputedStyle(this.querySelector('th'), null); + const style_hover = window.getComputedStyle(this.querySelector('td'), null); grid_properties['showRowNumbers'] = grid_properties['showCheckboxes'] || grid_properties['showRowNumbers']; grid_properties['treeHeaderBackgroundColor'] = grid_properties['backgroundColor'] = style.getPropertyValue('background-color'); @@ -183,7 +193,10 @@ bindTemplate(TEMPLATE)(class HypergridElement extends HTMLElement { grid_properties['columnHeaderBackgroundColor'] = header.getPropertyValue('background-color'); grid_properties['columnHeaderSeparatorColor'] = header.getPropertyValue('border-color'); grid_properties['columnHeaderColor'] = header.getPropertyValue('color'); - + + grid_properties['hoverRowHighlight']['backgroundColor'] = style_hover.getPropertyValue('background-color'); + grid_properties['hoverCellHighlight']['backgroundColor'] = style_hover.getPropertyValue('color'); + this.grid.addProperties(grid_properties); // Add tree cell renderer diff --git a/packages/perspective-viewer/src/less/material.dark.less b/packages/perspective-viewer/src/less/material.dark.less index 5a8949da54..fe6a43ea92 100644 --- a/packages/perspective-viewer/src/less/material.dark.less +++ b/packages/perspective-viewer/src/less/material.dark.less @@ -219,7 +219,6 @@ perspective-viewer #app { } perspective-row { - #name { color: #666; } @@ -261,6 +260,9 @@ perspective-viewer #app { border-color: @coolgrey700; background-color: @coolgrey700; } + td { + color: #444; + background-color: #555; + } } - }