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