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
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#C586C0bold
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#C586C0
storage.type, storage.modifier#be84f7
variable.other.property, variable.object.property, meta.object-literal.key#A78BFA
variable.other#E5E7EB
string#4EC9B0
constant.numeric#DCDCAA
constant.language.boolean, constant.language, constant.language.null#C586C0
entity.name.type, support.class#C4B5FD
variable, identifier#E5E7EB
string.regexp, constant.character.escape#A0A0A0
entity.name.function, support.function#569CD6
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