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#E6E6E6
  • activityBarBadge.background#82AAFF
  • activityBarBadge.foreground#000
  • badge.background#82AAFF
  • badge.foreground#000
  • button.background#82AAFF
  • button.foreground#000
  • button.hoverBackground#569CD6
  • diffEditor.insertedLineBackground#C3E88D40
  • diffEditor.insertedTextBackground#C3E88D40
  • diffEditor.removedLineBackground#F4474740
  • diffEditor.removedTextBackground#F4474740
  • editor.background#0c0c0c
  • editor.foreground#E6E6E6
  • editor.lineHighlightBackground#1F2330
  • editor.selectionBackground#2A3A5A
  • editor.selectionHighlightBackground#2A3A5A40
  • editorBracketHighlight.foreground1#82AAFF
  • editorBracketHighlight.foreground2#C3E88D
  • editorBracketHighlight.foreground3#B392F0
  • editorBracketHighlight.foreground4#ECC48D
  • editorBracketHighlight.foreground5#F78C6C
  • editorBracketHighlight.foreground6#DCDCAA
  • editorBracketHighlight.unexpectedBracket.foreground#F44747
  • editorCursor.foreground#FFFFFF
  • editorError.foreground#F44747
  • editorGroup.border#2A3A5A
  • editorGroupHeader.tabsBackground#0c0c0c
  • editorGutter.addedBackground#C3E88D
  • editorGutter.deletedBackground#F44747
  • editorGutter.modifiedBackground#82AAFF
  • editorHoverWidget.background#1F2330
  • editorHoverWidget.border#2A3A5A
  • editorInlayHint.parameterBackground#1F2330
  • editorInlayHint.parameterForeground#5C6370
  • editorLineNumber.activeForeground#E6E6E6
  • editorLineNumber.foreground#5C6370
  • editorOverviewRuler.border#0c0c0c
  • editorWarning.foreground#DCDCAA
  • editorWidget.background#0c0c0c
  • focusBorder#82AAFF
  • gitDecoration.addedResourceForeground#C3E88D
  • gitDecoration.conflictingResourceForeground#F44747
  • gitDecoration.deletedResourceForeground#F44747
  • gitDecoration.ignoredResourceForeground#5C6370
  • gitDecoration.modifiedResourceForeground#82AAFF
  • gitDecoration.stageDeletedResourceForeground#F44747
  • gitDecoration.stageModifiedResourceForeground#82AAFF
  • gitDecoration.submoduleResourceForeground#B392F0
  • gitDecoration.untrackedResourceForeground#ECC48D
  • icon.foreground#E6E6E6
  • input.background#1F2330
  • list.activeSelectionBackground#2A3A5A
  • list.activeSelectionForeground#E6E6E6
  • list.errorForeground#F44747
  • list.highlightForeground#82AAFF
  • list.hoverBackground#1F2330
  • list.inactiveSelectionBackground#1F2330
  • scrollbarSlider.background#5C637080
  • scrollbarSlider.hoverBackground#5C6370
  • selection.background#2A3A5A
  • settings.modifiedItemIndicator#82AAFF
  • sideBar.background#0c0c0c
  • sideBarSectionHeader.background#0c0c0c
  • sideBarSectionHeader.foreground#E6E6E6
  • sideBarTitle.foreground#E6E6E6
  • statusBar.background#0c0c0c
  • statusBar.debuggingBackground#82AAFF
  • statusBar.debuggingForeground#FFF
  • statusBar.foreground#E6E6E6
  • statusBarItem.remoteBackground#82AAFF
  • statusBarItem.remoteForeground#000
  • tab.activeBorderTop#82AAFF
  • tab.border#0c0c0c
  • tab.inactiveBackground#0c0c0c
  • terminal.ansiBlack#0c0c0c
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#5C6370
  • terminal.ansiBrightBlue#569CD6
  • terminal.ansiBrightCyan#B392F0
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#F78C6C
  • terminal.ansiBrightRed#F44747
  • terminal.ansiBrightWhite#E6E6E6
  • terminal.ansiBrightYellow#ECC48D
  • terminal.ansiCyan#B392F0
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#F78C6C
  • terminal.ansiRed#F44747
  • terminal.ansiWhite#E6E6E6
  • terminal.ansiYellow#ECC48D
  • terminal.background#0c0c0c
  • textLink.activeForeground#569CD6
  • textLink.foreground#82AAFF
  • titleBar.activeBackground#0c0c0c
  • titleBar.activeForeground#E6E6E6
  • titleBar.inactiveBackground#0c0c0c
  • titleBar.inactiveForeground#5C6370

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5C6370italic
keyword, storage.type, storage.modifier, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#82AAFFbold
string#ECC48D—
constant.numeric#F78C6Cbold
entity.name.function, support.function#C3E88Dbold underline
variable, identifier, variable.other, variable.other.property, variable.object.property, meta.object-literal.key#E6E6E6—
entity.name.type, support.class#B392F0—
invalid#FFFFFFunderline
constant.language.boolean, constant.language, constant.language.null#F78C6C—
string.regexp, constant.character.escape#ECC48D—
entity.name.tag, meta.tag, meta.tag entity.name.tag#82AAFF—
entity.other.attribute-name.class, entity.other.class, support.type.property-name.css#B392F0—
support.type.property-name.css, meta.property-name.css#C3E88D—
punctuation, operator, keyword.operator, punctuation.definition.operator#5C6370—
support.type.property-name.json, meta.structure.dictionary.json support.type.property-name.json#E6E6E6bold