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#382b36
  • activityBar.border#382b36
  • activityBar.foreground#fabc89
  • activityBarBadge.background#3a7476
  • activityBarBadge.foreground#fabc89
  • activityBarTop.background#382b36
  • activityBarTop.foreground#fabc89
  • badge.background#cc907d
  • badge.foreground#382b36
  • button.background#3a747680
  • button.foreground#fabc89
  • button.hoverBackground#3a747660
  • debugToolBar.background#382b36
  • diffEditor.insertedTextBackground#cc907d30
  • diffEditor.removedTextBackground#f6695330
  • dropdown.background#382b36
  • dropdown.border#382b36
  • dropdown.foreground#fabc89
  • editor.background#382b36
  • editor.findMatchBackground#76797c70
  • editor.findMatchHighlightBackground#f6695330
  • editor.findRangeHighlightBackground#76797c70
  • editor.foreground#fabc89
  • editor.hoverHighlightBackground#76797c50
  • editor.lineHighlightBackground#382b3660
  • editor.lineHighlightBorder#382b3600
  • editor.selectionBackground#76797c40
  • editor.selectionHighlightBackground#f7987040
  • editorBracketHighlight.foreground1#a27771
  • editorBracketHighlight.foreground2#3a7476
  • editorBracketHighlight.foreground3#76797c
  • editorBracketHighlight.foreground4#a27771
  • editorBracketHighlight.foreground5#fa805e
  • editorBracketHighlight.foreground6#c85647
  • editorBracketHighlight.unexpectedBracket.foreground#a8352e
  • editorBracketMatch.background#a2777180
  • editorBracketMatch.border#382b3600
  • editorCodeLens.foreground#cc907d90
  • editorCursor.foreground#fabc89
  • editorError.foreground#a8352e
  • editorGroup.border#382b36
  • editorGroup.dropBackground#382b3660
  • editorGroupHeader.noTabsBackground#382b36
  • editorGroupHeader.tabsBackground#382b36
  • editorGroupHeader.tabsBorder#382b36
  • editorGutter.addedBackground#cc907d
  • editorGutter.background#382b3600
  • editorGutter.deletedBackground#f66953
  • editorGutter.modifiedBackground#76797c
  • editorHoverWidget.background#382b36
  • editorHoverWidget.border#382b36
  • editorInfo.foreground#3a7476
  • editorLineNumber.foreground#7f625e
  • editorLink.activeForeground#fabc89
  • editorOverviewRuler.addedForeground#76797c
  • editorOverviewRuler.border#382b3600
  • editorOverviewRuler.commonContentForeground#a27771
  • editorOverviewRuler.currentContentForeground#3a7476
  • editorOverviewRuler.deletedForeground#76797c
  • editorOverviewRuler.errorForeground#f66953
  • editorOverviewRuler.findMatchForeground#cc907d
  • editorOverviewRuler.incomingContentForeground#76797c
  • editorOverviewRuler.infoForeground#cc907d
  • editorOverviewRuler.modifiedForeground#76797c
  • editorOverviewRuler.rangeHighlightForeground#cc907d
  • editorOverviewRuler.selectionHighlightForeground#7f625e
  • editorOverviewRuler.warningForeground#fa805e
  • editorOverviewRuler.wordHighlightForeground#7f625e
  • editorOverviewRuler.wordHighlightStrongForeground#7f625e
  • editorRuler.foreground#cc907d40
  • editorSuggestWidget.background#382b36
  • editorSuggestWidget.border#382b36
  • editorSuggestWidget.foreground#fabc89
  • editorSuggestWidget.highlightForeground#76797c
  • editorSuggestWidget.selectedBackground#382b3660
  • editorWarning.foreground#fa805e
  • editorWhitespace.foreground#cc907d20
  • editorWidget.background#382b36
  • editorWidget.border#382b36
  • errorForeground#f66953
  • extensionButton.prominentBackground#cc907d80
  • extensionButton.prominentHoverBackground#cc907d30
  • focusBorder#382b36
  • foreground#fabc89
  • gitDecoration.conflictingResourceForeground#a27771
  • gitDecoration.deletedResourceForeground#a8352e
  • gitDecoration.ignoredResourceForeground#7f625e
  • gitDecoration.modifiedResourceForeground#fa805e
  • gitDecoration.untrackedResourceForeground#a27771
  • icon.foreground#fabc89
  • input.background#fabc8905
  • input.border#382b36
  • input.foreground#fabc89
  • input.placeholderForeground#fabc8960
  • inputOption.activeBorder#fabc8960
  • inputValidation.errorBackground#a8352e
  • inputValidation.errorBorder#f66953
  • inputValidation.infoBackground#3a747680
  • inputValidation.infoBorder#76797c
  • inputValidation.warningBackground#fa805e80
  • inputValidation.warningBorder#f79870
  • list.activeSelectionBackground#382b3680
  • list.activeSelectionForeground#cc907d
  • list.dropBackground#382b36
  • list.focusBackground#382b36
  • list.focusForeground#fabc89
  • list.highlightForeground#76797c
  • list.hoverBackground#382b3680
  • list.hoverForeground#fabc89
  • list.inactiveSelectionBackground#382b3680
  • list.inactiveSelectionForeground#76797c
  • menu.border#382b36
  • menu.separatorBackground#382b36
  • merge.border#382b3600
  • merge.currentContentBackground#3a747620
  • merge.currentHeaderBackground#3a747640
  • merge.incomingContentBackground#76797c20
  • merge.incomingHeaderBackground#76797c40
  • notebook.cellBorderColor#7f625e
  • notebook.cellEditorBackground#1e202b
  • notebook.focusedCellBorder#cc907d
  • notebook.focusedEditorBorder#7f625e
  • panel.border#382b36
  • panelTitle.activeForeground#fabc89
  • peekView.border#382b36
  • peekViewEditor.background#382b3670
  • peekViewEditor.matchHighlightBackground#55424a
  • peekViewEditorGutter.background#382b3670
  • peekViewResult.background#382b3670
  • peekViewResult.fileForeground#fabc89
  • peekViewResult.lineForeground#fabc89
  • peekViewResult.matchHighlightBackground#55424a
  • peekViewResult.selectionBackground#3a747620
  • peekViewResult.selectionForeground#fabc89
  • peekViewTitle.background#382b3670
  • peekViewTitleDescription.foreground#cc907d
  • peekViewTitleLabel.foreground#fabc89
  • progressBar.background#76797c
  • scrollbar.shadow#382b36
  • scrollbarSlider.activeBackground#76797c
  • scrollbarSlider.background#55424a99
  • scrollbarSlider.hoverBackground#7f625e
  • selection.background#76797c80
  • sideBar.background#382b36
  • sideBar.border#382b36
  • sideBar.foreground#fabc89
  • sideBarSectionHeader.background#382b3600
  • sideBarSectionHeader.foreground#fabc89
  • sideBarTitle.foreground#fabc89
  • statusBar.background#382b36
  • statusBar.border#382b36
  • statusBar.debuggingBackground#f66953
  • statusBar.debuggingBorder#382b3600
  • statusBar.debuggingForeground#382b36
  • statusBar.foreground#fabc89
  • statusBar.noFolderBackground#382b36
  • statusBar.noFolderBorder#382b3600
  • tab.activeBackground#55424a
  • tab.activeBorder#76797c
  • tab.activeForeground#fabc89
  • tab.border#382b3600
  • tab.inactiveBackground#382b36
  • tab.inactiveForeground#cc907d
  • tab.unfocusedActiveBorder#382b3600
  • tab.unfocusedActiveForeground#cc907d
  • tab.unfocusedInactiveForeground#a27771
  • terminal.ansiBlack#382b36
  • terminal.ansiBlue#3a7476
  • terminal.ansiBrightBlack#a27771
  • terminal.ansiBrightBlue#76797c
  • terminal.ansiBrightCyan#cc907d
  • terminal.ansiBrightGreen#cc907d
  • terminal.ansiBrightMagenta#cc907d
  • terminal.ansiBrightRed#f66953
  • terminal.ansiBrightWhite#fabc89
  • terminal.ansiBrightYellow#f79870
  • terminal.ansiCyan#76797c
  • terminal.ansiGreen#a27771
  • terminal.ansiMagenta#a27771
  • terminal.ansiRed#a8352e
  • terminal.ansiWhite#cc907d
  • terminal.ansiYellow#fa805e
  • terminal.background#382b36
  • terminal.foreground#fabc89
  • textLink.activeForeground#3a7476
  • textLink.foreground#76797c
  • titleBar.activeBackground#382b36
  • titleBar.activeForeground#fabc89
  • titleBar.inactiveBackground#382b36
  • widget.shadow#382b3630

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#fabc89
emphasisitalic
strongbold
header#3a7476
comment, punctuation.definition.comment#a27771italic
constant, support.constant, variable.arguments#cc907d
constant.rgb-value#fabc89
entity.name.selector#cc907d
entity.other.attribute-name#f79870
entity.name.tag, punctuation.tag#cc907d
invalid, invalid.illegal#a8352e
invalid.deprecated#a27771
meta.selector#cc907d
meta.preprocessor#f66953
meta.preprocessor.string#cc907d
meta.preprocessor.numeric#cc907d
meta.header.diff#f66953
storage#f66953
storage.type, storage.modifier#f66953
string#cc907d
string.tag#cc907d
string.value#cc907d
string.regexp#f66953
string.escape#f66953
string.quasi#cc907d
string.entity#cc907d
object#fabc89
module.node#76797c
support.type.property-name#76797c
keyword#f66953
keyword.control#f66953
keyword.control.module#cc907d
keyword.control.less#fa805e
keyword.operator#cc907d
keyword.operator.new#f66953
keyword.other.unit#cc907d
metatag.php#f66953
support.function.git-rebase#76797c
constant.sha.git-rebase#cc907d
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class#f79870
variable.this, support.variable#cc907d
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type#f79870
entity.function, entity.name.function.static#cc907d
entity.name.function.function-call#cc907d
support.function.builtin#f66953
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#76797c
brace#fabc89
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder#76797c
prototype#cc907d
punctuation#cc907d
punctuation.quoted#fabc89
punctuation.quasi#f66953
*url*, *link*, *uri*underline
meta.function.python, entity.name.function.python#cc907d
storage.type.function.python, storage.modifier.declaration, storage.type.class.python, storage.type.string.python#f66953
storage.type.function.async.python#f66953
meta.function-call.generic#76797c
meta.function-call.arguments#fabc89
entity.name.function.decorator#f79870bold
constant.other.capsbold
keyword.operator.logical#f66953
punctuation.definition.logical-expression#f66953
string.interpolated.dollar.shell, string.interpolated.backtick.shell#cc907d
keyword.control.directive#cc907d
support.function.C99#f79870
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs#cc907d
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs#cc907d
keyword.other.this.cs, keyword.other.base.cs#cc907d
meta.scope.prerequisites#f79870
entity.name.function.target#cc907dbold
storage.modifier.import.java, storage.modifier.package.java#cc907d
keyword.other.import.java, keyword.other.package.java#cc907d
storage.type.java#f79870
storage.type.annotation#76797cbold
keyword.other.documentation.javadoc#cc907d
comment.block.javadoc variable.parameter.java#cc907dbold
source.java variable.other.object, source.java variable.other.definition.java#fabc89
meta.function-parameters.lisp#f79870
markup.underlineunderline
string.other.link.title.markdown#a27771underline
markup.underline.link#cc907d
markup.bold#f66953bold
markup.heading#f66953bold
markup.italicitalic
markup.inserted#cc907d
markup.deleted#c85647
markup.changed#f66953
markup.punctuation.quote.beginning#a27771
markup.punctuation.list.beginning#76797c
markup.inline.raw, markup.fenced_code.block#cc907d
string.quoted.double.json#76797c
source.json meta.structure.dictionary.json support.type.property-name.json#cc907d
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#cc907d
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#cc907d
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#cc907d
entity.other.attribute-name.css#f66953
source.css meta.selector#fabc89
support.type.property-name.css#f66953
entity.other.attribute-name.class#cc907d
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#f66953
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#c85647
entity.name.tag.css
punctuation.definition.tag#76797c
text.html entity.name.tag, text.html punctuation.tag#cc907dbold
source.js variable.language#f66953
source.ts variable.language#f66953
source.go storage.type#f79870
source.go entity.name.import#cc907d
source.go keyword.package, source.go keyword.import#cc907d
source.go keyword.interface, source.go keyword.struct#76797c
source.go entity.name.type#fabc89
source.go entity.name.function#cc907d
keyword.control.cucumber.table#76797c
source.reason string.double, source.reason string.regexp#cc907d
source.reason keyword.control.less#cc907d
source.reason entity.name.function#76797c
source.reason support.property-value, source.reason entity.name.filename#f66953
source.powershell variable.other.member.powershell#f66953
source.powershell support.function.powershell#f79870
source.powershell support.function.attribute.powershell#cc907d
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#f66953
PastelWater by AndreaCombette - VS Code Theme