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