Skip to main content
CodingTheme

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.border#3D3022
  • activityBar.dropBackground#3D3022
  • activityBar.foreground#F1DB24
  • activityBarBadge.background#ECB725
  • activityBarBadge.foreground#191611
  • badge.background#CE9043
  • badge.foreground#191611
  • button.background#CE9043
  • button.foreground#191611
  • button.hoverBackground#F1DB24
  • contrastActiveBorder#0000
  • contrastBorder#0000
  • descriptionForeground#B97A12
  • dropdown.background#191611
  • dropdown.border#3D3022
  • dropdown.foreground#ECB725
  • editor.background#191611
  • editor.findMatchBackground#3D3022
  • editor.findMatchHighlightBackground#3D3022
  • editor.foreground#ECB725
  • editor.hoverHighlightBackground#3D3022
  • editor.inactiveSelectionBackground#3D3022
  • editor.lineHighlightBackground#0000
  • editor.lineHighlightBorder#0000
  • editor.selectionBackground#3D3022
  • editor.selectionHighlightBackground#3D3022
  • editorBracketMatch.background#0000
  • editorBracketMatch.border#B97A12
  • editorCodeLens.foreground#ECB725
  • editorCursor.foreground#F1DB24
  • editorError.foreground#F1DB24
  • editorGroup.background#191611
  • editorGroup.border#3D3022
  • editorGroup.dropBackground#191611
  • editorGutter.addedBackground#683F00
  • editorGutter.deletedBackground#683F00
  • editorGutter.modifiedBackground#683F00
  • editorHoverWidget.background#221B13
  • editorHoverWidget.border#3D3022
  • editorIndentGuide.background#683F00
  • editorLineNumber.foreground#683F00
  • editorLink.activeForeground#F1DB24
  • editorRuler.foreground#3D3022
  • editorSuggestWidget.background#221B13
  • editorSuggestWidget.border#3D3022
  • editorSuggestWidget.foreground#ECB725
  • editorSuggestWidget.selectedBackground#3D3022
  • editorWarning.foreground#F1DB24
  • editorWidget.background#221B13
  • editorWidget.border#3D3022
  • extensionButton.prominentBackground#F1DB24
  • extensionButton.prominentForeground#191611
  • extensionButton.prominentHoverBackground#F1DB24
  • foreground#8E4300
  • input.background#191611
  • input.border#3D3022
  • input.foreground#ECB725
  • input.placeholderForeground#683F00
  • list.activeSelectionBackground#683F00
  • list.dropBackground#3D3022
  • list.focusBackground#3D3022
  • list.highlightForeground#F1DB24
  • list.hoverBackground#683F00
  • list.inactiveFocusBackground#3D3022
  • list.inactiveSelectionBackground#683F00
  • notification.background#F1DB24
  • notification.foreground#191611
  • panel.background#191611
  • panel.border#3D3022
  • panelTitle.activeForeground#ECB725
  • panelTitle.inactiveForeground#B97A12
  • peekView.border#3D3022
  • peekViewEditor.background#191611
  • peekViewEditor.matchHighlightBackground#3D3022
  • peekViewEditorGutter.background#17130D
  • peekViewResult.background#191611
  • peekViewResult.fileForeground#ECB725
  • peekViewResult.lineForeground#ECB725
  • peekViewResult.matchHighlightBackground#3D3022
  • peekViewResult.selectionBackground#3D3022
  • peekViewResult.selectionForeground#F1DB24
  • peekViewTitle.background#F1DB24
  • peekViewTitleDescription.foreground#F1DB24
  • peekViewTitleLabel.foreground#F1DB24
  • scrollbar.shadow#0000
  • scrollbarSlider.activeBackground#683F00
  • scrollbarSlider.background#683F00
  • scrollbarSlider.hoverBackground#B97A12
  • selection.background#683F00
  • sideBar.background#191611
  • sideBar.border#3D3022
  • sideBar.dropBackground#3D3022
  • sideBar.foreground#ECB725
  • sideBarSectionHeader.background#3D3022
  • sideBarSectionHeader.foreground#ECB725
  • sideBarTitle.foreground#F1DB24
  • statusBar.background#191611
  • statusBar.debuggingBackground#3D3022
  • statusBar.foreground#F1DB24
  • statusBar.noFolderBackground#191611
  • tab.activeBackground#3D3022
  • tab.activeForeground#F1DB24
  • tab.border#3D3022
  • tab.inactiveBackground#191611
  • tab.inactiveForeground#F1DB24
  • terminal.ansiBlack#191611
  • terminal.ansiBlue#3D3022
  • terminal.ansiBrightBlack#683F00
  • terminal.ansiBrightBlue#ECB725
  • terminal.ansiBrightCyan#ECB725
  • terminal.ansiBrightGreen#ECB725
  • terminal.ansiBrightMagenta#ECB725
  • terminal.ansiBrightRed#ECB725
  • terminal.ansiBrightWhite#F1DB24
  • terminal.ansiBrightYellow#ECB725
  • terminal.ansiCyan#683F00
  • terminal.ansiGreen#3D3022
  • terminal.ansiMagenta#683F00
  • terminal.ansiRed#683F00
  • terminal.ansiWhite#ECB725
  • terminal.ansiYellow#683F00
  • terminal.background#040600
  • terminal.foreground#ECB725
  • terminalCursor.foreground#F1DB24
  • textBlockQuote.background#221B13
  • textBlockQuote.border#3D3022
  • textCodeBlock.background#221B13
  • textLink.activeForeground#F1DB24
  • textLink.foreground#ECB725
  • textPreformat.foreground#F1DB24
  • textSeparator.foreground#F1DB24
  • walkThrough.embeddedEditorBackground#191611
  • welcomePage.buttonBackground#251C15
  • welcomePage.buttonHoverBackground#F1DB24
  • widget.shadow#0000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis#F1DB24
