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#0d0d12
  • activityBar.foreground#e2e8f1
  • activityBarBadge.background#82c5fe
  • activityBarBadge.foreground#13131c
  • badge.background#82c5fe
  • badge.foreground#13131c
  • breadcrumb.activeSelectionForeground#82c5fe
  • breadcrumb.background#13131c
  • breadcrumb.focusForeground#e2e8f1
  • breadcrumb.foreground#b2b8c1
  • breadcrumbPicker.background#0d0d12
  • button.background#82c5fe
  • button.foreground#13131c
  • button.hoverBackground#93cbfc
  • checkbox.background#1b1b21
  • checkbox.border#0f3434
  • contrastActiveBorder#82c5fe
  • contrastBorder#595b64
  • debugConsole.errorForeground#fe7f78
  • debugConsole.infoForeground#82c5fe
  • debugConsole.warningForeground#f6d653
  • debugIcon.breakpointForeground#fe7f78
  • diffEditor.insertedLineBackground#76e87d0a
  • diffEditor.insertedTextBackground#76e87d13
  • diffEditor.removedLineBackground#fe7f780a
  • diffEditor.removedTextBackground#fe7f7813
  • dropdown.background#0d0d12
  • dropdown.border#0f3434
  • dropdown.foreground#e2e8f1
  • dropdown.listBackground#0d0d12
  • editor.background#13131c
  • editor.findMatchBackground#0f3434
  • editor.findMatchHighlightBackground#1b1b21
  • editor.foreground#e2e8f1
  • editor.lineHighlightBackground#1b1b21
  • editor.lineHighlightBorder#18f5f68C
  • editor.selectionBackground#0f3434
  • editorBracketHighlight.foreground1#f6d653
  • editorBracketHighlight.foreground2#b0b7ff
  • editorBracketHighlight.foreground3#82c5fe
  • editorBracketHighlight.foreground4#76e87d
  • editorBracketHighlight.foreground5#feb16f
  • editorBracketHighlight.foreground6#3ae5ff
  • editorBracketHighlight.unexpectedBracket.foreground#fe7f78
  • editorCursor.background#13131c
  • editorCursor.foreground#82c5fe
  • editorError.background#fe7f780d
  • editorError.foreground#fe7f78
  • editorGroup.border#0f3434
  • editorGroupHeader.tabsBackground#0d0d12
  • editorGroupHeader.tabsBorder#0f3434
  • editorGutter.addedBackground#76e87d
  • editorGutter.background#13131c
  • editorGutter.deletedBackground#fe7f78
  • editorGutter.foldingControlForeground#b2b8c1
  • editorGutter.modifiedBackground#82c5fe
  • editorHint.foreground#3ae5ff
  • editorHoverWidget.background#0d0d12
  • editorHoverWidget.border#0f3434
  • editorHoverWidget.foreground#e2e8f1
  • editorIndentGuide.activeBackground1#82c5fe
  • editorIndentGuide.background1#1b1b21
  • editorInfo.background#82c5fe0d
  • editorInfo.foreground#82c5fe
  • editorInlayHint.background#0d0d12
  • editorInlayHint.foreground#b2b8c1
  • editorInlayHint.parameterForeground#b2b8c1
  • editorInlayHint.typeForeground#b2b8c1
  • editorLineNumber.activeForeground#f6d653
  • editorLineNumber.foreground#b2b8c1
  • editorLink.activeForeground#82c5fe
  • editorOverviewRuler.addedForeground#76e87d
  • editorOverviewRuler.bracketMatchForeground#b2b8c1
  • editorOverviewRuler.deletedForeground#fe7f78
  • editorOverviewRuler.errorForeground#fe7f78
  • editorOverviewRuler.findMatchForeground#f6d65399
  • editorOverviewRuler.infoForeground#82c5fe
  • editorOverviewRuler.modifiedForeground#82c5fe
  • editorOverviewRuler.warningForeground#f6d653
  • editorRuler.foreground#1b1b21
  • editorSuggestWidget.background#0d0d12
  • editorSuggestWidget.border#0f3434
  • editorSuggestWidget.focusHighlightForeground#82c5fe
  • editorSuggestWidget.foreground#e2e8f1
  • editorSuggestWidget.highlightForeground#82c5fe
  • editorSuggestWidget.selectedBackground#1b1b21
  • editorWarning.background#f6d6530d
  • editorWarning.foreground#f6d653
  • editorWhitespace.foreground#0f3434
  • editorWidget.background#0d0d12
  • editorWidget.border#0f3434
  • editorWidget.foreground#e2e8f1
  • focusBorder#82c5fe
  • foreground#cbd1da
  • gitDecoration.addedResourceForeground#76e87d
  • gitDecoration.conflictingResourceForeground#feb16f
  • gitDecoration.deletedResourceForeground#fe7f78
  • gitDecoration.ignoredResourceForeground#b2b8c1
  • gitDecoration.modifiedResourceForeground#82c5fe
  • gitDecoration.stageModifiedResourceForeground#82c5fe
  • gitDecoration.submoduleResourceForeground#b0b7ff
  • gitDecoration.untrackedResourceForeground#76e87d
  • input.background#0d0d12
  • input.border#0f3434
  • input.foreground#e2e8f1
  • input.placeholderForeground#b2b8c1
  • inputOption.activeBorder#82c5fe
  • inputOption.activeForeground#e2e8f1
  • inputValidation.errorBackground#fe7f7833
  • inputValidation.errorBorder#fe7f78
  • inputValidation.infoBackground#82c5fe33
  • inputValidation.infoBorder#82c5fe
  • inputValidation.warningBackground#f6d65333
  • inputValidation.warningBorder#f6d653
  • keybindingLabel.foreground#82c5fe
  • list.activeSelectionBackground#0f3434
  • list.activeSelectionForeground#e2e8f1
  • list.deemphasizedForeground#b2b8c1
  • list.errorForeground#fe7f78
  • list.focusAndSelectionOutline#82c5fe
  • list.focusOutline#82c5fe
  • list.highlightForeground#feb16f
  • list.hoverBackground#1b1b21
  • list.inactiveSelectionBackground#1b1b21
  • list.warningForeground#f6d653
  • menu.background#0d0d12
  • menu.border#0f3434
  • menu.foreground#e2e8f1
  • menu.selectionBackground#1b1b21
  • menu.selectionForeground#e2e8f1
  • menu.separatorBackground#0f3434
  • menubar.selectionBackground#1b1b21
  • merge.currentContentBackground#76e87d0a
  • merge.currentHeaderBackground#76e87d1a
  • merge.incomingContentBackground#82c5fe0a
  • merge.incomingHeaderBackground#82c5fe1a
  • minimap.errorHighlight#fe7f78
  • minimap.findMatchHighlight#f6d653
  • minimap.warningHighlight#f6d653
  • minimapGutter.addedBackground#76e87d
  • minimapGutter.deletedBackground#fe7f78
  • minimapGutter.modifiedBackground#82c5fe
  • notebook.focusedCellBorder#82c5fe
  • notificationCenterHeader.background#1b1b21
  • notificationLink.foreground#82c5fe
  • notifications.background#0d0d12
  • notifications.border#0f3434
  • notifications.foreground#e2e8f1
  • notificationsErrorIcon.foreground#fe7f78
  • notificationsInfoIcon.foreground#82c5fe
  • notificationsWarningIcon.foreground#f6d653
  • panel.background#0d0d12
  • panel.border#0f3434
  • panelSectionHeader.background#0d0d12
  • panelTitle.activeBorder#82c5fe
  • peekView.border#82c5fe
  • peekViewEditor.background#0d0d12
  • peekViewEditor.matchHighlightBackground#f6d65333
  • peekViewResult.background#0d0d12
  • peekViewResult.fileForeground#cbd1da
  • peekViewResult.lineForeground#b2b8c1
  • peekViewResult.matchHighlightBackground#f6d65333
  • peekViewResult.selectionBackground#1b1b21
  • peekViewTitle.background#0d0d12
  • peekViewTitleDescription.foreground#b2b8c1
  • peekViewTitleLabel.foreground#e2e8f1
  • pickerGroup.foreground#82c5fe
  • problemsErrorIcon.foreground#fe7f78
  • problemsInfoIcon.foreground#82c5fe
  • problemsWarningIcon.foreground#f6d653
  • progressBar.background#82c5fe
  • quickInput.background#0d0d12
  • quickInput.foreground#e2e8f1
  • quickInputList.focusBackground#1b1b21
  • quickInputList.focusForeground#e2e8f1
  • sash.hoverBorder#82c5fe
  • scrollbarSlider.activeBackground#0f3434cc
  • scrollbarSlider.background#0f343480
  • scrollbarSlider.hoverBackground#0f3434aa
  • selection.background#0f3434
  • sideBar.background#0d0d12
  • sideBar.border#0f3434
  • sideBar.foreground#cbd1da
  • sideBarSectionHeader.background#0d0d12
  • sideBarSectionHeader.border#0f3434
  • sideBarSectionHeader.foreground#cbd1da
  • sideBarTitle.foreground#e2e8f1
  • statusBar.background#0d0d12
  • statusBar.border#0f3434
  • statusBar.debuggingBackground#feb16f
  • statusBar.foreground#cbd1da
  • statusBar.noFolderBackground#0d0d12
  • statusBarItem.hoverBackground#1b1b21
  • statusBarItem.remoteBackground#82c5fe
  • statusBarItem.remoteForeground#13131c
  • tab.activeBackground#13131c
  • tab.activeBorder#82c5fe
  • tab.activeBorderTop#82c5fe
  • tab.activeForeground#e2e8f1
  • tab.border#0d0d12
  • tab.inactiveBackground#0d0d12
  • tab.inactiveForeground#b2b8c1
  • terminal.ansiBlack#1b1b21
  • terminal.ansiBlue#82c5fe
  • terminal.ansiBrightBlack#0f3434
  • terminal.ansiBrightBlue#82c5fe
  • terminal.ansiBrightCyan#18f5f6
  • terminal.ansiBrightGreen#76e87d
  • terminal.ansiBrightMagenta#fe91e8
  • terminal.ansiBrightRed#fe7f78
  • terminal.ansiBrightWhite#e2e8f1
  • terminal.ansiBrightYellow#f6d653
  • terminal.ansiCyan#18f5f6
  • terminal.ansiGreen#76e87d
  • terminal.ansiMagenta#fe91e8
  • terminal.ansiRed#fe7f78
  • terminal.ansiWhite#cbd1da
  • terminal.ansiYellow#f6d653
  • terminal.background#13131c
  • terminal.foreground#e2e8f1
  • terminal.selectionBackground#0f3434
  • terminalCursor.background#13131c
  • terminalCursor.foreground#82c5fe
  • testing.iconFailed#fe7f78
  • testing.iconPassed#76e87d
  • testing.iconQueued#f6d653
  • textLink.activeForeground#9acefb
  • textLink.foreground#82c5fe
  • titleBar.activeBackground#0d0d12
  • titleBar.activeForeground#e2e8f1
  • titleBar.border#0f3434
  • titleBar.inactiveBackground#0d0d12
  • titleBar.inactiveForeground#b2b8c1
  • tree.indentGuidesStroke#0f3434
  • widget.border#0f3434
  • 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#fe7f78bold
