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#eee9c7
  • activityBar.border#e4ddbe
  • activityBar.foreground#443633
  • activityBarBadge.background#6195c5
  • activityBarBadge.foreground#e4ddbe
  • badge.background#8e648c
  • badge.foreground#eee9c7
  • button.background#6195c580
  • button.foreground#443633
  • button.hoverBackground#6195c560
  • debugToolBar.background#eee9c7
  • diffEditor.insertedTextBackground#437d6530
  • diffEditor.removedTextBackground#9d001230
  • dropdown.background#eee9c7
  • dropdown.border#e4ddbe
  • dropdown.foreground#443633
  • editor.background#eee9c7
  • editor.findMatchBackground#3f76a470
  • editor.findMatchHighlightBackground#d0510030
  • editor.findRangeHighlightBackground#3f76a470
  • editor.foreground#443633
  • editor.hoverHighlightBackground#539aae50
  • editor.lineHighlightBackground#e4ddbe60
  • editor.lineHighlightBorder#e4ddbe00
  • editor.selectionBackground#539aae40
  • editor.selectionHighlightBackground#d88e1c40
  • editorBracketHighlight.foreground1#af82ab
  • editorBracketHighlight.foreground2#6195c5
  • editorBracketHighlight.foreground3#539aae
  • editorBracketHighlight.foreground4#629c84
  • editorBracketHighlight.foreground5#fdae40
  • editorBracketHighlight.foreground6#f6711d
  • editorBracketHighlight.unexpectedBracket.foreground#c3302c
  • editorBracketMatch.background#90857880
  • editorBracketMatch.border#eee9c700
  • editorCodeLens.foreground#7c706690
  • editorCursor.foreground#443633
  • editorError.foreground#c3302c
  • editorGroup.border#e4ddbe
  • editorGroup.dropBackground#e4ddbe60
  • editorGroupHeader.noTabsBackground#e4ddbe
  • editorGroupHeader.tabsBackground#eee9c7
  • editorGroupHeader.tabsBorder#e4ddbe
  • editorGutter.addedBackground#437d65
  • editorGutter.background#eee9c700
  • editorGutter.deletedBackground#9d0012
  • editorGutter.modifiedBackground#3f76a4
  • editorHoverWidget.background#eee9c7
  • editorHoverWidget.border#e4ddbe
  • editorInfo.foreground#6195c5
  • editorLineNumber.foreground#b8b09b
  • editorLink.activeForeground#443633
  • editorOverviewRuler.addedForeground#3f76a4
  • editorOverviewRuler.border#eee9c700
  • editorOverviewRuler.commonContentForeground#908578
  • editorOverviewRuler.currentContentForeground#6195c5
  • editorOverviewRuler.deletedForeground#3f76a4
  • editorOverviewRuler.errorForeground#9d0012
  • editorOverviewRuler.findMatchForeground#695c55
  • editorOverviewRuler.incomingContentForeground#539aae
  • editorOverviewRuler.infoForeground#8e648c
  • editorOverviewRuler.modifiedForeground#3f76a4
  • editorOverviewRuler.rangeHighlightForeground#695c55
  • editorOverviewRuler.selectionHighlightForeground#b8b09b
  • editorOverviewRuler.warningForeground#fdae40
  • editorOverviewRuler.wordHighlightForeground#b8b09b
  • editorOverviewRuler.wordHighlightStrongForeground#b8b09b
  • editorRuler.foreground#7c706640
  • editorSuggestWidget.background#eee9c7
  • editorSuggestWidget.border#e4ddbe
  • editorSuggestWidget.foreground#443633
  • editorSuggestWidget.highlightForeground#539aae
  • editorSuggestWidget.selectedBackground#e4ddbe60
  • editorWarning.foreground#fdae40
  • editorWhitespace.foreground#7c706620
  • editorWidget.background#eee9c7
  • editorWidget.border#e4ddbe
  • errorForeground#9d0012
  • extensionButton.prominentBackground#437d6580
  • extensionButton.prominentHoverBackground#437d6530
  • focusBorder#e4ddbe
  • foreground#443633
  • gitDecoration.conflictingResourceForeground#af82ab
  • gitDecoration.deletedResourceForeground#c3302c
  • gitDecoration.ignoredResourceForeground#a39a89
  • gitDecoration.modifiedResourceForeground#fdae40
  • gitDecoration.untrackedResourceForeground#629c84
  • input.background#44363305
  • input.border#e4ddbe
  • input.foreground#443633
  • input.placeholderForeground#44363360
  • inputOption.activeBorder#44363360
  • inputValidation.errorBackground#c3302c80
  • inputValidation.errorBorder#9d0012
  • inputValidation.infoBackground#6195c580
  • inputValidation.infoBorder#3f76a4
  • inputValidation.warningBackground#fdae4080
  • inputValidation.warningBorder#d88e1c
  • list.activeSelectionBackground#e4ddbe80
  • list.activeSelectionForeground#d05100
  • list.dropBackground#e4ddbe
  • list.focusBackground#e4ddbe
  • list.focusForeground#443633
  • list.highlightForeground#539aae
  • list.hoverBackground#e4ddbe80
  • list.hoverForeground#564844
  • list.inactiveSelectionBackground#e4ddbe80
  • list.inactiveSelectionForeground#f6711d
  • menu.border#e4ddbe
  • menu.separatorBackground#e4ddbe
  • merge.border#eee9c700
  • merge.currentContentBackground#6195c520
  • merge.currentHeaderBackground#6195c540
  • merge.incomingContentBackground#539aae20
  • merge.incomingHeaderBackground#539aae40
  • notebook.cellBorderColor#a39a89
  • notebook.cellEditorBackground#e4ddbe
  • notebook.focusedCellBorder#695c55
  • notebook.focusedEditorBorder#a39a89
  • panel.border#e4ddbe
  • panelTitle.activeForeground#443633
  • peekView.border#e4ddbe
  • peekViewEditor.background#e4ddbe70
  • peekViewEditor.matchHighlightBackground#cdc7ac
  • peekViewEditorGutter.background#e4ddbe70
  • peekViewResult.background#e4ddbe70
  • peekViewResult.fileForeground#443633
  • peekViewResult.lineForeground#443633
  • peekViewResult.matchHighlightBackground#cdc7ac
  • peekViewResult.selectionBackground#6195c520
  • peekViewResult.selectionForeground#443633
  • peekViewTitle.background#e4ddbe70
  • peekViewTitleDescription.foreground#695c55
  • peekViewTitleLabel.foreground#443633
  • progressBar.background#539aae
  • scrollbar.shadow#eee9c7
  • scrollbarSlider.activeBackground#539aae
  • scrollbarSlider.background#cdc7ac99
  • scrollbarSlider.hoverBackground#b8b09b
  • selection.background#539aae80
  • sideBar.background#eee9c7
  • sideBar.border#e4ddbe
  • sideBar.foreground#564844
  • sideBarSectionHeader.background#eee9c700
  • sideBarSectionHeader.foreground#443633
  • sideBarTitle.foreground#443633
  • statusBar.background#eee9c7
  • statusBar.border#e4ddbe
  • statusBar.debuggingBackground#d05100
  • statusBar.debuggingBorder#eee9c700
  • statusBar.debuggingForeground#eee9c7
  • statusBar.foreground#443633
  • statusBar.noFolderBackground#eee9c7
  • statusBar.noFolderBorder#eee9c700
  • tab.activeBackground#cdc7ac
  • tab.activeBorder#f6711d
  • tab.activeForeground#443633
  • tab.border#eee9c700
  • tab.inactiveBackground#eee9c7
  • tab.inactiveForeground#7c7066
  • tab.unfocusedActiveBorder#eee9c700
  • tab.unfocusedActiveForeground#7c7066
  • tab.unfocusedInactiveForeground#908578
  • terminal.ansiBlack#e4ddbe
  • terminal.ansiBlue#6195c5
  • terminal.ansiBrightBlack#908578
  • terminal.ansiBrightBlue#3f76a4
  • terminal.ansiBrightCyan#307b8e
  • terminal.ansiBrightGreen#437d65
  • terminal.ansiBrightMagenta#8e648c
  • terminal.ansiBrightRed#9d0012
  • terminal.ansiBrightWhite#443633
  • terminal.ansiBrightYellow#d88e1c
  • terminal.ansiCyan#539aae
  • terminal.ansiGreen#629c84
  • terminal.ansiMagenta#af82ab
  • terminal.ansiRed#c3302c
  • terminal.ansiWhite#7c7066
  • terminal.ansiYellow#fdae40
  • terminal.background#eee9c7
  • terminal.foreground#443633
  • textLink.activeForeground#6195c5
  • textLink.foreground#3f76a4
  • titleBar.activeBackground#eee9c7
  • titleBar.activeForeground#443633
  • titleBar.inactiveBackground#eee9c7
  • widget.shadow#eee9c730

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#443633
emphasisitalic
strongbold
header#6195c5
comment, punctuation.definition.comment#908578italic
constant, support.constant, variable.arguments#8e648c
constant.rgb-value#443633
entity.name.selector#307b8e
entity.other.attribute-name#d88e1c
entity.name.tag, punctuation.tag#307b8e
invalid, invalid.illegal#c3302c
invalid.deprecated#af82ab
meta.selector#307b8e
meta.preprocessor#d05100
meta.preprocessor.string#437d65
meta.preprocessor.numeric#437d65
meta.header.diff#d05100
storage#9d0012
storage.type, storage.modifier#d05100
string#437d65
string.tag#437d65
string.value#437d65
string.regexp#d05100
string.escape#9d0012
string.quasi#307b8e
string.entity#437d65
object#443633
module.node#3f76a4
support.type.property-name#539aae
keyword#9d0012
keyword.control#9d0012
keyword.control.module#307b8e
keyword.control.less#fdae40
keyword.operator#307b8e
keyword.operator.new#d05100
keyword.other.unit#437d65
metatag.php#d05100
support.function.git-rebase#539aae
constant.sha.git-rebase#437d65
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class#d88e1c
variable.this, support.variable#8e648c
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type#d88e1c
entity.function, entity.name.function.static#307b8e
entity.name.function.function-call#307b8e
support.function.builtin#d05100
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#539aae
brace#564844
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder#3f76a4
prototype#8e648c
punctuation#7c7066
punctuation.quoted#443633
punctuation.quasi#9d0012
*url*, *link*, *uri*underline
meta.function.python, entity.name.function.python#307b8e
storage.type.function.python, storage.modifier.declaration, storage.type.class.python, storage.type.string.python#9d0012
storage.type.function.async.python#9d0012
meta.function-call.generic#3f76a4
meta.function-call.arguments#564844
entity.name.function.decorator#d88e1cbold
constant.other.capsbold
keyword.operator.logical#9d0012
punctuation.definition.logical-expression#d05100
string.interpolated.dollar.shell, string.interpolated.backtick.shell#307b8e
keyword.control.directive#307b8e
support.function.C99#d88e1c
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs#437d65
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs#307b8e
keyword.other.this.cs, keyword.other.base.cs#8e648c
meta.scope.prerequisites#d88e1c
entity.name.function.target#437d65bold
storage.modifier.import.java, storage.modifier.package.java#695c55
keyword.other.import.java, keyword.other.package.java#307b8e
storage.type.java#d88e1c
storage.type.annotation#3f76a4bold
keyword.other.documentation.javadoc#307b8e
comment.block.javadoc variable.parameter.java#437d65bold
source.java variable.other.object, source.java variable.other.definition.java#443633
meta.function-parameters.lisp#d88e1c
markup.underlineunderline
string.other.link.title.markdown#908578underline
markup.underline.link#8e648c
markup.bold#d05100bold
markup.heading#d05100bold
markup.italicitalic
markup.inserted#437d65
markup.deleted#f6711d
markup.changed#d05100
markup.punctuation.quote.beginning#629c84
markup.punctuation.list.beginning#3f76a4
markup.inline.raw, markup.fenced_code.block#307b8e
string.quoted.double.json#3f76a4
source.json meta.structure.dictionary.json support.type.property-name.json#437d65
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#307b8e
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#8e648c
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#437d65
entity.other.attribute-name.css#d05100
source.css meta.selector#443633
support.type.property-name.css#d05100
entity.other.attribute-name.class#437d65
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#9d0012
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#f6711d
entity.name.tag.css
punctuation.definition.tag#3f76a4
text.html entity.name.tag, text.html punctuation.tag#307b8ebold
source.js variable.language#d05100
source.ts variable.language#d05100
source.go storage.type#d88e1c
source.go entity.name.import#437d65
source.go keyword.package, source.go keyword.import#307b8e
source.go keyword.interface, source.go keyword.struct#3f76a4
source.go entity.name.type#443633
source.go entity.name.function#8e648c
keyword.control.cucumber.table#3f76a4
source.reason string.double, source.reason string.regexp#437d65
source.reason keyword.control.less#307b8e
source.reason entity.name.function#3f76a4
source.reason support.property-value, source.reason entity.name.filename#d05100
source.powershell variable.other.member.powershell#d05100
source.powershell support.function.powershell#d88e1c
source.powershell support.function.attribute.powershell#695c55
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#d05100