strong#F1DB24bold
meta.diff.header#F1DB24
comment#683F00
constant.language#F1DB24
constant.numeric#F1DB24
constant.regexp#F1DB24
entity.name.tagbold
entity.name.selector#F1DB24
entity.other.attribute-name#F1DB24
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#F1DB24
entity.other.attribute-name.id.css, source.css.less entity.other.attribute-name.id#F1DB24
invalid#F1DB24bold
markup.underlineunderline
markup.bold#F1DB24bold
markup.heading#F1DB24bold
markup.italic#F1DB24
markup.list#F1DB24
markup.list.numbered#F1DB24
markup.list.numbered#F1DB24
markup.quote#683F00
markup.raw#683F00
markup.inline.raw#683F00
markup.inserted#ECB725underline
markup.deleted#F1DB24underline
markup.changedunderline
beginning.punctuation.definition.quote.markdown, beginning.punctuation.definition.list.markdown#F1DB24
markup.inline.raw#683F00
meta.selector#F1DB24
punctuation.definition.tag#683F00
meta.preprocessor#F1DB24bold
meta.preprocessor.string#F1DB24
meta.preprocessor.numeric#F1DB24
meta.structure.dictionary.key.python#F1DB24
storage, storage.type, storage.modifier#ECB725
string#F1DB24
string.comment.buffered.block.jade, string.quoted.jade, string.interpolated.jade, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#F1DB24underline
string.regexp#F1DB24
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#F1DB24underline
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
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less
support.type.property-name.json#F1DB24
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php
support.function.git-rebase#F1DB24bold underline
constant.sha.git-rebase#683F00
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#ECB725
variable.language#683F00
keyword, keyword.control#ECB725bold
keyword.operator
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, keyword.other.unit#ECB725bold
entity.name.function, support.function, support.constant.handlebars#F1DB24
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, 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#F1DB24
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json#F1DB24
entity.other.inherited-classbold
variable, meta.definition.variable.name, support.variable
meta.object-literal.key, meta.object-literal.key entity.name.functionbold
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#F1DB24

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...