keyword.operator#18f5f6
entity.name.function#f6d653bold
meta.function-call, support.function, meta.function-call entity.name.function#f6d653
entity.name.function.constructor, entity.name.type.constructor#f9a04abold
entity.name.type, support.type, entity.name.class, support.class#feb16fbold
variable.language, support.type.builtin, constant.language#f9a04aitalic
variable.parameter#a5ecf3italic
string, string.quoted, string.template#76e87d
constant.character.escape#18f5f6
constant.numeric#82c5fe
constant.language.boolean#b0b7ff
constant.other#b0b7ff
variable.other.constant#d8dafe
variable.other.property, support.variable.property, meta.object-literal.key#3ae5ff
variable, variable.other.readwrite#ededfd
meta.preprocessor#fe7f78
comment, punctuation.definition.comment#b2b8c1italic
punctuation, meta.brace#9898a6
entity.name.tag#fe7f78
support.class.component, entity.name.tag.namespace#feb16f
entity.other.attribute-name#6ce6fb
punctuation.definition.tag#cbd1da
markup.inserted, markup.inserted punctuation.definition.inserted#76e87d
markup.changed, markup.changed punctuation.definition.changed#82c5fe
markup.deleted, markup.deleted punctuation.definition.deleted#fe7f78
heading.1.markdown, heading.1.markdown punctuation.definition.heading, markup.heading.setext.1.markdown#a8ceffbold
heading.2.markdown, heading.2.markdown punctuation.definition.heading, markup.heading.setext.2.markdown#86d7fdbold
heading.3.markdown, heading.3.markdown punctuation.definition.heading#1ee4f6bold
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#05eacebold
markup.bold#e2e8f1bold
markup.italic#e2e8f1italic
markup.inline.raw, markup.raw.inline, fenced_code.block.language, entity.name.language.markdown#3ae5ff
markup.underline.link, string.other.link.title.markdown, string.other.link.description.markdown, constant.other.reference.link.markdown#18f5f6underline
markup.quote#b2b8c1italic
punctuation.definition.list.begin.markdown, markup.list.numbered.bullet#feb16f
meta.separator.markdown, entity.other.document.begin.yaml#9898a6
markup.strikethrough#b2b8c1strikethrough
support.type.property-name, support.type.property-name punctuation, entity.name.tag.yaml#3ae5ff
variable.other.anchor.yaml, entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#b0b7ff
keyword.other.unit#feb16f
constant.other.color#b0b7ff
keyword.other.important#fe7f78bold
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#f6d653
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#18f5f6
constant.other.character-class.regexp, constant.other.character-class.set.regexp#feb16f
keyword.operator.quantifier.regexp#fe7f78
keyword.control.anchor.regexp#fe7f78
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc#b0b7ff
variable.other.jsdoc#e2e8f1italic
meta.diff.header, meta.diff.range, punctuation.definition.range.diff, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#82c5fe
punctuation.definition.string#76e87d
keyword.operator.expression, keyword.operator.new, keyword.operator.delete, keyword.operator.logical.python#fe7f78bold
keyword.control.type, storage.type.type#feb16fitalic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#b197febold
storage.modifier.attribute#f9a04a
storage.modifier.pointer, storage.modifier.reference, storage.modifier.array.bracket.square#18f5f6bold
storage.modifier, storage.type.ts, storage.type.tsx, storage.type.js, storage.type.function.async#b0b7ffitalic