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#121110
  • activityBar.foreground#ffbd14
  • activityBar.inactiveForeground#fcfcf2
  • activityBarBadge.background#ffbd14
  • activityBarBadge.foreground#262327
  • button.background#ffbd14
  • button.foreground#121110
  • button.hoverBackground#ffcc23
  • contrastBorder#262327a0
  • dropdown.background#262327
  • editor.background#121110
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#262327
  • editor.lineHighlightBorder#262327
  • editor.selectionBackground#ffbd1460
  • editor.selectionHighlightBackground#ffbd1430
  • editorCursor.foreground#ffbd14
  • editorGroup.emptyBackground#121110
  • editorGroupHeader.tabsBackground#121110
  • editorGutter.addedBackground#52914a
  • editorGutter.deletedBackground#f84343
  • editorGutter.modifiedBackground#16769c
  • editorHoverWidget.background#262327
  • editorHoverWidget.border#262327a0
  • editorIndentGuide.background#262327
  • editorLink.activeForeground#ffbd14
  • editorOverviewRuler.border#26232700
  • editorSuggestWidget.background#121110
  • editorSuggestWidget.border#262327a0
  • editorSuggestWidget.focusHighlightForeground#ffbd14
  • editorSuggestWidget.selectedBackground#262327
  • editorSuggestWidget.selectedForeground#ffbd14
  • editorSuggestWidget.selectedIconForeground#9cdcfe
  • extensionButton.prominentBackground#ffbd14
  • extensionButton.prominentForeground#121110
  • extensionButton.prominentHoverBackground#ffcc23
  • focusBorder#26232700
  • foreground#fcfcf2
  • input.background#262327
  • inputOption.activeBorder#ffbd14
  • inputValidation.errorBackground#e02d2d
  • inputValidation.errorBorder#e02d2d
  • inputValidation.infoBackground#00638a
  • inputValidation.warningBackground#ff8928
  • list.activeSelectionBackground#ffbd14
  • list.activeSelectionForeground#121110
  • list.dropBackground#383b3d
  • list.focusBackground#262327
  • list.focusForeground#ffbd14
  • list.focusHighlightForeground#121110
  • list.highlightForeground#ffbd14
  • list.hoverBackground#262327
  • list.inactiveSelectionBackground#ffbd1430
  • list.inactiveSelectionForeground#fcfcf2
  • notification.background#121110
  • notification.buttonBackground#ffbd14
  • notification.buttonForeground#121110
  • notification.errorBackground#d10000
  • notification.foreground#fcfcf2
  • notification.infoBackground#00638a
  • notification.warningBackground#ff8928
  • notificationCenterHeader.background#1e1e1e
  • notificationLink.foreground#ffbd14
  • notifications.background#121110
  • notificationsErrorIcon.foreground#e02d2d
  • panelTitle.activeBorder#ffbd14
  • peekView.border#fcfcf230
  • peekViewEditor.background#1e1e1e
  • peekViewEditor.matchHighlightBackground#ffbd1420
  • peekViewResult.background#121110
  • peekViewResult.matchHighlightBackground#ffbd1420
  • peekViewResult.selectionBackground#262327
  • peekViewTitle.background#262327
  • peekViewTitleDescription.foreground#fcfcf2
  • peekViewTitleLabel.foreground#fcfcf2
  • pickerGroup.foreground#ffbd14
  • progressBar.background#ffbd14
  • quickInput.background#121110
  • scrollbar.shadow#262327a0
  • scrollbarSlider.activeBackground#ffbd14
  • scrollbarSlider.hoverBackground#ffbd14
  • selection.background#ffbd1460
  • sideBar.background#121110
  • sideBarSectionHeader.background#262327
  • statusBar.background#121110
  • statusBar.debuggingBackground#ffbd14
  • statusBar.debuggingForeground#121110
  • statusBar.noFolderBackground#121110
  • statusBarItem.activeBackground#ffbd14
  • statusBarItem.hoverBackground#ffbc14
  • tab.activeBackground#121110
  • tab.activeBorderTop#ffbd14
  • tab.inactiveBackground#121110
  • terminal.tab.activeBorder#ffbd14
  • textLink.activeForeground#ffbd14
  • textLink.foreground#ffbd14
  • titleBar.activeBackground#121110

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d4d4d4ff
emphasisitalic
strongbold
header#000080
comment#6d6d6ditalic
constant.language, constant.character, constant.other#eac66c
constant.numeric#b5cea8
constant.regexp#646695
entity.name.tag#eac66c
entity.name.tag.css#d7ba7d
entity.other.attribute-name#9cdcfe
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#d7ba7d
invalid#f44747
markup.underlineunderline
markup.bold#eac66cbold
markup.heading#9bb46ebold
markup.italicitalic
markup.inserted#b5cea8
markup.deleted#BF9277
markup.changed#eac66c
beginning.punctuation.definition.quote.markdown#608b4e
beginning.punctuation.definition.list.markdown#6796e6
markup.inline.raw#BF9277
meta.selector#d7ba7d
punctuation.definition.tag#808080
meta.preprocessor#eac66c
meta.preprocessor.string#BF9277
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#9cdcfe
meta.diff.header#eac66c
storage#eac66c
storage.type#9CDCFE
storage.modifier#eac66c
string#C99677
string.tag#C99677
string.value#C99677
string.regexp#d16969
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#eac66c
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, keyword.other.class.cs#9cdcfe
keyword#eac66c
keyword.control#F7397D
keyword.operator#9CDCFE
keyword.operator.sigil.rust, keyword.operator.address.go, keyword.operator.misc.rust#9CDCFE
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, support.function.builtin.go, support.function.core.rust#eac66c
keyword.other.unit#b5cea8
punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php, punctuation.separator.pointer-access.c#eac66c
punctuation.separator.namespace.access.cpp, variable.parameter#FA9F50italic
storage.type.function.js, storage.type.function.python, keyword.function.go, keyword.control.def.ruby#9CDCFEitalic
support.function.git-rebase#9cdcfe
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, storage.modifier.package.java#d4d4d4
variable.language, variable.parameter.function.language.special.self.python, keyword.other.this.cs#9CDCFE
entity.name.function, entity.name.type.type-parameter.cs, support.function, support.constant.handlebars, meta.function-call.generic.python#ABD166
meta.return-type, support.class, support.type, entity.name.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, keyword.operator.type.annotation.ts, 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#9CDCFE
entity.name.type#ffbd14
entity.other.inherited-class#ffbd14italic
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json#9bb46e
variable, meta.definition.variable.name, support.variable#D6D6D6
meta.object-literal.key, meta.object-literal.key entity.name.function#9CDCFE
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#BF9277
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6