Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#0c0c0c
  • activityBar.foreground#A0A0A0
  • activityBarBadge.background#7A4CFF
  • activityBarBadge.foreground#000
  • badge.background#7A4CFF
  • badge.foreground#000
  • button.background#A855F7
  • button.foreground#000
  • button.hoverBackground#7A4CFF
  • diffEditor.insertedLineBackground#7A4CFF40
  • diffEditor.insertedTextBackground#7A4CFF40
  • diffEditor.removedLineBackground#F8717140
  • diffEditor.removedTextBackground#F8717140
  • editor.background#0c0c0c
  • editor.foreground#E5E7EB
  • editor.selectionBackground#7DD3FC20
  • editor.selectionHighlightBackground#FFFFFF15
  • editorBracketHighlight.foreground1#A0A0A0
  • editorBracketHighlight.foreground2#A0A0A0
  • editorBracketHighlight.foreground3#A0A0A0
  • editorBracketHighlight.foreground4#A0A0A0
  • editorBracketHighlight.foreground5#A0A0A0
  • editorBracketHighlight.foreground6#A0A0A0
  • editorBracketHighlight.unexpectedBracket.foreground#F87171
  • editorCursor.foreground#d1a3ff
  • editorError.foreground#F87171
  • editorGroup.border#7A4CFF
  • editorGroupHeader.tabsBackground#0c0c0c
  • editorGutter.addedBackground#7A4CFF
  • editorGutter.deletedBackground#F87171
  • editorGutter.modifiedBackground#A855F7
  • editorHoverWidget.background#161616
  • editorHoverWidget.border#282828
  • editorInlayHint.parameterBackground#161616
  • editorInlayHint.parameterForeground#767d89
  • editorLineNumber.foreground#505050
  • editorOverviewRuler.border#0c0c0c
  • editorWarning.foreground#DCDCAA
  • editorWidget.background#0c0c0c
  • focusBorder#7A4CFF
  • gitDecoration.addedResourceForeground#7DD3FC
  • gitDecoration.conflictingResourceForeground#F87171
  • gitDecoration.deletedResourceForeground#F87171
  • gitDecoration.ignoredResourceForeground#595959
  • gitDecoration.modifiedResourceForeground#d1a3ff
  • gitDecoration.stageDeletedResourceForeground#F87171
  • gitDecoration.stageModifiedResourceForeground#d1a3ff
  • gitDecoration.submoduleResourceForeground#A0A0A0
  • gitDecoration.untrackedResourceForeground#7dfce3
  • icon.foreground#A0A0A0
  • input.background#1C1C1C
  • list.activeSelectionBackground#232323
  • list.activeSelectionForeground#d1a3ff
  • list.errorForeground#F87171
  • list.highlightForeground#7DD3FC
  • list.hoverBackground#282828
  • list.inactiveSelectionBackground#232323
  • scrollbarSlider.background#34343480
  • scrollbarSlider.hoverBackground#343434
  • selection.background#666
  • settings.modifiedItemIndicator#7A4CFF
  • sideBar.background#0c0c0c
  • sideBarSectionHeader.background#0c0c0c
  • sideBarSectionHeader.foreground#A0A0A0
  • sideBarTitle.foreground#A0A0A0
  • statusBar.background#0c0c0c
  • statusBar.debuggingBackground#7A4CFF
  • statusBar.debuggingForeground#FFF
  • statusBar.foreground#A0A0A0
  • statusBarItem.remoteBackground#7A4CFF
  • statusBarItem.remoteForeground#000
  • tab.activeBorderTop#7A4CFF
  • tab.border#0c0c0c
  • tab.inactiveBackground#0c0c0c
  • terminal.ansiBlack#0c0c0c
  • terminal.ansiBlue#7DD3FC
  • terminal.ansiBrightBlack#0c0c0c
  • terminal.ansiBrightBlue#A5F3FC
  • terminal.ansiBrightCyan#bc86ef
  • terminal.ansiBrightGreen#86EFAC
  • terminal.ansiBrightMagenta#C084FC
  • terminal.ansiBrightRed#F87171
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#F472B6
  • terminal.ansiCyan#bc86ef
  • terminal.ansiGreen#86EFAC
  • terminal.ansiMagenta#A855F7
  • terminal.ansiRed#F87171
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#F472B6
  • terminal.background#0c0c0c
  • textLink.activeForeground#A5F3FC
  • textLink.foreground#7DD3FC
  • titleBar.activeBackground#0c0c0c
  • titleBar.activeForeground#7E7E7E
  • titleBar.inactiveBackground#0c0c0c
  • titleBar.inactiveForeground#707070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type.property-name.json, meta.structure.dictionary.json support.type.property-name.json#A78BFAbold
entity.name.function, support.function#A78BFA—
storage.type.function, keyword.function, keyword.declaration.function, storage.type.function.go#d1a3ff—
comment#6B7280—
punctuation.definition.comment#6B728080—
keyword.control.import, keyword.control.export, keyword.control.from#f871c7bold
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#f871c7—
storage.type, storage.modifier#be84f7—
variable.other.property, variable.object.property, meta.object-literal.key#A78BFA—
variable.other#E5E7EB—
string#7DD3FC—
constant.numeric#F9A8D4—
entity.name.type, support.class#C4B5FD—
variable, identifier#E5E7EB—
constant.language.boolean, constant.language, constant.language.null#F9A8D4—
string.regexp, constant.character.escape#A0A0A0—
entity.name.tag, meta.tag, meta.tag entity.name.tag#A78BFA—
entity.other.attribute-name.class, entity.other.class, support.type.property-name.css#C4B5FD—
support.type.property-name.css, meta.property-name.css#7DD3FC—
punctuation, operator#9CA3AF—
keyword.operator, punctuation.definition.operator#6B7280—
Vesper AMBS by Rocketseat AMBS - VS Code Theme