Overleaf/services/web/frontend/stylesheets/pages/editor/command-palette.scss

:root {
  --command-palette-color-scheme: dark;
  --command-palette-selected-bg: var(--green-70);
  --command-palette-selected-color: var(--green-10);
  --command-palette-border-color: var(--border-primary);
}

@include theme('light') {
  --command-palette-color-scheme: light;
  --command-palette-selected-bg: var(--bg-accent-03);
  --command-palette-selected-color: var(--green-70);
  --command-palette-border-color: var(--border-divider);
}

.command-palette {
  color-scheme: var(--command-palette-color-scheme);
  pointer-events: none;

  .modal-dialog {
    pointer-events: auto;
  }

  .modal-body {
    padding: 0;
  }

  .modal-content {
    background-color: var(--bg-primary-themed);
    border: 1px solid var(--command-palette-border-color);
  }

  .command-palette-input {
    width: 100%;
    padding: var(--spacing-05);
    border: 0;
    border-bottom: 1px solid var(--border-divider-themed);
    background: transparent;
    color: var(--content-primary-themed);
    font-size: var(--font-size-04);
    outline: none;

    &::placeholder {
      color: var(--content-placeholder-themed);
    }
  }

  .command-palette-results {
    list-style: none;
    margin: 0;
    padding: var(--spacing-02);
    max-height: 50vh;
    overflow-y: auto;
    color: var(--content-primary-themed);

    &:empty {
      display: none;
    }
  }

  .command-palette-result {
    margin: 0;

    button {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--spacing-01);
      width: 100%;
      padding: var(--spacing-03) var(--spacing-04);
      border: 0;
      border-radius: var(--border-radius-base);
      background: transparent;
      color: var(--content-primary-themed);
      text-align: left;
      cursor: pointer;

      &:focus-visible {
        outline: none;
      }
    }

    &.command-palette-result-selected button {
      background-color: var(--command-palette-selected-bg);
      color: var(--command-palette-selected-color);
    }

    &.command-palette-result-selected .command-palette-result-description {
      color: var(--command-palette-selected-color);
    }
  }

  .command-palette-result-title {
    color: var(--content-primary-themed);
    font-size: var(--font-size-03);
    font-weight: 500;
    line-height: 1.2;
  }

  .command-palette-result-description {
    font-size: var(--font-size-02);
    color: var(--content-secondary-themed);
    line-height: 1.2;
  }
}