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#32302f
  • activityBar.border#3c3836
  • activityBar.foreground#ebdbb2
  • activityBarBadge.background#fe8019
  • activityBarBadge.foreground#3c3836
  • badge.background#fe8019
  • badge.foreground#32302f
  • button.background#fe801980
  • button.foreground#ebdbb2
  • button.hoverBackground#fe801960
  • debugToolBar.background#32302f
  • diffEditor.insertedTextBackground#b8bb2630
  • diffEditor.removedTextBackground#fb493430
  • dropdown.background#32302f
  • dropdown.border#3c3836
  • dropdown.foreground#ebdbb2
  • editor.background#32302f
  • editor.findMatchBackground#83a59870
  • editor.findMatchHighlightBackground#fe801930
  • editor.findRangeHighlightBackground#83a59870
  • editor.foreground#ebdbb2
  • editor.hoverHighlightBackground#689d6a50
  • editor.lineHighlightBackground#3c383660
  • editor.lineHighlightBorder#3c383600
  • editor.selectionBackground#689d6a40
  • editor.selectionHighlightBackground#fabd2f40
  • editorBracketHighlight.unexpectedBracket.foreground#cc241d
  • editorBracketMatch.background#92837480
  • editorBracketMatch.border#32302f00
  • editorCodeLens.foreground#a8998490
  • editorCursor.foreground#ebdbb2
  • editorError.foreground#cc241d
  • editorGroup.border#3c3836
  • editorGroup.dropBackground#3c383660
  • editorGroupHeader.noTabsBackground#32302f
  • editorGroupHeader.tabsBackground#32302f
  • editorGroupHeader.tabsBorder#3c3836
  • editorGutter.addedBackground#a9cf2d
  • editorGutter.background#32302f00
  • editorGutter.deletedBackground#fb4934
  • editorGutter.modifiedBackground#96d3bc
  • editorHoverWidget.background#32302f
  • editorHoverWidget.border#3c3836
  • editorInfo.foreground#fe8019
  • editorLineNumber.foreground#665c54
  • editorLink.activeForeground#ebdbb2
  • editorOverviewRuler.addedForeground#96d3bc
  • editorOverviewRuler.border#32302f00
  • editorOverviewRuler.commonContentForeground#928374
  • editorOverviewRuler.currentContentForeground#00cbd6
  • editorOverviewRuler.deletedForeground#96d3bc
  • editorOverviewRuler.errorForeground#fb4934
  • editorOverviewRuler.findMatchForeground#bdae93
  • editorOverviewRuler.incomingContentForeground#689d6a
  • editorOverviewRuler.infoForeground#fe8019
  • editorOverviewRuler.modifiedForeground#96d3bc
  • editorOverviewRuler.rangeHighlightForeground#bdae93
  • editorOverviewRuler.selectionHighlightForeground#665c54
  • editorOverviewRuler.warningForeground#d79921
  • editorOverviewRuler.wordHighlightForeground#665c54
  • editorOverviewRuler.wordHighlightStrongForeground#665c54
  • editorRuler.foreground#a8998440
  • editorSuggestWidget.background#32302f
  • editorSuggestWidget.border#3c3836
  • editorSuggestWidget.foreground#ebdbb2
  • editorSuggestWidget.highlightForeground#fe8019
  • editorSuggestWidget.selectedBackground#3c383660
  • editorWarning.foreground#d79921
  • editorWhitespace.foreground#a8998420
  • editorWidget.background#32302f
  • editorWidget.border#3c3836
  • errorForeground#fb4934
  • extensionButton.prominentBackground#b8bb2680
  • extensionButton.prominentHoverBackground#b8bb2630
  • focusBorder#3c3836
  • foreground#ebdbb2
  • gitDecoration.conflictingResourceForeground#b16286
  • gitDecoration.deletedResourceForeground#cc241d
  • gitDecoration.ignoredResourceForeground#7c6f64
  • gitDecoration.modifiedResourceForeground#d79921
  • gitDecoration.untrackedResourceForeground#98971a
  • icon.foreground#ebdbb2
  • input.background#ebdbb205
  • input.border#3c3836
  • input.foreground#ebdbb2
  • input.placeholderForeground#ebdbb260
  • inputOption.activeBorder#ebdbb260
  • inputValidation.errorBackground#cc241d
  • inputValidation.errorBorder#fb4934
  • inputValidation.infoBackground#fe801980
  • inputValidation.infoBorder#96d3bc
  • inputValidation.warningBackground#d7992180
  • inputValidation.warningBorder#fabd2f
  • list.activeSelectionBackground#3c383680
  • list.activeSelectionForeground#fe8019
  • list.dropBackground#3c3836
  • list.focusBackground#3c3836
  • list.focusForeground#ebdbb2
  • list.highlightForeground#96D3BC
  • list.hoverBackground#3c383680
  • list.hoverForeground#d5c4a1
  • list.inactiveSelectionBackground#3c383680
  • list.inactiveSelectionForeground#96D3BC
  • menu.border#3c3836
  • menu.separatorBackground#3c3836
  • merge.border#32302f00
  • merge.currentContentBackground#45858820
  • merge.currentHeaderBackground#45858840
  • merge.incomingContentBackground#689d6a20
  • merge.incomingHeaderBackground#689d6a40
  • notebook.cellBorderColor#665c54
  • notebook.cellEditorBackground#282828
  • notebook.focusedCellBorder#a89984
  • notebook.focusedEditorBorder#665c54
  • panel.border#3c3836
  • panelTitle.activeForeground#ebdbb2
  • peekView.border#3c3836
  • peekViewEditor.background#3c383670
  • peekViewEditor.matchHighlightBackground#504945
  • peekViewEditorGutter.background#3c383670
  • peekViewResult.background#3c383670
  • peekViewResult.fileForeground#ebdbb2
  • peekViewResult.lineForeground#ebdbb2
  • peekViewResult.matchHighlightBackground#504945
  • peekViewResult.selectionBackground#45858820
  • peekViewResult.selectionForeground#ebdbb2
  • peekViewTitle.background#3c383670
  • peekViewTitleDescription.foreground#bdae93
  • peekViewTitleLabel.foreground#ebdbb2
  • progressBar.background#fe8019
  • scrollbar.shadow#32302f
  • scrollbarSlider.activeBackground#96D3BC
  • scrollbarSlider.background#50494599
  • scrollbarSlider.hoverBackground#665c54
  • selection.background#96D3BC80
  • sideBar.background#32302f
  • sideBar.border#3c3836
  • sideBar.foreground#d5c4a1
  • sideBarSectionHeader.background#32302f00
  • sideBarSectionHeader.foreground#ebdbb2
  • sideBarTitle.foreground#ebdbb2
  • statusBar.background#32302f
  • statusBar.border#3c3836
  • statusBar.debuggingBackground#fe8019
  • statusBar.debuggingBorder#32302f00
  • statusBar.debuggingForeground#32302f
  • statusBar.foreground#ebdbb2
  • statusBar.noFolderBackground#32302f
  • statusBar.noFolderBorder#32302f00
  • tab.activeBackground#504945
  • tab.activeBorder#fe8019
  • tab.activeForeground#ebdbb2
  • tab.border#32302f00
  • tab.inactiveBackground#32302f
  • tab.inactiveForeground#a89984
  • tab.unfocusedActiveBorder#32302f00
  • tab.unfocusedActiveForeground#a89984
  • tab.unfocusedInactiveForeground#928374
  • terminal.ansiBlack#3c3836
  • terminal.ansiBlue#00cbd6
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#96d3bc
  • terminal.ansiBrightCyan#fe8019
  • terminal.ansiBrightGreen#a9cf2d
  • terminal.ansiBrightMagenta#fd5380
  • terminal.ansiBrightRed#fb4934
  • terminal.ansiBrightWhite#ebdbb2
  • terminal.ansiBrightYellow#fabd2f
  • terminal.ansiCyan#689d6a
  • terminal.ansiGreen#98971a
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#cc241d
  • terminal.ansiWhite#a89984
  • terminal.ansiYellow#d79921
  • terminal.background#32302f
  • terminal.foreground#ebdbb2
  • textLink.activeForeground#00cbd6
  • textLink.foreground#96d3bc
  • titleBar.activeBackground#32302f
  • titleBar.activeForeground#ebdbb2
  • titleBar.inactiveBackground#32302f
  • widget.shadow#32302f30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ebdbb2
