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#f7f7f7
  • activityBar.foreground#0b0d12
  • activityBarBadge.background#0c5092
  • activityBarBadge.foreground#ffffff
  • badge.background#0c5092
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#0c5092
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#0b0d12
  • breadcrumb.foreground#2e3036
  • breadcrumbPicker.background#f7f7f7
  • button.background#0c5092
  • button.foreground#ffffff
  • button.hoverBackground#0c447b
  • checkbox.background#f2f2f2
  • checkbox.border#bce1e9
  • contrastActiveBorder#0c5092
  • contrastBorder#acadae
  • debugConsole.errorForeground#9e0213
  • debugConsole.infoForeground#0c5092
  • debugConsole.warningForeground#6f5305
  • debugIcon.breakpointForeground#9e0213
  • diffEditor.insertedLineBackground#1f600c0a
  • diffEditor.insertedTextBackground#1f600c13
  • diffEditor.removedLineBackground#9e02130a
  • diffEditor.removedTextBackground#9e021313
  • dropdown.background#f7f7f7
  • dropdown.border#bce1e9
  • dropdown.foreground#0b0d12
  • dropdown.listBackground#f7f7f7
  • editor.background#ffffff
  • editor.findMatchBackground#bce1e9
  • editor.findMatchHighlightBackground#f2f2f2
  • editor.foreground#0b0d12
  • editor.lineHighlightBackground#f2f2f2
  • editor.selectionBackground#bce1e9
  • editorBracketHighlight.foreground1#6f5305
  • editorBracketHighlight.foreground2#574084
  • editorBracketHighlight.foreground3#0c5092
  • editorBracketHighlight.foreground4#1f600c
  • editorBracketHighlight.foreground5#7a3d04
  • editorBracketHighlight.foreground6#015d54
  • editorBracketHighlight.unexpectedBracket.foreground#9e0213
  • editorCursor.background#ffffff
  • editorCursor.foreground#0c5092
  • editorError.background#9e02130d
  • editorError.foreground#9e0213
  • editorGroup.border#bce1e9
  • editorGroupHeader.tabsBackground#f7f7f7
  • editorGroupHeader.tabsBorder#bce1e9
  • editorGutter.addedBackground#1f600c
  • editorGutter.background#ffffff
  • editorGutter.deletedBackground#9e0213
  • editorGutter.foldingControlForeground#2e3036
  • editorGutter.modifiedBackground#0c5092
  • editorHint.foreground#015d54
  • editorHoverWidget.background#f7f7f7
  • editorHoverWidget.border#bce1e9
  • editorHoverWidget.foreground#0b0d12
  • editorIndentGuide.activeBackground1#0c5092
  • editorIndentGuide.background1#f2f2f2
  • editorInfo.background#0c50920d
  • editorInfo.foreground#0c5092
  • editorInlayHint.background#f7f7f7
  • editorInlayHint.foreground#2e3036
  • editorInlayHint.parameterForeground#2e3036
  • editorInlayHint.typeForeground#2e3036
  • editorLineNumber.activeForeground#6f5305
  • editorLineNumber.foreground#2e3036
  • editorLink.activeForeground#0c5092
  • editorOverviewRuler.addedForeground#1f600c
  • editorOverviewRuler.bracketMatchForeground#2e3036
  • editorOverviewRuler.deletedForeground#9e0213
  • editorOverviewRuler.errorForeground#9e0213
  • editorOverviewRuler.findMatchForeground#6f530599
  • editorOverviewRuler.infoForeground#0c5092
  • editorOverviewRuler.modifiedForeground#0c5092
  • editorOverviewRuler.warningForeground#6f5305
  • editorRuler.foreground#f2f2f2
  • editorSuggestWidget.background#f7f7f7
  • editorSuggestWidget.border#bce1e9
  • editorSuggestWidget.focusHighlightForeground#0c5092
  • editorSuggestWidget.foreground#0b0d12
  • editorSuggestWidget.highlightForeground#0c5092
  • editorSuggestWidget.selectedBackground#f2f2f2
  • editorWarning.background#6f53050d
  • editorWarning.foreground#6f5305
  • editorWhitespace.foreground#bce1e9
  • editorWidget.background#f7f7f7
  • editorWidget.border#bce1e9
  • editorWidget.foreground#0b0d12
  • focusBorder#0c5092
  • foreground#1b1d22
  • gitDecoration.addedResourceForeground#1f600c
  • gitDecoration.conflictingResourceForeground#7a3d04
  • gitDecoration.deletedResourceForeground#9e0213
  • gitDecoration.ignoredResourceForeground#2e3036
  • gitDecoration.modifiedResourceForeground#0c5092
  • gitDecoration.stageModifiedResourceForeground#0c5092
  • gitDecoration.submoduleResourceForeground#574084
  • gitDecoration.untrackedResourceForeground#1f600c
  • input.background#f7f7f7
  • input.border#bce1e9
  • input.foreground#0b0d12
  • input.placeholderForeground#2e3036
  • inputOption.activeBorder#0c5092
  • inputOption.activeForeground#0b0d12
  • inputValidation.errorBackground#9e021333
  • inputValidation.errorBorder#9e0213
  • inputValidation.infoBackground#0c509233
  • inputValidation.infoBorder#0c5092
  • inputValidation.warningBackground#6f530533
  • inputValidation.warningBorder#6f5305
  • keybindingLabel.foreground#0c5092
  • list.activeSelectionBackground#bce1e9
  • list.activeSelectionForeground#0b0d12
  • list.deemphasizedForeground#2e3036
  • list.errorForeground#9e0213
  • list.focusAndSelectionOutline#0c5092
  • list.focusOutline#0c5092
  • list.highlightForeground#7a3d04
  • list.hoverBackground#f2f2f2
  • list.inactiveSelectionBackground#f2f2f2
  • list.warningForeground#6f5305
  • menu.background#f7f7f7
  • menu.border#bce1e9
  • menu.foreground#0b0d12
  • menu.selectionBackground#f2f2f2
  • menu.selectionForeground#0b0d12
  • menu.separatorBackground#bce1e9
  • menubar.selectionBackground#f2f2f2
  • merge.currentContentBackground#015d540a
  • merge.currentHeaderBackground#015d541a
  • merge.incomingContentBackground#0c50920a
  • merge.incomingHeaderBackground#0c50921a
  • minimap.errorHighlight#9e0213
  • minimap.findMatchHighlight#6f5305
  • minimap.warningHighlight#6f5305
  • minimapGutter.addedBackground#1f600c
  • minimapGutter.deletedBackground#9e0213
  • minimapGutter.modifiedBackground#0c5092
  • notebook.focusedCellBorder#0c5092
  • notificationCenterHeader.background#f2f2f2
  • notificationLink.foreground#0c5092
  • notifications.background#f7f7f7
  • notifications.border#bce1e9
  • notifications.foreground#0b0d12
  • notificationsErrorIcon.foreground#9e0213
  • notificationsInfoIcon.foreground#0c5092
  • notificationsWarningIcon.foreground#6f5305
  • panel.background#f7f7f7
  • panel.border#bce1e9
  • panelSectionHeader.background#f7f7f7
  • panelTitle.activeBorder#0c5092
  • peekView.border#0c5092
  • peekViewEditor.background#f7f7f7
  • peekViewEditor.matchHighlightBackground#6f530533
  • peekViewResult.background#f7f7f7
  • peekViewResult.fileForeground#1b1d22
  • peekViewResult.lineForeground#2e3036
  • peekViewResult.matchHighlightBackground#6f530533
  • peekViewResult.selectionBackground#f2f2f2
  • peekViewTitle.background#f7f7f7
  • peekViewTitleDescription.foreground#2e3036
  • peekViewTitleLabel.foreground#0b0d12
  • pickerGroup.foreground#0c5092
  • problemsErrorIcon.foreground#9e0213
  • problemsInfoIcon.foreground#0c5092
  • problemsWarningIcon.foreground#6f5305
  • progressBar.background#0c5092
  • quickInput.background#f7f7f7
  • quickInput.foreground#0b0d12
  • quickInputList.focusBackground#f2f2f2
  • quickInputList.focusForeground#0b0d12
  • sash.hoverBorder#0c5092
  • scrollbarSlider.activeBackground#bce1e9cc
  • scrollbarSlider.background#bce1e980
  • scrollbarSlider.hoverBackground#bce1e9aa
  • selection.background#bce1e9
  • sideBar.background#f7f7f7
  • sideBar.border#bce1e9
  • sideBar.foreground#1b1d22
  • sideBarSectionHeader.background#f7f7f7
  • sideBarSectionHeader.border#bce1e9
  • sideBarSectionHeader.foreground#1b1d22
  • sideBarTitle.foreground#0b0d12
  • statusBar.background#f7f7f7
  • statusBar.border#bce1e9
  • statusBar.debuggingBackground#7a3d04
  • statusBar.foreground#1b1d22
  • statusBar.noFolderBackground#f7f7f7
  • statusBarItem.hoverBackground#f2f2f2
  • statusBarItem.remoteBackground#0c5092
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#0c5092
  • tab.activeBorderTop#0c5092
  • tab.activeForeground#0b0d12
  • tab.border#f7f7f7
  • tab.inactiveBackground#f7f7f7
  • tab.inactiveForeground#2e3036
  • terminal.ansiBlack#f2f2f2
  • terminal.ansiBlue#0c5092
  • terminal.ansiBrightBlack#bce1e9
  • terminal.ansiBrightBlue#0c5092
  • terminal.ansiBrightCyan#005d6c
  • terminal.ansiBrightGreen#1f600c
  • terminal.ansiBrightMagenta#812873
  • terminal.ansiBrightRed#9e0213
  • terminal.ansiBrightWhite#0b0d12
  • terminal.ansiBrightYellow#6f5305
  • terminal.ansiCyan#005d6c
  • terminal.ansiGreen#1f600c
  • terminal.ansiMagenta#812873
  • terminal.ansiRed#9e0213
  • terminal.ansiWhite#1b1d22
  • terminal.ansiYellow#6f5305
  • terminal.background#ffffff
  • terminal.foreground#0b0d12
  • terminal.selectionBackground#bce1e9
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#0c5092
  • testing.iconFailed#9e0213
  • testing.iconPassed#1f600c
  • testing.iconQueued#6f5305
  • textLink.activeForeground#0c3f72
  • textLink.foreground#0c5092
  • titleBar.activeBackground#f7f7f7
  • titleBar.activeForeground#0b0d12
  • titleBar.border#bce1e9
  • titleBar.inactiveBackground#f7f7f7
  • titleBar.inactiveForeground#2e3036
  • tree.indentGuidesStroke#bce1e9
  • widget.border#bce1e9
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, keyword.control, storage.type, storage.modifier.import, storage.modifier.package, meta.class.identifier storage.modifier, meta.record.identifier storage.modifier#9e0213bold
keyword.operator#005d6c
entity.name.function#6f5305bold
meta.function-call, support.function, meta.function-call entity.name.function#6f5305
entity.name.function.constructor, entity.name.type.constructor#6d3700bold
entity.name.type, support.type, entity.name.class, support.class#7a3d04bold
variable.language, support.type.builtin, constant.language#6d3700italic
variable.parameter#08252ditalic
string, string.quoted, string.template#015d2d
constant.character.escape#005d6c
constant.numeric#0c5092
constant.language.boolean#574084
constant.other#574084
variable.other.constant#203869
variable.other.property, support.variable.property, meta.object-literal.key#015d54
variable, variable.other.readwrite#312d50
meta.preprocessor#9e0213
comment, punctuation.definition.comment#2e3036italic
punctuation, meta.brace#636363
entity.name.tag#9e0213
support.class.component, entity.name.tag.namespace#7a3d04
entity.other.attribute-name#044540
punctuation.definition.tag#1b1d22
markup.inserted, markup.inserted punctuation.definition.inserted#1f600c
markup.changed, markup.changed punctuation.definition.changed#0c5092
markup.deleted, markup.deleted punctuation.definition.deleted#9e0213
heading.1.markdown, heading.1.markdown punctuation.definition.heading, markup.heading.setext.1.markdown#01519fbold
heading.2.markdown, heading.2.markdown punctuation.definition.heading, markup.heading.setext.2.markdown#005b79bold
heading.3.markdown, heading.3.markdown punctuation.definition.heading#0b5e65bold
heading.4.markdown, heading.4.markdown punctuation.definition.heading, heading.5.markdown, heading.5.markdown punctuation.definition.heading, heading.6.markdown, heading.6.markdown punctuation.definition.heading#006154bold
markup.bold#0b0d12bold
markup.italic#0b0d12italic
markup.inline.raw, markup.raw.inline, fenced_code.block.language, entity.name.language.markdown#015d54
markup.underline.link, string.other.link.title.markdown, string.other.link.description.markdown, constant.other.reference.link.markdown#005d6cunderline
markup.quote#2e3036italic
punctuation.definition.list.begin.markdown, markup.list.numbered.bullet#7a3d04
meta.separator.markdown, entity.other.document.begin.yaml#636363
markup.strikethrough#2e3036strikethrough
support.type.property-name, support.type.property-name punctuation, entity.name.tag.yaml#015d54
variable.other.anchor.yaml, entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#574084
keyword.other.unit#7a3d04
constant.other.color#574084
keyword.other.important#9e0213bold
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6f5305
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#005d6c
constant.other.character-class.regexp, constant.other.character-class.set.regexp#7a3d04
keyword.operator.quantifier.regexp#9e0213
keyword.control.anchor.regexp#9e0213
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc#574084
variable.other.jsdoc#0b0d12italic
meta.diff.header, meta.diff.range, punctuation.definition.range.diff, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#0c5092
punctuation.definition.string#015d2d
keyword.operator.expression, keyword.operator.new, keyword.operator.delete, keyword.operator.logical.python#9e0213bold
keyword.control.type, storage.type.type#7a3d04italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#4b1992bold
storage.modifier.attribute#6d3700
storage.modifier.pointer, storage.modifier.reference, storage.modifier.array.bracket.square#005d6cbold
storage.modifier, storage.type.ts, storage.type.tsx, storage.type.js, storage.type.function.async#004b96italic