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#f9eac1
  • activityBar.border#f9d4a8
  • activityBar.dropBackground#f9eac1
  • activityBar.foreground#23334e
  • activityBarBadge.background#417283
  • activityBarBadge.foreground#f9d4a8
  • badge.background#845457
  • badge.foreground#f9eac1
  • button.background#41728380
  • button.foreground#23334e
  • button.hoverBackground#41728360
  • button.secondaryBackground#f9d4a880
  • button.secondaryForeground#23334e
  • button.secondaryHoverBackground#f9d4a8
  • debugToolBar.background#f9eac1
  • diffEditor.insertedTextBackground#84545730
  • diffEditor.removedTextBackground#75131e30
  • dropdown.background#f9eac1
  • dropdown.border#f9d4a8
  • dropdown.foreground#23334e
  • editor.background#f9eac1
  • editor.findMatchBackground#30597570
  • editor.findMatchHighlightBackground#ab203030
  • editor.findRangeHighlightBackground#30597570
  • editor.foreground#23334e
  • editor.hoverHighlightBackground#81878550
  • editor.lineHighlightBackground#f9d4a860
  • editor.lineHighlightBorder#f9d4a800
  • editor.selectionBackground#81878540
  • editor.selectionHighlightBackground#c44d4d40
  • editorBracketHighlight.foreground1#845457
  • editorBracketHighlight.foreground2#818785
  • editorBracketHighlight.foreground3#417283
  • editorBracketHighlight.foreground4#a77166
  • editorBracketHighlight.foreground5#ab2030
  • editorBracketHighlight.foreground6#c44d4d
  • editorBracketMatch.background#81878580
  • editorBracketMatch.border#f9eac100
  • editorCodeLens.foreground#84545790
  • editorCursor.foreground#23334e
  • editorError.foreground#da223a
  • editorGroup.background#f9d4a8
  • editorGroup.border#f9d4a8
  • editorGroup.dropBackground#f9d4a860
  • editorGroupHeader.noTabsBackground#f9d4a8
  • editorGroupHeader.tabsBackground#f9eac1
  • editorGroupHeader.tabsBorder#f9d4a8
  • editorGutter.addedBackground#845457
  • editorGutter.background#f9eac100
  • editorGutter.deletedBackground#75131e
  • editorGutter.modifiedBackground#305975
  • editorHoverWidget.background#f9eac1
  • editorHoverWidget.border#f9d4a8
  • editorIndentGuide.activeBackground#84545750
  • editorIndentGuide.background#84545720
  • editorInfo.foreground#417283
  • editorLineNumber.activeForeground#c44d4d
  • editorLineNumber.foreground#cbb39b
  • editorLink.activeForeground#23334e
  • editorOverviewRuler.addedForeground#305975
  • editorOverviewRuler.border#f9eac100
  • editorOverviewRuler.commonContentForeground#818785
  • editorOverviewRuler.currentContentForeground#417283
  • editorOverviewRuler.deletedForeground#305975
  • editorOverviewRuler.errorForeground#75131e
  • editorOverviewRuler.findMatchForeground#845457
  • editorOverviewRuler.incomingContentForeground#818785
  • editorOverviewRuler.infoForeground#845457
  • editorOverviewRuler.modifiedForeground#305975
  • editorOverviewRuler.rangeHighlightForeground#845457
  • editorOverviewRuler.selectionHighlightForeground#cbb39b
  • editorOverviewRuler.warningForeground#d9735b
  • editorOverviewRuler.wordHighlightForeground#cbb39b
  • editorOverviewRuler.wordHighlightStrongForeground#cbb39b
  • editorRuler.foreground#84545740
  • editorSuggestWidget.background#f9eac1
  • editorSuggestWidget.border#f9d4a8
  • editorSuggestWidget.foreground#23334e
  • editorSuggestWidget.highlightForeground#818785
  • editorSuggestWidget.selectedBackground#f9d4a860
  • editorWarning.foreground#d9735b
  • editorWhitespace.foreground#84545720
  • editorWidget.background#f9eac1
  • editorWidget.border#f9d4a8
  • errorForeground#75131e
  • extensionButton.prominentBackground#84545780
  • extensionButton.prominentHoverBackground#84545730
  • focusBorder#f9d4a8
  • foreground#23334e
  • gitDecoration.conflictingResourceForeground#a77166
  • gitDecoration.deletedResourceForeground#da223a
  • gitDecoration.ignoredResourceForeground#9b968c
  • gitDecoration.modifiedResourceForeground#d9735b
  • gitDecoration.untrackedResourceForeground#a77166
  • input.background#23334e05
  • input.border#f9d4a8
  • input.foreground#23334e
  • input.placeholderForeground#23334e60
  • inputOption.activeBorder#23334e60
  • inputValidation.errorBackground#da223a80
  • inputValidation.errorBorder#75131e
  • inputValidation.infoBackground#41728380
  • inputValidation.infoBorder#305975
  • inputValidation.warningBackground#d9735b80
  • inputValidation.warningBorder#c44d4d
  • list.activeSelectionBackground#f9d4a880
  • list.activeSelectionForeground#ab2030
  • list.dropBackground#f9d4a8
  • list.focusBackground#f9d4a8
  • list.focusForeground#23334e
  • list.highlightForeground#818785
  • list.hoverBackground#f9d4a880
  • list.hoverForeground#6d3746
  • list.inactiveSelectionBackground#f9d4a880
  • list.inactiveSelectionForeground#c44d4d
  • menu.separatorBackground#f9d4a8
  • merge.border#f9eac100
  • merge.currentContentBackground#41728320
  • merge.currentHeaderBackground#41728340
  • merge.incomingContentBackground#81878520
  • merge.incomingHeaderBackground#81878540
  • notification.background#f9eac1
  • notification.buttonBackground#cbb39b
  • notification.buttonForeground#23334e
  • notification.buttonHoverBackground#cbb39b50
  • notification.errorBackground#75131e
  • notification.errorForeground#f9eac1
  • notification.foreground#23334e
  • notification.infoBackground#305975
  • notification.infoForeground#f9eac1
  • notification.warningBackground#c44d4d
  • notification.warningForeground#f9eac1
  • notificationsErrorIcon.foreground#75131e
  • notificationsInfoIcon.foreground#9b968c
  • notificationsWarningIcon.foreground#f09162
  • panel.border#f9d4a8
  • panelTitle.activeForeground#23334e
  • peekView.border#f9d4a8
  • peekViewEditor.background#f9d4a850
  • peekViewEditorGutter.background#f9d4a850
  • peekViewResult.background#f9d4a850
  • peekViewResult.fileForeground#23334e
  • peekViewResult.matchHighlightBackground#41728330
  • peekViewResult.selectionBackground#41728330
  • peekViewResult.selectionForeground#41728330
  • peekViewTitle.background#f9d4a850
  • peekViewTitleDescription.foreground#845457
  • peekViewTitleLabel.foreground#23334e
  • progressBar.background#818785
  • scrollbar.shadow#f9eac1
  • scrollbarSlider.activeBackground#818785
  • scrollbarSlider.background#cbb39b99
  • scrollbarSlider.hoverBackground#cbb39b
  • selection.background#81878580
  • sideBar.background#f9eac1
  • sideBar.border#f9d4a8
  • sideBar.foreground#6d3746
  • sideBarSectionHeader.background#f9eac100
  • sideBarSectionHeader.foreground#23334e
  • sideBarTitle.foreground#23334e
  • statusBar.background#f9eac1
  • statusBar.border#f9d4a8
  • statusBar.debuggingBackground#ab2030
  • statusBar.debuggingBorder#f9eac100
  • statusBar.debuggingForeground#f9eac1
  • statusBar.foreground#23334e
  • statusBar.noFolderBackground#f9eac1
  • statusBar.noFolderBorder#f9eac100
  • statusBar.prominentBackground#818785
  • statusBar.prominentHoverBackground#81878570
  • symbolIcon.arrayForeground#305975
  • symbolIcon.booleanForeground#845457
  • symbolIcon.classForeground#d9735b
  • symbolIcon.colorForeground#845457
  • symbolIcon.constantForeground#417283
  • symbolIcon.constructorForeground#845457
  • symbolIcon.enumeratorForeground#845457
  • symbolIcon.enumeratorMemberForeground#417283
  • symbolIcon.eventForeground#d9735b
  • symbolIcon.fieldForeground#845457
  • symbolIcon.fileForeground#845457
  • symbolIcon.folderForeground#845457
  • symbolIcon.functionForeground#845457
  • symbolIcon.interfaceForeground#d9735b
  • symbolIcon.keyForeground#845457
  • symbolIcon.keywordForeground#75131e
  • symbolIcon.methodForeground#845457
  • symbolIcon.moduleForeground#845457
  • symbolIcon.namespaceForeground#845457
  • symbolIcon.nullForeground#417283
  • symbolIcon.numberForeground#845457
  • symbolIcon.objectForeground#845457
  • symbolIcon.operatorForeground#ab2030
  • symbolIcon.packageForeground#845457
  • symbolIcon.propertyForeground#417283
  • symbolIcon.referenceForeground#305975
  • symbolIcon.snippetForeground#845457
  • symbolIcon.stringForeground#845457
  • symbolIcon.structForeground#d9735b
  • symbolIcon.textForeground#845457
  • symbolIcon.typeParameterForeground#417283
  • symbolIcon.unitForeground#845457
  • symbolIcon.variableForeground#305975
  • tab.activeBackground#cbb39b
  • tab.activeBorder#c44d4d
  • tab.activeForeground#23334e
  • tab.border#f9eac100
  • tab.inactiveBackground#f9eac1
  • tab.inactiveForeground#845457
  • tab.unfocusedActiveBorder#f9eac100
  • tab.unfocusedActiveForeground#845457
  • tab.unfocusedInactiveForeground#818785
  • terminal.ansiBlack#f9d4a8
  • terminal.ansiBlue#417283
  • terminal.ansiBrightBlack#818785
  • terminal.ansiBrightBlue#305975
  • terminal.ansiBrightCyan#417283
  • terminal.ansiBrightGreen#845457
  • terminal.ansiBrightMagenta#845457
  • terminal.ansiBrightRed#75131e
  • terminal.ansiBrightWhite#23334e
  • terminal.ansiBrightYellow#c44d4d
  • terminal.ansiCyan#818785
  • terminal.ansiGreen#a77166
  • terminal.ansiMagenta#a77166
  • terminal.ansiRed#da223a
  • terminal.ansiWhite#845457
  • terminal.ansiYellow#d9735b
  • terminal.background#f9eac1
  • terminal.foreground#23334e
  • textLink.activeForeground#417283
  • textLink.foreground#305975
  • titleBar.activeBackground#f9eac1
  • titleBar.activeForeground#23334e
  • titleBar.inactiveBackground#f9eac1
  • widget.shadow#f9eac130

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#845457
#23334e
emphasisitalic
strongbold
header#417283
comment, punctuation.definition.comment#818785italic
constant, support.constant, variable.arguments#845457
constant.rgb-value#23334e
entity.name.selector#417283
entity.other.attribute-name#c44d4d
entity.name.tag, punctuation.tag#417283
invalid, invalid.illegal#da223a
invalid.deprecated#a77166
meta.selector#417283
meta.preprocessor#ab2030
meta.preprocessor.string#845457
meta.preprocessor.numeric#845457
meta.header.diff#ab2030
storage#75131e
storage.modifier#ab2030
string#845457
string.tag#845457
string.value#845457
string.regexp#ab2030
string.escape#75131e
string.quasi#417283
string.entity#845457
object#23334e
module.node#305975
support.type.property-name#818785
keyword#75131e
keyword.control#75131e
keyword.control.module#417283
keyword.control.less#d9735b
keyword.operator#417283
keyword.operator.new#ab2030
keyword.other.unit#845457
metatag.php#ab2030
support.function.git-rebase#818785
constant.sha.git-rebase#845457
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class#c44d4d
variable.this, support.variable#845457
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type#c44d4d
storage.type.function, entity.function, entity.name.function.static#417283
entity.name.function.function-call#417283
support.function.builtin#ab2030
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#818785
brace#6d3746
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder#305975
prototype#845457
storage.type.class#75131e
punctuation#845457
punctuation.quoted#23334e
punctuation.quasi#75131e
*url*, *link*, *uri*underline
meta.function.python, entity.name.function.python#417283
storage.type.function.python, storage.modifier.declaration, storage.type.class.python#75131e
meta.function-call.generic#305975
meta.function-call.arguments#6d3746
entity.name.function.decorator#c44d4dbold
constant.other.capsbold
keyword.operator.logical#75131e
punctuation.definition.logical-expression#ab2030
string.inperpolated.dollar.shell#ab2030
string.interpolated.dollar.shell, string.interpolated.backtick.shell#417283
keyword.control.directive#417283
support.function.C99#c44d4d
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs#845457
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs#417283
keyword.other.this.cs, keyword.other.base.cs#845457
meta.scope.prerequisites#c44d4d
entity.name.function.target#845457bold
storage.modifier.import.java, storage.modifier.package.java#845457
keyword.other.import.java, keyword.other.package.java#417283
storage.type.java#c44d4d
storage.type.annotation#305975bold
keyword.other.documentation.javadoc#417283
comment.block.javadoc variable.parameter.java#845457bold
source.java variable.other.object, source.java variable.other.definition.java#23334e
meta.function-parameters.lisp#c44d4d
markup.underlineunderline
string.other.link.title.markdown#818785underline
markup.underline.link#845457
markup.bold#ab2030bold
markup.heading#ab2030bold
markup.italicitalic
markup.inserted#845457
markup.deleted#c44d4d
markup.changed#ab2030
markup.punctuation.quote.beginning#a77166
markup.punctuation.list.beginning#305975
markup.inline.raw, markup.fenced_code.block#417283
string.quoted.double.json#305975
source.json meta.structure.dictionary.json support.type.property-name.json#845457
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#417283
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#845457
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#845457
entity.other.attribute-name.css#ab2030
source.css meta.selector#23334e
support.type.property-name.css#ab2030
entity.other.attribute-name.class#845457
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#75131e
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#c44d4d
entity.name.tag.cssnormal
punctuation.definition.tag#305975
text.html entity.name.tag, text.html punctuation.tag#417283bold
source.js variable.language#ab2030
source.ts variable.language#ab2030
source.go storage.type#c44d4d
source.go entity.name.import#845457
source.go keyword.package, source.go keyword.import#417283
source.go keyword.interface, source.go keyword.struct#305975
source.go entity.name.type#23334e
source.go entity.name.function#845457
keyword.control.cucumber.table#305975
source.reason string.double, source.reason string.regexp#845457
source.reason keyword.control.less#417283
source.reason entity.name.function#305975
source.reason support.property-value, source.reason entity.name.filename#ab2030
source.powershell variable.other.member.powershell#ab2030
source.powershell support.function.powershell#c44d4d
source.powershell support.function.attribute.powershell#845457
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#ab2030
SmoothBurn by AndreaCombette - VS Code Theme