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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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