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#e6e6e6
  • activityBar.background#161616
  • activityBar.border#27292b
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#343434
  • badge.background#161616
  • button.background#27292b
  • button.foreground#e6e6e6
  • checkbox.border#404754
  • dropdown.background#111111
  • dropdown.border#111111
  • dropdown.foreground#e6e6e6
  • editor.background#1A1D23
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#42557b
  • editor.findMatchHighlightBackground#6bb7ff2f
  • editor.foreground#c0c5ce
  • editor.hoverHighlightBackground#202020
  • editor.inactiveSelectionBackground#2C333B
  • editor.lineHighlightBackground#2C333B
  • editor.lineHighlightBorder#2C333B
  • editor.rangeHighlightBackground#27292b
  • editor.selectionBackground#2C333B
  • editor.selectionHighlightBackground#27292b
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#d7dae0
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#d7dae0
  • editorBracketMatch.background#2f2f2f
  • editorBracketMatch.border#303030
  • editorCodeLens.foreground#27292b
  • editorCursor.background#161616
  • editorCursor.foreground#C1ECE4
  • editorError.border#27292b
  • editorError.foreground#FF7A84
  • editorGroup.border#27292b
  • editorGroup.dropBackground#3793e01a
  • editorGroup.emptyBackground#161616
  • editorGroupHeader.tabsBackground#111111
  • editorGroupHeader.tabsBorder#27292b
  • editorGutter.background#1A1D23
  • editorHoverWidget.background#111111
  • editorHoverWidget.border#27292b
  • editorIndentGuide.background1#2f2f2f
  • editorLineNumber.activeForeground#e6e6e6
  • editorLineNumber.foreground#606b76
  • editorLink.activeForeground#999999
  • editorMarkerNavigation.background#111111
  • editorMarkerNavigationError.background#161616
  • editorMarkerNavigationWarning.background#27292b
  • editorOverviewRuler.border#27292b
  • editorOverviewRuler.commonContentForeground#27292b
  • editorOverviewRuler.currentContentForeground#FF7A84
  • editorOverviewRuler.incomingContentForeground#73c936
  • editorRuler.foreground#343434
  • editorSuggestWidget.background#111111
  • editorSuggestWidget.border#27292b
  • editorSuggestWidget.foreground#999999
  • editorSuggestWidget.selectedBackground#27292b
  • editorWarning.border#27292b
  • editorWarning.foreground#FF7A84
  • editorWhitespace.foreground#65737e
  • editorWidget.background#111111
  • editorWidget.border#27292b
  • errorForeground#FF7A84
  • focusBorder#666666
  • foreground#e6e6e6
  • input.background#27292bd3
  • input.foreground#e6e6e6
  • input.placeholderForeground#999999
  • inputOption.activeBorder#343434
  • inputValidation.errorBorder#FF7A84
  • inputValidation.infoBorder#b392f0
  • inputValidation.warningBorder#FF9800
  • list.activeSelectionBackground#27292b
  • list.activeSelectionForeground#e6e6e6
  • list.dropBackground#111111
  • list.errorForeground#FF7A84
  • list.focusBackground#27292b
  • list.highlightForeground#96a6c8
  • list.hoverBackground#27292b
  • list.inactiveSelectionBackground#27292b
  • list.inactiveSelectionForeground#e6e6e6
  • list.warningForeground#FF9800
  • menu.background#111111
  • menu.border#343434
  • menu.selectionBackground#27292b
  • menu.separatorBackground#303030
  • notificationCenter.border#343434
  • notifications.background#111111
  • notifications.border#343434
  • notifications.foreground#ffffff
  • notificationToast.border#343434
  • panelSectionHeader.background#111111
  • panelTitle.activeBorder#e6e6e6
  • peekView.border#343434
  • peekViewEditor.background#111111
  • peekViewEditor.matchHighlightBackground#3793e033
  • peekViewResult.background#111111
  • peekViewResult.fileForeground#e6e6e6
  • peekViewResult.lineForeground#e6e6e6
  • peekViewResult.matchHighlightBackground#3793e033
  • peekViewResult.selectionBackground#23252c
  • peekViewResult.selectionForeground#e6e6e6
  • peekViewTitle.background#23252c
  • peekViewTitleDescription.foreground#79b8ff
  • peekViewTitleLabel.foreground#e6e6e6
  • scrollbar.shadow#161616
  • scrollbarSlider.activeBackground#3c3f42cc
  • scrollbarSlider.background#d2e0ff2f
  • scrollbarSlider.hoverBackground#5b646c
  • selection.background#61afef40
  • sideBar.background#111111
  • sideBar.border#27292b
  • sideBar.foreground#e6e6e6
  • sideBarSectionHeader.background#161616
  • sideBarSectionHeader.border#27292b
  • sideBarSectionHeader.foreground#e6e6e6
  • sideBarTitle.foreground#e6e6e6
  • statusBar.background#111111
  • statusBar.border#27292b
  • statusBar.foreground#e6e6e6
  • statusBar.noFolderBackground#111111
  • statusBar.noFolderForeground#e6e6e6
  • statusBarItem.prominentBackground#FF7A84
  • statusBarItem.prominentHoverBackground#FF9800
  • statusBarItem.remoteBackground#BB80B0
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#363636e6
  • tab.activeForeground#e6e6e6
  • tab.border#27292b
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#8a8a8a
  • tab.unfocusedActiveForeground#e6e6e6
  • tab.unfocusedInactiveForeground#757575
  • tab.unfocusedInactiveModifiedBorder#FF7A84
  • terminal.background#1A1D23
  • terminal.border#2f2f2f
  • terminal.foreground#bdbdbd
  • terminal.selectionBackground#303030
  • textLink.foreground#79b8ff
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#e6e6e6
  • titleBar.border#27292b
  • titleBar.inactiveBackground#161616
  • titleBar.inactiveForeground#999999
  • walkThrough.embeddedEditorBackground#2e3440

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#C1ECE4
emphasisitalic
strongbold
header#000080
comment#606060
constant.language#FF9999
constant.numeric#FF9999
constant.regexp#99CCFF
entity.name.tag#FF9999
entity.name.tag.css#FF9999
entity.other.attribute-name#FFCC99
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#FF9999
invalid#FF6666
markup.underlineunderline
markup.bold#FF9999bold
markup.heading#FF9999bold
markup.italicitalic
markup.inserted#99CCFF
markup.deleted#99CCFF
markup.changed#FF9999
beginning.punctuation.definition.quote.markdown#606060
beginning.punctuation.definition.list.markdown#66CC99
markup.inline.raw#99CCFF
meta.selector#999966
punctuation.definition.tag#E0E0E0
meta.preprocessor#FF9999
meta.preprocessor.string#99CCFF
meta.preprocessor.numeric#99CCFF
meta.structure.dictionary.key.python#FFCC99
meta.diff.header#FF9999
storage#FF9999
storage.type#FF9999
storage.modifier#FF9999
string#99CCFF
string.tag#99CCFF
string.value#99CCFF
string.regexp#99CCFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#FF9999
meta.template.expression#E0E0E0
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#FFCC99
keyword#FF9999
keyword.control#FF9999
keyword.operator#C1ECE4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#FF9999
keyword.other.unit#99CCFF
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#FF9999
support.function.git-rebase#FFCC99
constant.sha.git-rebase#99CCFF
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#E0E0E0
variable.language#FF9999
entity.name.function, support.function, support.constant.handlebars#CC99CC
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#66CCCC
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#66CCCC
keyword.control#FF9999
variable, meta.definition.variable.name, support.variable, entity.name.variable#FFCC99
meta.object-literal.key#FFCC99
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#99CCFF
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#99CCFF
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#99CCFF
keyword.operator.or.regexp, keyword.control.anchor.regexp#99CCFF
keyword.operator.quantifier.regexp#99CCFF
constant.character#FF9999
constant.character.escape#99CCFF
token.info-token#66CC99
token.warn-token#FF6666
token.error-token#FF6666
token.debug-token#CC66CC
variable#E0E0E0
entity.name.variable#E0E0E0
ThemeDatabase All Themes by enes ozturk - VS Code Theme