antares/src/renderer/scss/themes/dark-theme.scss

/* stylelint-disable selector-class-pattern */
/* stylelint-disable function-no-unknown */
.theme-dark {
  color: $body-font-color-dark;
  background: $body-bg-dark;

  ::-webkit-scrollbar-track {
    background: $bg-color-light-dark;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba($color: #fff, $alpha: 50%);

    &:hover {
      background: rgba($color: #fff, $alpha: 100%);
    }
  }

  :disabled {
    .file-uploader {
      background-color: #151515;
    }
  }

  option,
  optgroup {
    background-color: $bg-color-gray;
  }

  /* Override Spectre.css */
  .menu {
    background: $bg-color-light-dark;

    .menu-item a {
      &:hover {
        color: $primary-color;
        background: $bg-color-gray;
      }
    }
  }

  .btn {
    &.btn-link {
      color: rgba($body-font-color-dark, 0.8);

      &:hover {
        color: $body-font-color-dark;
      }
    }

    &.btn-gray {
      color: #fff;
      background: $bg-color-gray;

      &:hover {
        background: $bg-color-dark;
      }
    }

    &.btn-dark {
      color: #fff;
      background: $bg-color-light-dark;
      border-color: $bg-color-light-dark;

      &:hover {
        background: $bg-color-gray;
      }

      &.active {
        background-color: $primary-color;
      }
    }

    &.btn-clear {
      &:hover {
        background: rgba($light-color, 20%);
      }
    }
  }

  .modal {
    .modal-overlay,
    &.active .modal-overlay {
      background: rgb(255 255 255 / 15%);
    }

    .modal-container,
    .modal-sm .modal-container {
      box-shadow: 0 0 1px 0 #000;
      background: $bg-color-dark;

      .modal-header {
        background: $bg-color-gray;
        color: #fff;
      }
    }
  }

  .tab {
    border-color: #272727;
  }

  .form-select,
  .form-input,
  .form-select:not([multiple], [size]),
  .form-checkbox .form-icon,
  .form-radio .form-icon {
    border-color: $bg-color-light-dark;
    background-color: $bg-color-gray;
    color: $body-font-color-dark;
  }

  .form-select:not([multiple], [size]) {
    background-color: $bg-color-gray !important;
  }

  .form-input.is-error,
  .form-select.is-error {
    background-color: $bg-color-gray;
  }

  .form-input:not(:placeholder-shown):invalid:focus {
    background: $bg-color-gray;
  }

  .form-select:not([multiple], [size]):focus {
    border-color: $primary-color;
  }

  .select {
    &__list-wrapper {
      border-color: $bg-color-gray;
      background-color: $bg-color-light-dark;
    }

    &__group {
      background: rgba($bg-color-gray, 0.65);
      color: rgba($bg-color-light-gray, 0.7);
    }
  }

  .form-input[readonly] {
    background-color: $bg-color-dark;
    cursor: default;
  }

  .has-error .form-input {
    background: $bg-color-dark;
  }

  .input-group {
    .input-group-addon {
      border-color: #3f3f3f;
      background: $bg-color-dark;
    }
  }

  .empty {
    color: $body-font-color-dark;
    background: transparent;
  }

  .divider {
    border-top: 0.05rem solid rgba($body-font-color-dark, 0.1);
  }

  .form-switch .form-icon::before {
    background: $bg-color-light-dark;
  }

  code {
    background-color: #111;
    border: 1px solid #444;
    color: rgba($body-font-color-dark, 0.7);
  }

  /* Antares */
  .workspace {
    .workspace-explorebar {
      background: $bg-color-gray;
      box-shadow: 0 0 1px 0 #000;

      .workspace-explorebar-database {
        .database-name {
          background: $bg-color-gray;
        }

        .database-name,
        .misc-name {
          &:hover {
            color: $body-font-color-dark;
            background: $bg-color-light-dark;
          }
        }

        a.table-name {
          &:hover {
            color: inherit;
            background: inherit;
          }
        }

        .menu-item {
          &:hover,
          &.selected {
            color: $body-font-color-dark;
            background: rgba($color: #fff, $alpha: 5%);
          }
        }
      }
    }

    .workspace-tabs {
      .tab-block {
        background: $bg-color-light-dark;

        .tab-item {
          background: $bg-color-light-dark;

          > a {
            color: $body-font-color-dark;
          }

          &.tools-dropdown {
            background-color: $bg-color-light-dark;
          }
        }

        .workspace-query-runner .workspace-query-runner-footer .workspace-query-buttons .btn {
          color: $body-font-color-dark;
        }
      }
    }
  }

  .workspace-query-results {
    .table {
      .th {
        border-color: darken($bg-color-light-gray, 80%);
        background-color: $body-bg-dark;
      }

      .tr {
        background-color: darken($bg-color-light-gray, 80%);

        .td:first-child {
          border-left: 2px solid $body-bg-dark;
        }

        .td {
          border-color: $body-bg-dark;

          &:focus,
          &.selected {
            box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
            background-color: rgba($color: #000, $alpha: 30%);
          }

          .editable-field {
            box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
            background-color: rgba($color: #000, $alpha: 30%);
          }
        }
      }
    }
  }

  .connection-panel {
    .panel {
      background: rgba($bg-color-light-dark, 50%);
    }
  }

  .connection-block {
    &:hover {
      background: $bg-color-light-dark;
    }
  }

  .bg-checkered {
    background-image:
      linear-gradient(to right, rgb(192 192 192 / 75%), rgb(192 192 192 / 75%)),
      linear-gradient(to right, black 50%, white 50%),
      linear-gradient(to bottom, black 50%, white 50%);
    background-blend-mode: normal, difference, normal;
    background-size: 2em 2em;
  }

  .context {
    color: $body-font-color-dark;

    .context-container {
      box-shadow: 0 0 2px 0 #000;
      background: #1d1d1d;

      .context-element {
        .context-submenu {
          background: #1d1d1d;
          box-shadow: 0 0 2px 0 #000;
        }

        &:hover {
          background: rgba($light-color, 15%);
        }
      }
    }
  }

  .editor-wrapper {
    border-bottom: 1px solid #444;
  }

  .file-uploader {
    border: 0.05rem solid $bg-color-light-dark;
    background-color: $bg-color-gray;

    .file-uploader-message {
      border-right: 0.05rem solid $bg-color-light-dark;
      background-color: $bg-color-dark;
    }
  }

  .query-console {
    border-top: 1px solid #444;
    background-color: $bg-color-dark;

    .query-console-log {
      &:hover,
      &:focus {
        background: $bg-color-gray;
      }
    }
  }

  .tile {
    transition: background 0.2s;

    &:focus {
      background: rgba($bg-color-light-dark, 60%);
    }

    &:hover {
      background: $bg-color-light-dark;
    }

    &.selected-element {
      background: $bg-color-light-dark;
    }
  }

  .editor-col {
    border-left: 0.05rem solid rgba($bg-color-light-dark, 60%);
  }

  .table {
    .td,
    .th {
      border-bottom: $border-width solid $border-color;
    }

    &,
    &.table-striped {
      .tbody {
        .tr {
          &.selected {
            background: #333 !important;
          }

          &.active {
            background: $bg-color-dark;
          }
        }
      }
    }

    &.table-hover {
      .tbody {
        .tr {
          &:hover {
            background: #151515;
          }
        }
      }
    }

    &.table-striped {
      .tbody {
        .tr:nth-of-type(odd) {
          background: $bg-color;
        }
      }
    }
  }

  #titlebar {
    background: $bg-color-light-dark;
    box-shadow: 0 0 1px 0 #000;

    .titlebar-elements {
      .titlebar-element {
        &:hover {
          opacity: 1;
          background: rgba($color: #fff, $alpha: 10%);
        }

        &.close-button:hover {
          background: red;
        }
      }
    }
  }

  #settingbar {
    background: $bg-color-light-dark;
    box-shadow: 0 0 1px 0 #000;

    .settingbar-top-elements {
      overflow: hidden overlay;
      max-height: calc((100vh - 3.5rem) - #{$excluding-size});
    }

    .settingbar-bottom-elements {
      background: $bg-color-light-dark;
    }

    .settingbar-elements {
      list-style: none;
      text-align: center;
      padding: 0;
      margin: 0;

      .settingbar-element {
        .settingbar-element-icon {
          &.badge-update::after {
            background: $primary-color;
          }
        }
      }
    }
  }

  .ex-tooltip {
    .ex-tooltip-content {
      background: rgb(48 55 66 / 95%);
      color: #fff;
    }
  }

  #footer {
    background: $primary-color;
    box-shadow: 0 0 1px 0 #000;

    .footer-elements {
      .footer-element {
        &.footer-link {
          &:hover {
            background: rgba($color: #fff, $alpha: 10%);
          }
        }
      }
    }
  }
}

.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
  background-color: #c9561a99;
}

.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_line-hover {
  background-color: #c9571a33;
  border: none;
}

.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight {
  color: #e0d00c;
}