Skip to main content
Coding Theme

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.activeBackground#343d46
  • activityBar.activeBorder#5fb3b3
  • activityBar.background#1b2b34
  • activityBar.border#1b2b34
  • activityBar.dropBackground#0b151b
  • activityBar.foreground#d8dee9
  • activityBar.inactiveForeground#65737e
  • activityBarBadge.background#fac863
  • activityBarBadge.foreground#1b2b34
  • badge.background#343d46
  • badge.foreground#d8dee9
  • breadcrumb.background#0f1c23
  • button.background#5fb3b3
  • button.hoverBackground#4e9b9b
  • debugExceptionWidget.background#1b2b34
  • debugExceptionWidget.border#d8dee9
  • debugToolBar.background#1b2b34
  • descriptionForeground#d8dee9
  • diffEditor.insertedTextBackground#99c79422
  • diffEditor.insertedTextBorder#99c794
  • diffEditor.removedTextBackground#ed6f7d22
  • diffEditor.removedTextBorder#ed6f7d
  • dropdown.background#0b151b
  • dropdown.border#5fb3b3
  • dropdown.foreground#ffffff
  • editor.background#1b2b34
  • editor.findMatchBackground#343d46
  • editor.findMatchBorder#5fb3b3ee
  • editor.findMatchHighlightBackground#5fb3b370
  • editor.findRangeHighlightBackground#5fb3b370
  • editor.foreground#fff
  • editor.hoverHighlightBackground#343d46
  • editor.inactiveSelectionBackground#1b2b34
  • editor.lineHighlightBackground#343d46
  • editor.lineHighlightBorder#343d46
  • editor.rangeHighlightBackground#343d46
  • editor.selectionBackground#4f5b66
  • editor.selectionForeground#fff
  • editor.selectionHighlightBackground#343d46
  • editor.selectionHighlightBorder#5fb3b3
  • editor.wordHighlightBackground#4f5b66
  • editor.wordHighlightStrongBackground#65737e
  • editorBracketMatch.background#343d46
  • editorBracketMatch.border#fac863
  • editorCodeLens.foreground#d8dee9
  • editorCursor.foreground#fac863
  • editorError.border#343d46
  • editorError.foreground#ed6f7d
  • editorGroup.border#343d46
  • editorGroup.dropBackground#343d46
  • editorGroup.emptyBackground#22363f
  • editorGroup.focusedEmptyBorder#5fb3b3
  • editorGroupHeader.noTabsBackground#1b2b34
  • editorGroupHeader.tabsBackground#1b2b34
  • editorGroupHeader.tabsBorder#343d46
  • editorGutter.addedBackground#99c794
  • editorGutter.background#1b2b34
  • editorGutter.deletedBackground#ed6f7d
  • editorGutter.modifiedBackground#fac863aa
  • editorHoverWidget.background#0b151b
  • editorHoverWidget.border#5fb3b3
  • editorIndentGuide.activeBackground#65737e
  • editorIndentGuide.background#343d46
  • editorLineNumber.foreground#4f5b66
  • editorLink.activeForeground#65737e
  • editorMarkerNavigation.background#343d46
  • editorMarkerNavigationError.background#ed6f7d
  • editorMarkerNavigationWarning.background#99c794
  • editorOverviewRuler.addedForeground#99c794aa
  • editorOverviewRuler.border#343d46
  • editorOverviewRuler.commonContentForeground#c5a5c5aa
  • editorOverviewRuler.currentContentForeground#5fb3b3aa
  • editorOverviewRuler.deletedForeground#ed6f7daa
  • editorOverviewRuler.errorForeground#ed6f7d
  • editorOverviewRuler.incomingContentForeground#5a9bcfbb
  • editorOverviewRuler.infoForeground#c5a5c5aa
  • editorOverviewRuler.modifiedForeground#fac863aa
  • editorOverviewRuler.warningContentForeground#fac863
  • editorPane.background#1b2b34
  • editorRuler.foreground#4f5b66
  • editorSuggestWidget.background#0b151b
  • editorSuggestWidget.border#5fb3b3
  • editorSuggestWidget.foreground#d8dee9
  • editorSuggestWidget.highlightForeground#fac863
  • editorSuggestWidget.selectedBackground#343d46
  • editorWarning.border#343d46
  • editorWarning.foreground#fac863
  • editorWhitespace.foreground#4f5b66
  • editorWidget.background#0f1c23
  • editorWidget.border#343d46
  • errorForeground#ed6f7d
  • extensionButton.prominentBackground#5fb3b3
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#4e9b9b
  • focusBorder#343d46
  • foreground#d8dee9
  • gitDecoration.conflictingResourceForeground#c5a5c5
  • gitDecoration.deletedResourceForeground#ed6f7d
  • gitDecoration.ignoredResourceForeground#4f5b66
  • gitDecoration.modifiedResourceForeground#fac863
  • gitDecoration.untrackedResourceForeground#5fb3b3
  • input.background#1b2b34
  • input.border#343d46
  • input.foreground#fac863
  • input.placeholderForeground#d8dee9
  • inputOption.activeBorder#343d46
  • inputValidation.errorBackground#ed6f7dbb
  • inputValidation.errorBorder#ed6f7d
  • inputValidation.errorForeground#fff
  • inputValidation.infoBackground#5fb3b3bb
  • inputValidation.infoBorder#5fb3b3
  • inputValidation.infoForeground#fff
  • inputValidation.warningBackground#fac863bb
  • inputValidation.warningBorder#fac863
  • inputValidation.warningForeground#fff
  • list.activeSelectionBackground#343d46
  • list.activeSelectionForeground#d8dee9
  • list.dropBackground#343d46
  • list.focusBackground#343d46
  • list.focusForeground#d8dee9
  • list.highlightForeground#fac863
  • list.hoverBackground#1b2b34
  • list.hoverForeground#d8dee9
  • list.inactiveSelectionBackground#343d46
  • list.inactiveSelectionForeground#d8dee9
  • merge.border#5fb3b3
  • merge.commonContentBackground#ffffff00
  • merge.commonHeaderBackground#ffffff00
  • merge.currentContentBackground#5fb3b370
  • merge.currentHeaderBackground#5fb3b3bb
  • merge.incomingContentBackground#5a9bcf70
  • merge.incomingHeaderBackground#5a9bcfbb
  • notification.background#343d46
  • notification.buttonBackground#5fb3b3
  • notification.buttonForeground#d8dee9
  • notification.buttonHoverBackground#4e9b9b
  • notification.errorBackground#ed6f7d
  • notification.errorForeground#d8dee9
  • notification.foreground#d8dee9
  • notification.infoBackground#99c794
  • notification.infoForeground#d8dee9
  • notification.warningBackground#fac863
  • notification.warningForeground#1b2b34
  • notificationCenter.border#5fb3b3
  • notificationCenterHeader.background#1b2b34
  • notificationCenterHeader.foreground#d8dee9
  • notificationLink.foreground#fac863
  • notifications.border#5fb3b3
  • notificationToast.border#5fb3b3
  • panel.background#1b2b34
  • panel.border#5fb3b3
  • panelTitle.activeBorder#fac863
  • panelTitle.activeForeground#5fb3b3
  • panelTitle.inactiveForeground#d8dee9
  • peekView.border#343d46
  • peekViewEditor.background#1b2b34
  • peekViewEditor.matchHighlightBackground#343d46
  • peekViewEditorGutter.background#1b2b34
  • peekViewResult.background#1b2b34
  • peekViewResult.fileForeground#d8dee9
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#343d46
  • peekViewResult.selectionBackground#343d46
  • peekViewResult.selectionForeground#fff
  • peekViewTitle.background#1b2b34
  • peekViewTitleDescription.foreground#d8dee9
  • peekViewTitleLabel.foreground#fac863
  • pickerGroup.border#0f1c23
  • pickerGroup.foreground#d8dee9
  • progressBar.background#5fb3b3
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#343d46aa
  • scrollbarSlider.background#4f5b66aa
  • scrollbarSlider.hoverBackground#343d46aa
  • selection.background#0d3a58
  • settings.dropdownListBorder#5fb3b3
  • settings.modifiedItemIndicator#5fb3b3
  • sideBar.background#0f1c23
  • sideBar.border#1b2b34
  • sideBar.foreground#65737E
  • sideBarSectionHeader.background#1b2b34
  • sideBarSectionHeader.foreground#d8dee9
  • sideBarTitle.foreground#d8dee9
  • statusBar.background#1b2b34
  • statusBar.border#343d46
  • statusBar.debuggingBackground#1b2b34
  • statusBar.debuggingForeground#4f5b66
  • statusBar.foreground#d8dee9
  • statusBar.noFolderBackground#1b2b34
  • statusBar.noFolderBorder#343d46
  • statusBar.noFolderForeground#d8dee9
  • statusBarItem.activeBackground#0f1c23
  • statusBarItem.hoverBackground#343d46
  • statusBarItem.prominentBackground#1b2b34
  • statusBarItem.prominentHoverBackground#343d46
  • tab.activeBackground#343d46
  • tab.activeBorder#5fb3b3
  • tab.activeForeground#fff
  • tab.activeModifiedBorder#5fb3b3
  • tab.border#0b151b
  • tab.inactiveBackground#1b2b34
  • tab.inactiveForeground#65737e
  • tab.inactiveModifiedBorder#5fb3b377
  • tab.unfocusedActiveForeground#d8dee9
  • tab.unfocusedActiveModifiedBorder#5fb3b3bb
  • tab.unfocusedInactiveForeground#d8dee9
  • tab.unfocusedInactiveModifiedBorder#5fb3b377
  • terminal.ansiBlack#000
  • terminal.ansiBlue#5a9bcf
  • terminal.ansiBrightBlack#65737e
  • terminal.ansiBrightBlue#8ABEE7
  • terminal.ansiBrightCyan#9BE2E2
  • terminal.ansiBrightGreen#C1DCBE
  • terminal.ansiBrightMagenta#EDCDED
  • terminal.ansiBrightRed#D6838C
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFDE9B
  • terminal.ansiCyan#5fb3b3
  • terminal.ansiGreen#99c794
  • terminal.ansiMagenta#c5a5c5
  • terminal.ansiRed#ed6f7d
  • terminal.ansiWhite#d8dee9
  • terminal.ansiYellow#fac863
  • terminal.background#1b2b34
  • terminal.foreground#d8dee9
  • terminalCursor.background#fac863
  • terminalCursor.foreground#fac863
  • textBlockQuote.background#343d46
  • textBlockQuote.border#5fb3b3
  • textCodeBlock.background#343d46
  • textLink.activeForeground#5a9bcf
  • textLink.foreground#5a9bcf
  • textPreformat.foreground#fac863
  • textSeparator.foreground#1b2b34
  • titleBar.activeBackground#1b2b34
  • titleBar.activeForeground#d8dee9
  • titleBar.border#1b2b34
  • titleBar.inactiveBackground#1b2b34
  • titleBar.inactiveForeground#65737e
  • walkThrough.embeddedEditorBackground#1b2b34
  • welcomePage.buttonBackground#343d46
  • welcomePage.buttonHoverBackground#0f1c23
  • widget.shadow#0f1c23
  • window.title${dirty} ${activeEditorMedium}${separator}${rootName}

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#65737eitalic
variable#FFFFFF—
keyword, storage.type, storage.modifier, storage.type.class.js#C792EA—
keyword.control#89DDFFitalic
constant.other.color, punctuation, keyword.operator, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#89DDFF—
keyword.operator.new, keyword.operator.expression#89DDFFitalic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ed6f7d—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#82AAFF—
support.other.variable, string.other.link#ed6f7d—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#F78C6C—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#C3E88D—
entity.name.class, entity.name.type, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#FAC863—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ed6f7d—
variable.language#c5a5c5italic
entity.name.method.js#D8DEE9—
meta.class-method.js entity.name.function.js, variable.function.constructor#D8DEE9—
entity.other.attribute-name#BB80B3italic
markup.inserted#99C794—
markup.deleted#ed6f7d—
markup.changed#BB80B3—
string.regexp#5FB3B3—
constant.character.escape#5FB3B3—
*url*, *link*, *uri*#5FB3B3underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5a9bcfitalic
source.js constant.other.object.key.js string.unquoted.label.js#ed6f7ditalic
source.css entity, source.scss entity#c5a5c5—
entity.name.tag, source.css entity.name, source.css entity.name.tag, source.scss entity.name.tag, source.css entity.name.tag entity.name.tag, source.scss entity.name.tag entity.name.tag#ed6f7d—
source.css support#fac863—
source.css constant, source.css support.constant#eb9a6d—
source.css string, source.css punctuation.definition.string, source.scss string, source.scss punctuation.definition.string#99c794—
source.css variable#d8dee9—
text.html.basic entity.name#ed6f7d—
meta.tag.metadata.script.html entity.name.tag.html#ed6f7d—
text.html.basic entity.name.tag#ed6f7d—
source.js keyword#5fb3b3—
source.js entity, source.js entity.name.tag#ed6f7d—
source.js punctuation#5fb3b3—
source.js meta.block#d8dee9—
source.js storage.type.function#c5a5c5—
variable.language, entity.name.type.class.js#FF5370—
markup.changed#c5a5c5—
punctuation.definition.heading.markdown#d8dee9—
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#c5a5c5bold
meta.paragraph.markdown#d8dee9—
beginning.punctuation.definition.quote.markdown#5FB3B3—
markup.quote.markdown meta.paragraph.markdown#5a9bcfitalic
meta.separator.markdown#5FB3B3—
markup.bold.markdown#5FB3B3bold
markup.italic.markdown#5a9bcfitalic
beginning.punctuation.definition.list.markdown#5FB3B3—
string.other.link.title.markdown#99c794—
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown#99c794—
markup.underline.link.markdown, markup.underline.link.image.markdown#5a9bcf—
fenced_code.block.language, markup.inline.raw.markdown#eb9a6d—
fenced_code.block.language, markup.inline.raw.markdown#5a9bcf—
source.ts entity.name.type#fac863—
source.ts keyword#c5a5c5—
source.ts punctuation.definition.parameters#5fb3b3—
meta.arrow.ts punctuation.definition.parameters#5fb3b3—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#FAC863—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#c5a5c5—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#D8DEE9—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5a9bcf—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#AB7967—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#ed6f7d—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#eb9a6d—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#FAC863—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#c5a5c5—
modifier, this, comment, storage.modifier.js, entity.other.attribute-name.js—italic
Daark by Sam Hinshaw - VS Code Theme