emphasisitalic
strongbold
header#00cbd6
comment, punctuation.definition.comment#928374italic
constant, support.constant, variable.arguments#FCF153
constant.rgb-value#ebdbb2
entity.name.selector#fe8019
entity.other.attribute-name#fd8515
entity.name.tag.block.any.html, entity.name.tag.html, entity.name.tag.other.html, entity.name.tag.inline.any.html, entity.name.tag.html#00cbd6
source.css.scss, entity.name.tag#fd8515
invalid, invalid.illegal#cc241d
invalid.deprecated#b16286
meta.selector#fe8019
meta.preprocessor#fe8019
meta.preprocessor.string#a9cf2d
meta.preprocessor.numeric#a9cf2d
meta.header.diff#fe8019
storage#fb4934
storage.type, storage.modifier#da87fa
string#a9cf2d
string.tag#a9cf2d
string.value#a9cf2d
string.regexp#fe8019
string.escape#fb4934
string.quasi#fe8019
string.entity#a9cf2d
object#ebdbb2
module.node#96d3bc
support.type.property-name#96d3bc
keyword#fb4934
keyword.control#fb4934
keyword.control.module#fe8019
keyword.control.less#d79921
keyword.operator#fe8019
keyword.operator.new#fe8019
keyword.other.unit#a9cf2d
metatag.php#fe8019
support.function.git-rebase#689d6a
constant.sha.git-rebase#a9cf2d
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class#fabd2f
variable.this, support.variable#FCF153
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type#fabd2f
entity.function, entity.name.function.static#fe8019
entity.name.function.function-call#fe8019
support.function.builtin#fe8019
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#689d6a
brace#d5c4a1
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder, source.css.scss, support.constant#96d3bc
prototype#FCF153
punctuation#a89984
punctuation.quoted#ebdbb2
punctuation.quasi#fb4934
*url*, *link*, *uri*underline
meta.function.python, entity.name.function.python#fe8019
storage.type.function.python, storage.modifier.declaration, storage.type.class.python, storage.type.string.python#fb4934
storage.type.function.async.python#fb4934
meta.function-call.generic#96d3bc
meta.function-call.arguments#d5c4a1
entity.name.function.decorator#fabd2f
constant.other.caps
keyword.operator.logical#fb4934
punctuation.definition.logical-expression#fe8019
string.interpolated.dollar.shell, string.interpolated.backtick.shell#fe8019
keyword.control.directive#fe8019
support.function.C99#fabd2f
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs#a9cf2d
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs#fe8019
keyword.other.this.cs, keyword.other.base.cs#FCF153
meta.scope.prerequisites#fabd2f
entity.name.function.target#a9cf2d
storage.modifier.import.java, storage.modifier.package.java#bdae93
keyword.other.import.java, keyword.other.package.java#fe8019
storage.type.java#fabd2f
storage.type.annotation#96d3bc
keyword.other.documentation.javadoc#fe8019
comment.block.javadoc variable.parameter.java#a9cf2d
source.java variable.other.object, source.java variable.other.definition.java#ebdbb2
meta.function-parameters.lisp#fabd2f
markup.underlineunderline
string.other.link.title.markdown#928374underline
markup.underline.link#FCF153
markup.bold#fe8019bold
markup.heading#fe8019
markup.italicitalic
markup.inserted#a9cf2d
markup.deleted#d65d0e
markup.changed#fe8019
markup.punctuation.quote.beginning#98971a
markup.punctuation.list.beginning#96d3bc
markup.inline.raw, markup.fenced_code.block#fe8019
string.quoted.double.json#a9cf2d
source.json meta.structure.dictionary.json support.type.property-name.json#fe8019
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#96d3bc
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#da87fa
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a9cf2d
entity.other.attribute-name.css#fe8019
source.css meta.selector#ebdbb2
support.type.property-name.css#fe8019
entity.other.attribute-name.class#a9cf2d
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#fb4934
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss, variable#13cdb7
punctuation.definition.tag#00FF99
source.js variable.language#fe8019
source.ts variable.language#fe8019
source.go storage.type#fabd2f
source.go entity.name.import#a9cf2d
source.go keyword.package, source.go keyword.import#fe8019
source.go keyword.interface, source.go keyword.struct#96d3bc
source.go entity.name.type#ebdbb2
source.go entity.name.function#FCF153
keyword.control.cucumber.table#96d3bc
source.reason string.double, source.reason string.regexp#a9cf2d
source.reason keyword.control.less#fe8019
source.reason entity.name.function#96d3bc
source.reason support.property-value, source.reason entity.name.filename#fe8019
source.powershell variable.other.member.powershell#fe8019
source.powershell support.function.powershell#fabd2f
source.powershell support.function.attribute.powershell#bdae93
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#fe8019