@adaptabletools/adaptable-cjs/themes/dark.css

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

@layer adaptable.theme {
  .ab--theme-dark {
    --ab-theme-loaded: dark;

    --ab-cmp-input--disabled__background: #232323; /* #b6b7b8 */

    --ab-color-defaultbackground: #3e444c;
    --ab-color-text-on-defaultbackground: #e2e2e2;

    --ab-color-primary: #262d2f;
    --ab-color-primarylight: #3d3e3f;
    --ab-color-primarydark: #1c2021;
    --ab-color-text-on-primary: #e2e2e2; /* F2F2F2 */

    --ab-color-shadow: rgb(255 255 255 / 0.45);
    --ab-cmp-modal-backdrop__background: rgba(255, 255, 255, 0.2);

    --ab-dashboard__border: #555;
    --ab-cmp-dropdownbutton-list-separator__border: 1px solid #555;

    --ab-gridheader--filtered__background: var(--ab-color-defaultbackground);

    --ab-cmp-checkbox__border-color: var(--ab-color-text-on-primary);
    --ab-cmp-checkbox--checked__border-color: var(--ab-color-accent);
  }

    .ab--theme-dark input.ab-Input[type='number']::-webkit-outer-spin-button,.ab--theme-dark input.ab-Input[type='number']::-webkit-inner-spin-button {
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="4 0 18 18" version="1.1"><path fill="%23f7f7f7" d="M7 10l5 5 5-5z" transform="translate(0, 2)"/><path fill="%23f7f7f7" d="M7 14l5-5 5 5z" transform="translate(0, -6)"/></svg>')
        no-repeat center center;
    }

  /*
The following are only redefined here so that the DARK theme in Storybook
can be previewed correctly as that relies on an element (not the document element)
to have the class ab--theme-dark.

For our production release those are not needed and could be removed
as our dark theme is anyways applied on the document element.

*/
  .ab--theme-dark {
    --ab-color-inputcolor: var(--ab-color-text-on-primary);
    --ab-cmp-input__color: var(--ab-color-inputcolor);
    --ab-cmp-input__background: var(--ab-color-defaultbackground);
    --ab-cmp-input--disabled__background: var(--ab-color-primarylight);
    --ab-cmp-field-wrap__background: var(--ab-color-defaultbackground);
  }
}