Angular UI Grid - Dark them

Question

has anyone developed a dark theme for Angular ui grid?

One which will go along with 'Slate' theme in bootswatch?

score 0 · Answer 1 · answered May 06 '17 at 21:01

I built some override CSS for this. If the site has a dark theme background, add the 'dark' class to the body otherwise it will be the lighter theme.

I replaced any hex colors with rgba colors (either black or white) so the table will look nice with any background color. Also some improvements to menus and buttons. You should either set the sass variable $builder-highlight-color to something or replace it with whatever selected color you want for the rows.

Here is the override CSS which should be placed after the original ui-grid CSS. Note

.ui-grid-header {border-bottom: none}
.ui-grid-top-panel {background: rgba(0,0,0,0.1)}
.dark .ui-grid-top-panel {background: rgba(255,255,255,0.1)}

.ui-grid-row:nth-child(odd) .ui-grid-cell {background-color: transparent}
.ui-grid-row:nth-child(odd):hover .ui-grid-cell {background-color: rgba(0,0,0,0.03)} 
.dark .ui-grid-row:nth-child(odd):hover .ui-grid-cell {background-color: rgba(255,255,255,0.03)} 

.ui-grid-row:nth-child(even) .ui-grid-cell {background-color: rgba(0,0,0,0.07)}
.dark .ui-grid-row:nth-child(even) .ui-grid-cell {background-color: rgba(255,255,255,0.07)}
.dark .ui-grid-row:nth-child(even):hover .ui-grid-cell {background-color: rgba(255,255,255,0.1)} 

.ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-header-cell:last-child {border-right-color: rgba(0,0,0,0.2)}
.dark .ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-header-cell:last-child {border-right-color: rgba(255,255,255,0.2)}

.ui-grid-cell {border-color: rgba(0,0,0,0.2)}
.dark .ui-grid-cell {border-color: rgba(255,255,255,0.2)}

.ui-grid-header-cell {border-color: rgba(0,0,0,0.2)}
.dark .ui-grid-header-cell {border-color: rgba(255,255,255,0.2)}

.ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-cell:last-child {border-right-color: rgba(0,0,0,0.2)}
.dark .ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-cell:last-child {border-right-color: rgba(255,255,255,0.2)}

.ui-grid-row .ui-grid-cell.ui-grid-row-header-cell {border-bottom-color: rgba(0,0,0,0.2)}
.dark .ui-grid-row .ui-grid-cell.ui-grid-row-header-cell {border-bottom-color: rgba(255,255,255,0.2)}

input[type="text"].ui-grid-filter-input {border-color: rgba(0,0,0,0.2); border-radius: 3px;}
.dark input[type="text"].ui-grid-filter-input {border-color: rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.9)}

.dark input[type="text"].ui-grid-filter-input::placeholder {color: rgba(255,255,255,0.35)}

.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid,
.ui-grid-menu .ui-grid-menu-inner {border: none; padding-bottom: 10px;}
.ui-grid-menu .ui-grid-menu-inner ul li:not(:last-child)>button {border-bottom: none}

.ui-grid-menu-button:hover {border-color: rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.07);}
.dark .ui-grid-menu-button:hover {border-color: rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.07);}

.ui-grid-menu .ui-grid-menu-inner {background: rgb(255,255,255)}
.dark .ui-grid-menu .ui-grid-menu-inner {background: rgb(0,0,0)}


.ui-grid-grid-footer {padding: 5px; background-color: rgba(0,0,0,0.08); border-top: solid 1px rgba(0,0,0,0.2);}
.ui-grid-footer-info {height: auto !important; color: rgba(0,0,0,0.5)}

.dark .ui-grid-grid-footer {background-color: rgba(255,255,255,0.4); border-top: solid 1px rgba(255,255,255,0.7)}
.dark .ui-grid-footer-info {color: rgba(255,255,255,0.5)}

[data-table-responsive] > .grid {
  height: auto !important
}
.grid {min-height: 0px; color: rgba(0,0,0,0.85)}
.dark .grid {color: rgba(255,255,255,0.85)}

.ui-grid-render-container-body,
.ui-grid-render-container {background-color: transparent}




.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell {
  color: #fff;
  background-color: $builder-highlight-color;
} 

.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell.ui-grid-cell-focus,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell.ui-grid-cell-focus {
  outline: 0;
  background-color: $builder-highlight-color;
} 

.ui-grid-row-selected.ui-grid-row:nth-child(odd):hover .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even):hover .ui-grid-cell {
  color: #fff;
  background-color: $builder-highlight-color !important;
}

  .ui-grid {
    position: absolute;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .noHide .ui-grid-icon-angle-down {display: none}
  .ui-grid-filter-container {padding: 4px 5px;}


  input[type="text"].ui-grid-filter-input {
    padding: 3px 0 3px 3px;
    font-weight: normal;
  }

  .ui-grid {border: none;}

  .ui-grid-row {cursor: pointer}
  .ui-grid-row:nth-child(odd):hover .ui-grid-cell {background-color: #f2f9ff; cursor: pointer}
  .ui-grid-row:nth-child(even):hover .ui-grid-cell {background-color: #f2f9ff; cursor: pointer}

  .ui-grid-cell.ui-grid-disable-selection.ui-grid-row-header-cell {
    pointer-events: auto;
  }

  .ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid {
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
    max-height: 1000px;
  }

  .ui-grid-menu-button .ui-grid-icon-cancel {opacity: 0.3;}

  .ui-grid-menu-button .ui-grid-icon-ok {color: green;}

  .ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid li button {
    font-size: 11px;
    padding: 5px 10px;
  }


  .ui-grid-menu-button {
    border-radius: 2px;
    border-color: transparent;
    background-color: transparent;
  }

  .ui-grid-menu-button .ui-grid-icon-container {
    margin-top: 0;
  }

  .ui-grid-menu-close-button {display: none !important}

  [class^="ui-grid-icon"]:before, [class*=" ui-grid-icon"]:before {
    margin-right: 0;
  }

  .ui-grid-menu-button > div {
    padding: 5px 3px 5px 5px;
  }

Angular UI Grid - Dark them

1 Answers1