@visualjs/grid/dist/themes/default-dark.css

JavaScript Data Table

.v-grid-default-dark-theme {
    /* custom variables */

    /* global */
    --primary-color: #0091ea;
    --border-color: #5c5c5c;
    --border-radius: none;
    --default-font-size: 12px;
    --foreground-color: rgba(245, 245, 245, 0.9);
    --background-color: #252c2f;
    --loading-background: rgba(44, 52, 54, 0.8);
    --loading-forground: #0091ea;
    /* headers */
    --header-background-color: #1c1c1c;
    --header-foreground-color: rgba(245, 245, 245, 0.64);
    --header-resizer-active-color: var(--primary-color);
    /* columns */
    --column-pinned-right-shadow: rgba(255, 255, 255, 0.1) -4px 0px 2px;
    --column-pinned-left-shadow: rgba(255, 255, 255, 0.1) 4px 0px 2px;
    /* rows */
    --row-background: var(--background-color);
    --row-stripe-background: #2c3436;
    --row-hover-background: #414c4e;
    --row-select-background: #025880;
    --row-drag-indicator-background: var(--primary-color);
    --row-drag-indicator-opacity: 0.2;
    --rows-pinned-top-shadow: rgba(255, 255, 255, 0.1) 0px 4px 2px;
    --rows-pinned-bottom-shadow: rgba(255, 255, 255, 0.1) 0px -4px 2px;
    /* cells */
    --cell-padding: 0 12px;
    --cell-selected-background: rgba(0, 145, 234, 0.2);
    --cell-selected-boundary-color: var(--primary-color);
    --cell-filling-background: rgba(245, 223, 25, 0.2);
    --cell-filling-boundary-color: #f8b013;
    --cell-editing-popup-background: #fafafa;
    --cell-editing-popup-border: none;
    /* menus */
    --cell-menu-padding: 4px 0;
    /* z-index */
    --pinned-z-index: 1;
    --pinned-body-z-index: 2;
    --horizontal-scroll-z-index: 1;
    --cell-editing-z-index: 2;
    --menu-z-index: 4;
    --column-resizer-z-index: 2;
    --loading-z-index: 9;

    /* global styles */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
        sans-serif;

    color-scheme: dark;
}

.v-grid-default-dark-theme [class^="v-grid-"],
.v-grid-default-dark-theme [class^="v-grid-"]:focus,
.v-grid-default-dark-theme [class^="v-grid-"]:after,
.v-grid-default-dark-theme [class^="v-grid-"]:before {
    box-sizing: border-box;
    outline: none;
}

.v-grid-default-dark-theme [class^="v-grid-"]::selection {
    background-color: rgba(0, 145, 234, 0.2);
}