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.activeBackground#26292c
  • activityBar.activeBorder#00000000
  • activityBar.activeFocusBorder#00000000
  • activityBar.background#26292c
  • activityBar.border#ffffff10
  • activityBar.foreground#dddddd
  • activityBar.inactiveForeground#5c5c5c
  • activityBarBadge.background#5c5c5c
  • activityBarBadge.foreground#dddddd
  • badge.background#5c5c5c
  • badge.foreground#dddddd
  • breadcrumb.activeSelectionForeground#5c5c5c
  • breadcrumb.background#26292c
  • breadcrumb.focusForeground#dddddd
  • breadcrumb.foreground#999999
  • breadcrumbPicker.background#26292c
  • button.background#cc9988
  • button.foreground#26292c
  • button.hoverBackground#eebb99
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • dropdown.background#232629
  • dropdown.border#ffffff20
  • dropdown.foreground#dddddd
  • dropdown.listBackground#232629
  • editor.background#26292c
  • editor.findMatchBackground#ffffff30
  • editor.findMatchHighlightBackground#ffffff20
  • editor.findRangeHighlightBackground#70505060
  • editor.foreground#dddddd
  • editor.hoverHighlightBackground#ffffff40
  • editor.lineHighlightBackground#ffffff08
  • editor.rangeHighlightBackground#ffffff40
  • editor.selectionBackground#ffffff20
  • editor.selectionHighlightBackground#ffffff30
  • editor.wordHighlightBackground#ffffff20
  • editor.wordHighlightStrongBackground#ffffff40
  • editorBracketMatch.background#ffffff10
  • editorCursor.background#26292c
  • editorCursor.foreground#dddddd
  • editorGroupHeader.tabsBackground#26292c
  • editorGroupHeader.tabsBorder#ffffff10
  • editorIndentGuide.activeBackground#ffffff20
  • editorIndentGuide.background#ffffff10
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#999999
  • editorLineNumber.activeForeground#999999
  • editorLineNumber.foreground#666666
  • editorLink.activeForeground#eebb99
  • editorSuggestWidget.background#26292c
  • editorSuggestWidget.foreground#dddddd
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#eebb9930
  • extensionButton.prominentForeground#26292c
  • extensionButton.prominentHoverBackground#eebb99
  • focusBorder#eebb9970
  • gitDecoration.deletedResourceForeground#cc3333
  • gitDecoration.untrackedResourceForeground#88bb88
  • icon.foreground#dddddd
  • input.background#232629
  • input.border#ffffff20
  • list.activeSelectionBackground#ffffff18
  • list.focusBackground#eebb9930
  • list.focusForeground#ffffff
  • list.highlightForeground#eebb99
  • list.hoverBackground#ffffff10
  • list.inactiveSelectionBackground#ffffff10
  • peekView.border#eebb9970
  • peekViewEditor.background#ffffff10
  • peekViewEditor.matchHighlightBackground#eebb9930
  • peekViewResult.background#232629
  • peekViewResult.selectionBackground#eebb9930
  • peekViewTitleDescription.foreground#997766
  • progressBar.background#997766
  • quickInput.background#232629
  • quickInput.foreground#dddddd
  • searchEditor.findMatchBackground#70505070
  • selection.background#eebb9970
  • settings.headerForeground#dddddd
  • settings.modifiedItemIndicator#cc9988
  • sideBar.background#26292c
  • sideBar.border#ffffff10
  • sideBarSectionHeader.background#ffffff10
  • sideBarSectionHeader.border#ffffff10
  • statusBar.background#26292c
  • statusBar.border#ffffff10
  • statusBar.debuggingBackground#997766
  • statusBar.noFolderBackground#26292c
  • tab.activeBackground#26292c
  • tab.activeBorder#cc9988
  • tab.border#ffffff10
  • tab.hoverBackground#ffffff10
  • tab.inactiveBackground#26292c
  • terminal.ansiBlack#3F3F3F
  • terminal.ansiBlue#163063
  • terminal.ansiBrightBlack#709080
  • terminal.ansiBrightBlue#94BFF3
  • terminal.ansiBrightCyan#93E0E3
  • terminal.ansiBrightGreen#72D5A3
  • terminal.ansiBrightMagenta#EC93D3
  • terminal.ansiBrightRed#DCA3A3
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F0DFAF
  • terminal.ansiCyan#8CD0D3
  • terminal.ansiGreen#60B48A
  • terminal.ansiMagenta#DC8CC3
  • terminal.ansiRed#705050
  • terminal.ansiWhite#DCDCDC
  • terminal.ansiYellow#DFAF8F
  • terminal.background#26292c
  • terminal.foreground#dddddd
  • textLink.activeForeground#eebb99
  • textLink.foreground#cc9988
  • titleBar.activeBackground#26292c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#dddddd
emphasisitalic
strongbold
header#000080
comment#838689
constant.language#cc9988
constant.numeric#88bb88
constant.regexp#88bb88
entity.name.tag#cc9988
entity.name.tag.css#cc9988
entity.other.attribute-name#eebb99
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#cc9988
invalid#cc3333
markup.underlineunderline
markup.bold#cc9988bold
markup.heading#cc9988bold
markup.italicitalic
markup.inserted#88bb88
markup.deleted#88bb88
markup.changed#cc9988
beginning.punctuation.definition.quote.markdown#666666
beginning.punctuation.definition.list.markdown#66cc99
markup.inline.raw#88bb88
meta.selector#88bb88
punctuation.definition.tag#dddddd
meta.preprocessor#cc9988
meta.preprocessor.string#88bb88
meta.preprocessor.numeric#88bb88
meta.structure.dictionary.key.python#eebb99
meta.diff.header#cc9988
storage#cc9988
storage.type#cc9988
storage.modifier#cc9988
string#88bb88
string.tag#88bb88
string.value#88bb88
string.regexp#88bb88
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#cc9988
meta.template.expression#88bb88
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#eebb99
keyword#cc9988
keyword.control#cc9988
keyword.operator#dddddd
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#cc9988
keyword.other.unit#88bb88
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#cc9988
support.function.git-rebase#eebb99
constant.sha.git-rebase#88bb88
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#dddddd
variable.language#cc9988
entity.name.function, support.function, support.constant.handlebars#bb99bb
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#cc8899
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#cc8899
keyword.control#cc9988
variable, meta.definition.variable.name, support.variable, entity.name.variable#eebb99
meta.object-literal.key#eebb99
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#88bb88
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#88bb88
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#88bb88
keyword.operator.or.regexp, keyword.control.anchor.regexp#88bb88
keyword.operator.quantifier.regexp#88bb88
constant.character#cc9988
constant.character.escape#88bb88
token.info-token#66cc99
token.warn-token#cc3333
token.error-token#cc3333
token.debug-token#cc66cc
variable#dddddd
entity.name.variable#dddddd