My CSS tweaks for VSCode's extension Apc Customize UI++

apc-theme.css

:root {
  --color-attribute: #ddb6f2; /* Lavender */
  --background-attribute: rgba(221, 182, 242, 0.2);
  --color-builtin: #f28fad; /* Pink */
  --background-builtin: rgba(242, 143, 173, 0.2);
  --color-class: #96cdfb; /* Sky */
  --background-class: rgba(150, 205, 251, 0.2);
  --color-function: #f8bd96; /* Peach */
  --background-function: rgba(248, 189, 150, 0.2);
  --color-property: #f5c2e7; /* Mauve */
  --background-property: rgba(245, 194, 231, 0.2);
  --color-snippet: #abe9b3; /* Green */
  --background-snippet: rgba(171, 233, 179, 0.2);
  --color-tag: #89dceb; /* Teal */
  --background-tag: rgba(137, 220, 235, 0.2);
  --color-boolean: #f9e2af; /* Yellow */
  --background-boolean: rgba(249, 226, 175, 0.2);
  --color-enum: #f5a97f; /* Orange */
  --background-enum: rgba(245, 169, 127, 0.2);
  --color-event: #f2cdcd; /* Red */
  --background-event: rgba(242, 205, 205, 0.2);
  --color-field: #c9cbff; /* Blue */
  --background-field: rgba(201, 203, 255, 0.2);
  --color-interface: #c3bac6; /* Taupe */
  --background-interface: rgba(195, 186, 198, 0.2);
  --color-key: #fadad1; /* Flamingo */
  --background-key: rgba(250, 218, 209, 0.2);
  --color-namespace: #a4b9ef; /* Periwinkle */
  --background-namespace: rgba(164, 185, 239, 0.2);
  --color-null: #f5e0dc; /* Rosewater */
  --background-null: rgba(245, 224, 220, 0.2);
  --color-number: #f9c2ff; /* Lavender, lighter */
  --background-number: rgba(249, 194, 255, 0.2);
  --color-object: #fadad1; /* Flamingo, lighter */
  --background-object: rgba(250, 218, 209, 0.2);
  --color-operator: #c3bac6; /* Taupe, darker */
  --background-operator: rgba(195, 186, 198, 0.2);
  --color-reference: #f9e2af; /* Yellow, lighter */
  --background-reference: rgba(249, 226, 175, 0.2);
  --color-string: #abe9b3; /* Green, lighter */
  --background-string: rgba(171, 233, 179, 0.2);
  --color-struct: #96cdfb; /* Sky, darker */
  --background-struct: rgba(150, 205, 251, 0.2);
  --color-text: #f28fad; /* Pink, darker */
  --background-text: rgba(242, 143, 173, 0.2);
  --color-type-parameter: #f9e2af; /* Yellow, darker */
  --background-type-parameter: rgba(249, 226, 175, 0.2);
  --color-unit: #c9cbff; /* Blue, lighter */
  --background-unit: rgba(201, 203, 255, 0.2);
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.monaco-editor .suggest-widget {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px 2px 0px 1px; /* top, right, bottom, left */
  background: var(--vscode-editorSuggestWidget-background);
}

.monaco-editor .suggest-widget::before {
  content: "";
  display: block;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    var(--vscode-editorLink-activeForeground) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  height: 500px;
  width: 100px;
  transform: translate(0);
  position: absolute;
  animation: rotate 7s linear forwards infinite;
  z-index: 0;
  top: 50%;
  left: 25%;
  transform-origin: top center;
}

#workbench\.parts\.editor
  .monaco-scrollable-element
  .split-view-container
  .editor-container
  .overflowingContentWidgets
  .editor-widget.suggest-widget
  .tree.custom-list-row
  > div
  > div {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--vscode-editorSuggestWidget-background);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#workbench\.parts\.editor
  .monaco-scrollable-element
  .split-view-container
  .editor-container
  .overflowingContentWidgets
  .editor-widget.suggest-widget
  .tree.custom-list-row
  .monaco-list-rows {
  margin: 2px 243px 0px 2px;
}

#workbench\.parts\.editor
  .content
  .monaco-scrollable-element
  .split-view-container
  .editor-container
  .overflowingContentWidgets
  .editor-widget.suggest-widget
  .message {
  position: relative;
  z-index: 1;
  background: var(--vscode-editorSuggestWidget-background);
  width: 100%;
  height: 100%;
}

.inline-title-bar:not(.activitybar-top):not(.statusbar-top)
  .monaco-workbench:not(.fullscreen)
  .sidebar
  .composite.title
  .title-label {
  display: none;
}

.monaco-workbench .part.sidebar > .title {
  justify-content: flex-end;
}

.composite-bar {
  width: 100%;
}

.editor-actions {
  display: none;
}

.quick-input-widget {
  position: absolute !important;
  top: 200px !important;
  left: 50%;
  border-radius: 10px;
}

.monaco-inputbox {
  border-radius: 6px !important;
}
.monaco-inputbox > .ibwrapper > .input,
.monaco-inputbox > .ibwrapper > .mirror {
  padding: 8px 10px !important;
}

.monaco-workbench
  .part.titlebar
  > .titlebar-container
  > .titlebar-left
  > .window-appicon:not(.codicon) {
  background-image: url("https://www.adiumxtras.com/images/pictures/nu_chrono_trigger_dock_icons_310306_img_307.gif");
  background-size: 25px;
}

.monaco-workbench.vs-dark
  .part.editor
  > .content
  .editor-group-container
  .editor-group-watermark
  > .letterpress {
  background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c2046041-a08f-46bd-85d1-27ffbe7b4585/dbo9hr9-d1c0ac4a-669b-4ff3-b44b-6573079f1867.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2MyMDQ2MDQxLWEwOGYtNDZiZC04NWQxLTI3ZmZiZTdiNDU4NVwvZGJvOWhyOS1kMWMwYWM0YS02NjliLTRmZjMtYjQ0Yi02NTczMDc5ZjE4NjcuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.owAgL46ZfcMrK0tJ36eAYrhsbo6uST416jtUB-K1SoE");
}
.monaco-editor .suggest-widget: {
  font-family: "Geist Mono", monospace !important;
  font-size: 12px;
}

.monaco-editor .suggest-widget .monaco-list-row {
  left: -2px !important;
  width: calc(100% + 2px) !important;
}

.monaco-editor .suggest-widget .codicon[class*="codicon-"] {
  font-size: 14px;
  display: inline-block !important;
  height: inherit !important;
  min-width: 2em;
  padding-left: 0;
  margin-right: 0.75em !important;
  line-height: 2em;
  text-align: center;
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-attribute"] {
  color: var(--color-attribute) !important;
  background: var(--background-attribute);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-builtin"] {
  color: var(--color-builtin) !important;
  background: var(--background-builtin);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-class"] {
  color: var(--color-class) !important;
  background: var(--background-class);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-constant"] {
  color: var(--color-attribute) !important;
  background: var(--background-attribute);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-function"] {
  color: var(--color-function) !important;
  background: var(--background-function);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-import"] {
  color: var(--color-builtin) !important;
  background: var(--background-builtin);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-keyword"] {
  color: var(--color-builtin) !important;
  background: var(--background-builtin);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-method"] {
  color: var(--color-function) !important;
  background: var(--background-function);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-module"] {
  color: var(--color-builtin) !important;
  background: var(--background-builtin);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-mixin"] {
  color: var(--color-class) !important;
  background: var(--background-class);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-package"] {
  color: var(--color-builtin) !important;
  background: var(--background-builtin);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-property"] {
  color: var(--color-property) !important;
  background: var(--background-property);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-require"] {
  color: var(--color-builtin) !important;
  background: var(--background-builtin);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-snippet"] {
  color: var(--color-snippet) !important;
  background: var(--background-snippet);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-tag"] {
  color: var(--color-tag) !important;
  background: var(--background-tag);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-type"] {
  color: var(--color-class) !important;
  background: var(--background-class);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-value"]: {
  color: var(--color-property) !important;
  background: var(--background-property);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-variable"] {
  color: var(--color-tag) !important;
  background: var(--background-tag);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-selector"] {
  color: var(--color-attribute) !important;
  background: var(--background-attribute);
}

.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-boolean"] {
  color: var(--color-boolean) !important;
  background: var(--background-boolean);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-enum"] {
  color: var(--color-enum) !important;
  background: var(--background-enum);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-event"] {
  color: var(--color-event) !important;
  background: var(--background-event);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-field"] {
  color: var(--color-field) !important;
  background: var(--background-field);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-interface"] {
  color: var(--color-interface) !important;
  background: var(--background-interface);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-key"] {
  color: var(--color-key) !important;
  background: var(--background-key);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-namespace"] {
  color: var(--color-namespace) !important;
  background: var(--background-namespace);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-null"] {
  color: var(--color-null) !important;
  background: var(--background-null);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-number"] {
  color: var(--color-number) !important;
  background: var(--background-number);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-object"] {
  color: var(--color-object) !important;
  background: var(--background-object);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-operator"] {
  color: var(--color-operator) !important;
  background: var(--background-operator);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-reference"] {
  color: var(--color-reference) !important;
  background: var(--background-reference);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-string"] {
  color: var(--color-string) !important;
  background: var(--background-string);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-struct"] {
  color: var(--color-struct) !important;
  background: var(--background-struct);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-text"] {
  color: var(--color-text) !important;
  background: var(--background-text);
}
.monaco-editor
  .suggest-widget
  .codicon[class*="codicon-symbol-type-parameter"] {
  color: var(--color-type-parameter) !important;
  background: var(--background-type-parameter);
}
.monaco-editor .suggest-widget .codicon[class*="codicon-symbol-unit"] {
  color: var(--color-unit) !important;
  background: var(--background-unit);
}

.action-item.checked {
  background: linear-gradient(
    to top,
    var(--vscode-editorLink-activeForeground) 0%,
    transparent 95%
  );
  box-shadow: 0 15px 15px var(--vscode-editorLink-activeForeground);
}

div.tab[aria-selected="true"] > .tab-border-top-container {
  background: linear-gradient(
    to right,
    var(--vscode-badge-background),
    var(--vscode-editorLink-activeForeground)
  );
  box-shadow: 0 5px 10px var(--vscode-editorLink-activeForeground);
}

div.tab[aria-selected="true"] > .tab-border-bottom-container {
  background: linear-gradient(
    to top,
    var(--vscode-badge-background),
    var(--vscode-editorLink-activeForeground)
  );
  box-shadow: 0 0 20px var(--vscode-editorLink-activeForeground);
}

Preview

No file open.

Check out how you can use it: apc.imports.

All the extensions and themes used in the preview can be view on my VSCode setting file.

breaking now