Angular UI Grid - Dark them

Question

有没有人为Angular UI网格开发过黑暗主题？

一个会在靴子中与'石板'主题相配的吗？

http://bootswatch.com/slate/

Answer 1

我建立了一些超越CSS这一点。如果该网站有深色主题背景，请将“黑暗”类添加到主体中，否则将是较轻的主题。

我用rgba颜色（黑色或白色）替换了任何十六进制颜色，所以桌子在任何背景颜色下看起来都不错。还对菜单和按钮进行了一些改进。您应该将sass变量$ builder-highlight-color设置为某个值，或者将其替换为您想要的任何行所选的颜色。

这里是应该放在原始UI网格CSS之后的覆盖CSS。备注

.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; 
    }