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#353d42
  • activityBar.border#353d42
  • activityBar.dropBorder#353d42
  • activityBar.foreground#cabfa4
  • activityBarBadge.background#458588
  • activityBarBadge.foreground#cabfa4
  • badge.background#d3869b
  • badge.foreground#353d42
  • button.background#45858880
  • button.foreground#cabfa4
  • button.hoverBackground#45858860
  • debugToolBar.background#353d42
  • diffEditor.insertedTextBackground#9bb37a30
  • diffEditor.removedTextBackground#dc7b7c30
  • dropdown.background#353d42
  • dropdown.border#3d474d
  • dropdown.foreground#cabfa4
  • editor.background#2c3338
  • editor.findMatchBackground#83a59870
  • editor.findMatchHighlightBackground#dd947230
  • editor.findRangeHighlightBackground#83a59870
  • editor.foreground#cabfa4
  • editor.hoverHighlightBackground#689d6a50
  • editor.lineHighlightBackground#494f3f60
  • editor.lineHighlightBorder#555c4a60
  • editor.selectionBackground#689d6a40
  • editor.selectionHighlightBackground#d4b77c40
  • editorBracketHighlight.foreground1#b16286
  • editorBracketHighlight.foreground2#458588
  • editorBracketHighlight.foreground3#689d6a
  • editorBracketHighlight.foreground4#98971a
  • editorBracketHighlight.foreground5#d79921
  • editorBracketHighlight.foreground6#d65d0e
  • editorBracketHighlight.unexpectedBracket.foreground#cc241d
  • editorBracketMatch.background#92837480
  • editorBracketMatch.border#353d4200
  • editorCodeLens.foreground#a8998490
  • editorCursor.foreground#cabfa4
  • editorError.foreground#cc241d
  • editorGroup.border#3d474d
  • editorGroup.dropBackground#2c333860
  • editorGroup.emptyBackground#2c3338
  • editorGroupHeader.noTabsBackground#353d42
  • editorGroupHeader.tabsBackground#353d42
  • editorGroupHeader.tabsBorder#3d474d
  • editorGutter.addedBackground#9bb37a
  • editorGutter.background#353d4200
  • editorGutter.deletedBackground#dc7b7c
  • editorGutter.modifiedBackground#83a598
  • editorHoverWidget.background#353d42
  • editorHoverWidget.border#30383d
  • editorIndentGuide.activeBackground1#a8998450
  • editorIndentGuide.background1#a8998420
  • editorInfo.foreground#458588
  • editorLineNumber.foreground#cabfa4
  • editorLink.activeForeground#cabfa4
  • editorOverviewRuler.addedForeground#83a598
  • editorOverviewRuler.border#353d4200
  • editorOverviewRuler.commonContentForeground#928374
  • editorOverviewRuler.currentContentForeground#458588
  • editorOverviewRuler.deletedForeground#83a598
  • editorOverviewRuler.errorForeground#dc7b7c
  • editorOverviewRuler.findMatchForeground#bdae93
  • editorOverviewRuler.incomingContentForeground#689d6a
  • editorOverviewRuler.infoForeground#d3869b
  • editorOverviewRuler.modifiedForeground#83a598
  • editorOverviewRuler.rangeHighlightForeground#bdae93
  • editorOverviewRuler.selectionHighlightForeground#665c54
  • editorOverviewRuler.warningForeground#d79921
  • editorOverviewRuler.wordHighlightForeground#665c54
  • editorOverviewRuler.wordHighlightStrongForeground#665c54
  • editorRuler.foreground#a8998440
  • editorSuggestWidget.background#353d42
  • editorSuggestWidget.border#30383d
  • editorSuggestWidget.foreground#cabfa4
  • editorSuggestWidget.highlightForeground#689d6a
  • editorSuggestWidget.selectedBackground#5f697080
  • editorWarning.foreground#d79921
  • editorWhitespace.foreground#a8998420
  • editorWidget.background#353d42
  • editorWidget.border#30383d
  • errorForeground#dc7b7c
  • extensionButton.prominentBackground#9bb37a80
  • extensionButton.prominentHoverBackground#9bb37a30
  • focusBorder#465157
  • foreground#cabfa4
  • gitDecoration.conflictingResourceForeground#b16286
  • gitDecoration.deletedResourceForeground#cc241d
  • gitDecoration.ignoredResourceForeground#a79671
  • gitDecoration.modifiedResourceForeground#d79921
  • gitDecoration.untrackedResourceForeground#98971a
  • input.background#cabfa405
  • input.border#465157
  • input.foreground#cabfa4
  • input.placeholderForeground#cabfa460
  • inputOption.activeBorder#cabfa460
  • inputValidation.errorBackground#cc241d80
  • inputValidation.errorBorder#dc7b7c
  • inputValidation.infoBackground#45858880
  • inputValidation.infoBorder#83a598
  • inputValidation.warningBackground#d7992180
  • inputValidation.warningBorder#d4b77c
  • list.activeSelectionBackground#5f697080
  • list.activeSelectionForeground#9db579
  • list.dropBackground#5f6970
  • list.focusBackground#5f6970
  • list.focusForeground#cabfa4
  • list.highlightForeground#689d6a
  • list.hoverBackground#55606780
  • list.hoverForeground#d5c4a1
  • list.inactiveSelectionBackground#55606780
  • list.inactiveSelectionForeground#689d6a
  • merge.border#353d4200
  • merge.currentContentBackground#45858820
  • merge.currentHeaderBackground#45858840
  • merge.incomingContentBackground#689d6a20
  • merge.incomingHeaderBackground#689d6a40
  • notifications.background#353d42
  • notifications.foreground#cabfa4
  • notificationsErrorIcon.foreground#6e6f67
  • notificationsInfoIcon.foreground#6e6f67
  • notificationsWarningIcon.foreground#6e6f67
  • panel.border#3d474d
  • panelTitle.activeForeground#cabfa4
  • peekView.border#465157
  • peekViewEditor.background#262c3050
  • peekViewEditor.matchHighlightBackground#9db57930
  • peekViewEditorGutter.background#262c3050
  • peekViewResult.background#262c3050
  • peekViewResult.fileForeground#cabfa4
  • peekViewResult.matchHighlightBackground#9db57930
  • peekViewResult.selectionBackground#9db57930
  • peekViewResult.selectionForeground#9db57930
  • peekViewTitle.background#262c3050
  • peekViewTitleDescription.foreground#bdae93
  • peekViewTitleLabel.foreground#cabfa4
  • progressBar.background#88959e
  • scrollbar.shadow#353d42
  • scrollbarSlider.activeBackground#88959e
  • scrollbarSlider.background#444a4f99
  • scrollbarSlider.hoverBackground#586066
  • selection.background#88959e80
  • sideBar.background#353d42
  • sideBar.border#3d474d
  • sideBar.foreground#d5c4a1
  • sideBarSectionHeader.background#353d4200
  • sideBarSectionHeader.foreground#cabfa4
  • sideBarTitle.foreground#cabfa4
  • statusBar.background#353d42
  • statusBar.border#3d474d
  • statusBar.debuggingBackground#dd9472
  • statusBar.debuggingBorder#353d4200
  • statusBar.debuggingForeground#353d42
  • statusBar.foreground#cabfa4
  • statusBar.noFolderBackground#353d42
  • statusBar.noFolderBorder#353d4200
  • statusBarItem.prominentBackground#88959e
  • statusBarItem.prominentHoverBackground#88959e70
  • tab.activeBackground#504945
  • tab.activeBorder#689d6a
  • tab.activeForeground#cabfa4
  • tab.border#353d4200
  • tab.inactiveBackground#353d42
  • tab.inactiveForeground#a89984
  • tab.unfocusedActiveBorder#353d4200
  • tab.unfocusedActiveForeground#a89984
  • tab.unfocusedInactiveForeground#928374
  • terminal.ansiBlack#2c3338
  • terminal.ansiBlue#458588
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#83a598
  • terminal.ansiBrightCyan#9db579
  • terminal.ansiBrightGreen#9bb37a
  • terminal.ansiBrightMagenta#d3869b
  • terminal.ansiBrightRed#dc7b7c
  • terminal.ansiBrightWhite#cabfa4
  • terminal.ansiBrightYellow#d4b77c
  • terminal.ansiCyan#689d6a
  • terminal.ansiGreen#98971a
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#cc241d
  • terminal.ansiWhite#a89984
  • terminal.ansiYellow#d79921
  • terminal.background#353d42
  • terminal.foreground#cabfa4
  • textLink.activeForeground#458588
  • textLink.foreground#83a598
  • titleBar.activeBackground#353d42
  • titleBar.activeForeground#cabfa4
  • titleBar.inactiveBackground#353d42
  • widget.shadow#353d4230

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#458588
comment, punctuation.definition.comment#808D84italic
constant, support.constant, variable.arguments#D3869B
constant.rgb-value#CABFA4
entity.name.selector#9DB579
entity.other.attribute-name#D4B77C
entity.name.tag, punctuation.tag#9DB579
invalid, invalid.illegal#CC241D
invalid.deprecated#B16286
keyword.control.export#DD9472
meta.selector#9DB579
meta.preprocessor#DD9472
meta.preprocessor.string#9BB37A
meta.preprocessor.numeric#9BB37A
meta.header.diff#DD9472
storage#DC7B7C
storage.modifier#DD9472
string#9BB37A
string.tag#9BB37A
string.value#9BB37A
string.regexp#DD9472
string.escape#DC7B7C
string.quasi#9DB579
string.entity#9BB37A
object#CABFA4
module.node#83A598
support.type.property-name#689D6A
keyword#DC7B7C
keyword.control#DC7B7C
keyword.control.module#9DB579
keyword.control.less#D79921
keyword.operator#9DB579
keyword.operator.new#DD9472
keyword.other.unit#9BB37A
metatag.php#DD9472
support.function.git-rebase#689D6A
constant.sha.git-rebase#9BB37A
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class#D4B77C
variable.this, support.variable#D3869B
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type#D4B77C
storage.type.function, entity.function, entity.name.function.static#9DB579
entity.name.function.function-call#9DB579
support.function.builtin#DD9472
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#83A598
prototype#D3869B
storage.type.class#DC7B7C
punctuation#A89984
punctuation.quoted#CABFA4
punctuation.quasi#DC7B7C
*url*, *link*, *uri*underline
meta.function.python, entity.name.function.python#9DB579
storage.type.function.python, storage.modifier.declaration, storage.type.class.python#DC7B7C
meta.function-call.generic#83A598
meta.function-call.arguments#D5C4A1
entity.name.function.decorator#D4B77Cbold
constant.other.capsbold
keyword.operator.logical#DC7B7C
punctuation.definition.logical-expression#DD9472
string.inperpolated.dollar.shell#DD9472
string.interpolated.dollar.shell, string.interpolated.backtick.shell#9DB579
keyword.control.directive#9DB579
support.function.C99#D4B77C
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs#9BB37A
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs#9DB579
keyword.other.this.cs, keyword.other.base.cs#D3869B
meta.scope.prerequisites#D4B77C
entity.name.function.target#9BB37Abold
storage.modifier.import.java, storage.modifier.package.java#BDAE93
keyword.other.import.java, keyword.other.package.java#9DB579
storage.type.java#D4B77C
storage.type.annotation#83A598bold
keyword.other.documentation.javadoc#9DB579
comment.block.javadoc variable.parameter.java#9BB37Abold
source.java variable.other.object, source.java variable.other.definition.java#CABFA4
meta.function-parameters.lisp#D4B77C
markup.underlineunderline
string.other.link.title.markdown#928374underline
markup.underline.link#D3869B
markup.bold#DD9472bold
markup.heading#DD9472bold
markup.italicitalic
markup.inserted#9BB37A
markup.deleted#D65D0E
markup.changed#DD9472
markup.punctuation.quote.beginning#98971A
markup.punctuation.list.beginning#83A598
markup.inline.raw, markup.fenced_code.block#9DB579
string.quoted.double.json#83A598
source.json meta.structure.dictionary.json support.type.property-name.json#9BB37A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9DB579
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#D3869B
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#9BB37A
entity.other.attribute-name.css#DD9472
source.css meta.selector#CABFA4
support.type.property-name.css#DD9472
entity.other.attribute-name.class#9BB37A
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#DC7B7C
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#D65D0E
entity.name.tag.css
punctuation.definition.tag#83A598
text.html entity.name.tag, text.html punctuation.tag#9DB579bold
source.js variable.language#DD9472
source.ts variable.language#DD9472
source.go storage.type#D4B77C
source.go entity.name.import#9BB37A
source.go keyword.package, source.go keyword.import#9DB579
source.go keyword.interface, source.go keyword.struct#83A598
source.go entity.name.type#CABFA4
source.go entity.name.function#D3869B
keyword.control.cucumber.table#83A598
source.reason string.double, source.reason string.regexp#9BB37A
source.reason keyword.control.less#9DB579
source.reason entity.name.function#83A598
source.reason support.property-value, source.reason entity.name.filename#DD9472
source.powershell variable.other.member.powershell#DD9472
source.powershell support.function.powershell#D4B77C
source.powershell support.function.attribute.powershell#BDAE93
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#DD9472
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
Themes To Die For by Alec Larson - VS Code Theme