index.scss

.program {
  width: 100%;
  background-color: #1f1f24;
  padding-top: 12px;

  .ace-dracula {
    background: rgba(31, 31, 36, 1);

    .ace_keyword {
      color: rgba(0, 153, 255, 1);
    }

    .ace_gutter {
      background: transparent;
    }

    .ace_identifier {
      color: rgba(0, 207, 230, 1);
    }

    .ace_string {
      color: rgba(219, 88, 131, 1);
    }

    .ace_marker-layer .ace_active-line {
      background: rgba(207, 219, 229, .1);
    }
  }

  .ace_scrollbar {

    &.ace_scrollbar-v::-webkit-scrollbar {
      width: 6px;
      background: transparent;
    }

    &-v::-webkit-scrollbar-thumb {
      height: 50px;
      background: rgba(207, 219, 229, .1);
      opacity: 0.1;
      border-radius: 3px;
    }

    &.ace_scrollbar-h::-webkit-scrollbar {
      height: 6px;
      background: transparent;
    }

    &-h::-webkit-scrollbar-thumb {
      width: 8px;
      background: rgba(207, 219, 229, .1);
      border-radius: 3px;
    }
  }

  .ace_dark.ace_editor.ace_autocomplete {
    background: rgba(35, 35, 41, 1);
    border-radius: 4px;
  }

  .ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
    background: rgba(0, 153, 255, .1);
  }

  .ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_line-hover {
    background: rgba(0, 153, 255, .1);
    border: none;
  }

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

  .ace-dracula {
    .ace_gutter {
      background: transparent;
    }

    .ace_gutter-active-line {
      background: rgba(207, 219, 229, .1);
    }
  }
}