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.activeBorder#7BA23F
  • activityBar.background#1C1C1C
  • activityBar.foreground#A9DF56
  • activityBarBadge.background#7BA23F
  • badge.background#7BA23F
  • button.background#7BA23F
  • button.secondaryBackground#7BA23F
  • debugConsole.errorForeground#F84E64
  • debugConsole.infoForeground#27ABEC
  • debugConsole.sourceForeground#e3e3e3
  • debugConsole.warningForeground#E6D226
  • debugIcon.continueForeground#23D082
  • debugIcon.disconnectForeground#F84E64
  • debugIcon.pauseForeground#E6D226
  • debugIcon.restartForeground#E6D226
  • debugIcon.startForeground#23D082
  • debugIcon.stepIntoForeground#27ABEC
  • debugIcon.stepOutForeground#27ABEC
  • debugIcon.stepOverForeground#27ABEC
  • debugIcon.stopForeground#F84E64
  • diffEditor.insertedLineBackground#23D08244
  • diffEditor.insertedTextBackground#23D08244
  • diffEditor.removedLineBackground#F84E6444
  • diffEditor.removedTextBackground#F84E6444
  • diffEditorGutter.insertedLineBackground#23D08288
  • diffEditorGutter.removedLineBackground#F84E6488
  • disabledForeground#888888
  • dropdown.background#1C1C1C
  • dropdown.border#7BA23F
  • editor.background#1C1C1C
  • editor.findMatchBackground#7BA23F88
  • editor.findMatchHighlightBackground#663FA288
  • editor.foreground#e3e3e3
  • editor.hoverHighlightBackground#663FA244
  • editor.lineHighlightBackground#663FA244
  • editor.selectionBackground#663FA288
  • editor.wordHighlightBackground#663FA244
  • editor.wordHighlightStrongBackground#7BA23F44
  • editorBracketHighlight.foreground1#e3e3e3
  • editorBracketHighlight.foreground2#e3e3e3
  • editorBracketHighlight.foreground3#e3e3e3
  • editorBracketHighlight.foreground4#e3e3e3
  • editorBracketHighlight.foreground5#e3e3e3
  • editorBracketHighlight.foreground6#e3e3e3
  • editorBracketHighlight.unexpectedBracket.foreground#F84E64
  • editorBracketPairGuide.activeBackground1#e3e3e388
  • editorBracketPairGuide.activeBackground2#e3e3e388
  • editorBracketPairGuide.activeBackground3#e3e3e388
  • editorBracketPairGuide.activeBackground4#e3e3e388
  • editorBracketPairGuide.activeBackground5#e3e3e388
  • editorBracketPairGuide.activeBackground6#e3e3e388
  • editorError.foreground#F84E64
  • editorGroupHeader.tabsBackground#292929
  • editorGutter.addedBackground#23D082
  • editorGutter.deletedBackground#F84E64
  • editorGutter.modifiedBackground#27ABEC
  • editorHint.foreground#27ABEC
  • editorInfo.foreground#27ABEC
  • editorInlayHint.background#75715E88
  • editorInlayHint.foreground#e3e3e388
  • editorLineNumber.activeForeground#7BA23F
  • editorLineNumber.foreground#888888
  • editorLink.activeForeground#8C56DF
  • editorWarning.foreground#E6D226
  • editorWidget.background#1C1C1C
  • editorWidget.border#7BA23F
  • errorForeground#F84E64
  • extensionIcon.preReleaseForeground#663FA2fe
  • focusBorder#393939
  • foreground#e3e3e3
  • gitDecoration.addedResourceForeground#23D082
  • gitDecoration.conflictingResourceForeground#F84E64
  • gitDecoration.deletedResourceForeground#F84E64
  • gitDecoration.modifiedResourceForeground#27ABEC
  • input.background#1C1C1C
  • input.border#7BA23F
  • inputOption.activeBackground#7BA23F
  • inputOption.activeBorder#0000
  • inputOption.hoverBackground#663FA2
  • inputValidation.errorBackground#F84E6488
  • inputValidation.errorBorder#F84E64
  • inputValidation.infoBackground#27ABEC88
  • inputValidation.infoBorder#27ABEC
  • inputValidation.warningBackground#E6D22688
  • inputValidation.warningBorder#E6D226
  • list.activeSelectionBackground#7BA23F
  • list.dropBackground#663FA288
  • list.focusBackground#7BA23F88
  • list.highlightForeground#8C56DF
  • list.hoverBackground#7BA23F88
  • list.inactiveSelectionBackground#7BA23F44
  • menubar.selectionBackground#7BA23F
  • panel.border#393939
  • panelSectionHeader.background#1C1C1C
  • panelTitle.activeBorder#7BA23F
  • progressBar.background#7BA23F
  • selection.background#663FA288
  • settings.headerForeground#A9DF56
  • settings.modifiedItemIndicator#27ABEC
  • settings.settingsHeaderHoverForeground#8C56DF
  • sideBar.background#1C1C1C
  • sideBar.border#393939
  • sideBarSectionHeader.background#1C1C1C
  • sideBarTitle.foreground#e3e3e3
  • statusBar.background#1C1C1C
  • statusBar.debuggingBackground#663FA2
  • statusBar.focusBorder#7BA23F
  • statusBar.noFolderBackground#1C1C1C
  • statusBarItem.errorBackground#1C1C1C
  • statusBarItem.errorForeground#F84E64
  • statusBarItem.prominentBackground#1C1C1C
  • statusBarItem.prominentForeground#7BA23F
  • statusBarItem.warningBackground#1C1C1C
  • statusBarItem.warningForeground#E6D226
  • tab.activeBorderTop#7BA23F
  • tab.hoverBackground#1C1C1C
  • tab.inactiveBackground#292929
  • terminal.tab.activeBorder#7BA23F
  • textLink.activeForeground#8C56DF
  • textLink.foreground#A9DF56
  • textPreformat.foreground#8C56DF
  • titleBar.activeBackground#1C1C1C
  • toolbar.activeBackground#663FA2
  • toolbar.hoverBackground#663FA2
  • tree.inactiveIndentGuidesStroke#e3e3e344
  • tree.indentGuidesStroke#e3e3e388
  • widget.border#7BA23F
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier, support.type, variable.language, entity.name.tag, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ff6188bold
punctuation.definition.tag#AD415C
keyword.operator#e3e3e3
entity.name.function, support.function#fc9867
support.function.magic, keyword.other.special-method#FC676Bbold
variable, entity.name.variable.field, entity.name.variable.property, support.type.property-name#a9dc76
support.variable.magic, punctuation.support.type, support.type.vendored.property-name#CDDC76bold
variable.parameter, variable.other.local, variable.other.readwrite, variable.other.object, entity.name.type.namespace#e3e3e3italic
entity.name.type, support.class, entity.other.attribute-name#78dce8
constant.numeric, constant.language, constant.other.option, variable.other.constant, support.constant, variable.other.enummember#AE81FF
string.quoted, string.unquoted, string.template#E6DB74
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.char.begin, punctuation.definition.char.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#948D4A
constant.character.escape#C872E5bold
comment#75715Eitalic
keyword.operator.logical, keyword.operator.new, keyword.operator.expression, keyword.operator.comparison.powershell, keyword.operator.at.batchfile, entity.other.keyframe-offset, variable.parameter.function.language.special.self.python, meta.shebang, punctuation.definition.heading.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.math.inline.markdown, punctuation.definition.math.begin.markdown, punctuation.definition.math.end.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.strikethrough.markdown#ff6188bold
invalid.illegal.character-not-allowed-here.html#AD415C
punctuation.separator, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.parenthesis.open, punctuation.parenthesis.close, string.unquoted.argument#e3e3e3
keyword.command.batchfile, meta.function-call.python#fc9867
punctuation.definition.evaluation#FC676Bbold
variable.other.readwrite.batchfile, variable.other.readwrite.powershell, meta.attribute.python, constant.character.format.placeholder.other.python, text.html source.css, punctuation.definition.metadata.markdown, punctuation.definition.link.markdown, fenced_code.block.language.markdown#a9dc76
punctuation.definition.variable, variable.parameter.positional, variable.parameter.function-call.python#CDDC76bold
#e3e3e3italic
entity.name.section#78dce8
constant.character.math.tex#AE81FF
string.other.link.description.markdown, string.other.link.title.markdown, markup.underline.link.image.markdown, markup.underline.link.markdown, meta.embedded.math.markdown, meta.embedded.block.katex#E6DB74
#948D4A
punctuation.definition.function.math.tex, punctuation.definition.constant.math.tex#C872E5bold
markup.italicitalic
markup.boldbold
markup.bold markup.italicbold italic
string.regexp#E6DB74
support.other.match.begin.regexp, support.other.match.end.regexp#E6AB7A
support.other.escape.special.regexp, constant.other.set.regexp, constant.character.set.regexp#83B3E5
keyword.operator.quantifier.regexp, keyword.operator.disjunction.regexp#E57AD5
punctuation.parenthesis.begin.regexp, punctuation.parenthesis.end.regexp#529459
rainbow1#ff6188
keyword.rainbow2#FC676B
entity.name.function.rainbow3#fc9867
comment.rainbow4#E6DB74
string.rainbow5#a9dc76
variable.parameter.rainbow6#78E8CB
constant.numeric.rainbow7#78dce8
entity.name.type.rainbow8#78B3E8
markup.bold.rainbow9#AE81FF
invalid.rainbow10#C872E5
A3 Theme by HackberryA3 - VS Code Theme