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#f2eae0
  • activityBar.foreground#2a3345
  • activityBarBadge.background#33659d
  • activityBarBadge.foreground#faf2e8
  • badge.background#33659d
  • badge.foreground#faf2e8
  • breadcrumb.activeSelectionForeground#33659d
  • breadcrumb.background#faf2e8
  • breadcrumb.focusForeground#2a3345
  • breadcrumb.foreground#6a758a
  • breadcrumbPicker.background#f2eae0
  • button.background#33659d
  • button.foreground#faf2e8
  • button.hoverBackground#315c8d
  • checkbox.background#ede5db
  • checkbox.border#cfdae9
  • debugConsole.errorForeground#be2327
  • debugConsole.infoForeground#33659d
  • debugConsole.warningForeground#8e6c02
  • debugIcon.breakpointForeground#be2327
  • diffEditor.insertedLineBackground#3e723214
  • diffEditor.insertedTextBackground#3e723226
  • diffEditor.removedLineBackground#be232714
  • diffEditor.removedTextBackground#be232726
  • dropdown.background#f2eae0
  • dropdown.border#cfdae9
  • dropdown.foreground#2a3345
  • dropdown.listBackground#f2eae0
  • editor.background#faf2e8
  • editor.findMatchBackground#cfdae9
  • editor.findMatchHighlightBackground#ede5db
  • editor.foreground#2a3345
  • editor.lineHighlightBackground#ede5db
  • editor.selectionBackground#cfdae9
  • editorBracketHighlight.foreground1#8e6c02
  • editorBracketHighlight.foreground2#695890
  • editorBracketHighlight.foreground3#33659d
  • editorBracketHighlight.foreground4#3e7232
  • editorBracketHighlight.foreground5#974c00
  • editorBracketHighlight.foreground6#027369
  • editorBracketHighlight.unexpectedBracket.foreground#be2327
  • editorCursor.background#faf2e8
  • editorCursor.foreground#33659d
  • editorError.background#be23271a
  • editorError.foreground#be2327
  • editorGroup.border#cfdae9
  • editorGroupHeader.tabsBackground#f2eae0
  • editorGroupHeader.tabsBorder#cfdae9
  • editorGutter.addedBackground#3e7232
  • editorGutter.background#faf2e8
  • editorGutter.deletedBackground#be2327
  • editorGutter.foldingControlForeground#6a758a
  • editorGutter.modifiedBackground#33659d
  • editorHint.foreground#027369
  • editorHoverWidget.background#f2eae0
  • editorHoverWidget.border#cfdae9
  • editorHoverWidget.foreground#2a3345
  • editorIndentGuide.activeBackground1#33659d
  • editorIndentGuide.background1#ede5db
  • editorInfo.background#33659d1a
  • editorInfo.foreground#33659d
  • editorInlayHint.background#f2eae0
  • editorInlayHint.foreground#6a758a
  • editorInlayHint.parameterForeground#6a758a
  • editorInlayHint.typeForeground#6a758a
  • editorLineNumber.activeForeground#8e6c02
  • editorLineNumber.foreground#6a758a
  • editorLink.activeForeground#33659d
  • editorOverviewRuler.addedForeground#3e7232
  • editorOverviewRuler.bracketMatchForeground#6a758a
  • editorOverviewRuler.deletedForeground#be2327
  • editorOverviewRuler.errorForeground#be2327
  • editorOverviewRuler.findMatchForeground#8e6c0299
  • editorOverviewRuler.infoForeground#33659d
  • editorOverviewRuler.modifiedForeground#33659d
  • editorOverviewRuler.warningForeground#8e6c02
  • editorRuler.foreground#ede5db
  • editorSuggestWidget.background#f2eae0
  • editorSuggestWidget.border#cfdae9
  • editorSuggestWidget.focusHighlightForeground#33659d
  • editorSuggestWidget.foreground#2a3345
  • editorSuggestWidget.highlightForeground#33659d
  • editorSuggestWidget.selectedBackground#ede5db
  • editorWarning.background#8e6c021a
  • editorWarning.foreground#8e6c02
  • editorWhitespace.foreground#cfdae9
  • editorWidget.background#f2eae0
  • editorWidget.border#cfdae9
  • editorWidget.foreground#2a3345
  • focusBorder#33659d
  • foreground#495366
  • gitDecoration.addedResourceForeground#3e7232
  • gitDecoration.conflictingResourceForeground#974c00
  • gitDecoration.deletedResourceForeground#be2327
  • gitDecoration.ignoredResourceForeground#6a758a
  • gitDecoration.modifiedResourceForeground#33659d
  • gitDecoration.stageModifiedResourceForeground#33659d
  • gitDecoration.submoduleResourceForeground#695890
  • gitDecoration.untrackedResourceForeground#3e7232
  • input.background#f2eae0
  • input.border#cfdae9
  • input.foreground#2a3345
  • input.placeholderForeground#6a758a
  • inputOption.activeBorder#33659d
  • inputOption.activeForeground#2a3345
  • inputValidation.errorBackground#be232733
  • inputValidation.errorBorder#be2327
  • inputValidation.infoBackground#33659d33
  • inputValidation.infoBorder#33659d
  • inputValidation.warningBackground#8e6c0233
  • inputValidation.warningBorder#8e6c02
  • keybindingLabel.foreground#33659d
  • list.activeSelectionBackground#cfdae9
  • list.activeSelectionForeground#2a3345
  • list.deemphasizedForeground#6a758a
  • list.errorForeground#be2327
  • list.focusAndSelectionOutline#33659d
  • list.focusOutline#33659d
  • list.highlightForeground#974c00
  • list.hoverBackground#ede5db
  • list.inactiveSelectionBackground#ede5db
  • list.warningForeground#8e6c02
  • menu.background#f2eae0
  • menu.border#cfdae9
  • menu.foreground#2a3345
  • menu.selectionBackground#ede5db
  • menu.selectionForeground#2a3345
  • menu.separatorBackground#cfdae9
  • menubar.selectionBackground#ede5db
  • merge.currentContentBackground#02736914
  • merge.currentHeaderBackground#02736933
  • merge.incomingContentBackground#33659d14
  • merge.incomingHeaderBackground#33659d33
  • minimap.errorHighlight#be2327
  • minimap.findMatchHighlight#8e6c02
  • minimap.warningHighlight#8e6c02
  • minimapGutter.addedBackground#3e7232
  • minimapGutter.deletedBackground#be2327
  • minimapGutter.modifiedBackground#33659d
  • notebook.focusedCellBorder#33659d
  • notificationCenterHeader.background#ede5db
  • notificationLink.foreground#33659d
  • notifications.background#f2eae0
  • notifications.border#cfdae9
  • notifications.foreground#2a3345
  • notificationsErrorIcon.foreground#be2327
  • notificationsInfoIcon.foreground#33659d
  • notificationsWarningIcon.foreground#8e6c02
  • panel.background#f2eae0
  • panel.border#cfdae9
  • panelSectionHeader.background#f2eae0
  • panelTitle.activeBorder#33659d
  • peekView.border#33659d
  • peekViewEditor.background#f2eae0
  • peekViewEditor.matchHighlightBackground#8e6c0233
  • peekViewResult.background#f2eae0
  • peekViewResult.fileForeground#495366
  • peekViewResult.lineForeground#6a758a
  • peekViewResult.matchHighlightBackground#8e6c0233
  • peekViewResult.selectionBackground#ede5db
  • peekViewTitle.background#f2eae0
  • peekViewTitleDescription.foreground#6a758a
  • peekViewTitleLabel.foreground#2a3345
  • pickerGroup.foreground#33659d
  • problemsErrorIcon.foreground#be2327
  • problemsInfoIcon.foreground#33659d
  • problemsWarningIcon.foreground#8e6c02
  • progressBar.background#33659d
  • quickInput.background#f2eae0
  • quickInput.foreground#2a3345
  • quickInputList.focusBackground#ede5db
  • quickInputList.focusForeground#2a3345
  • sash.hoverBorder#33659d
  • scrollbarSlider.activeBackground#cfdae9cc
  • scrollbarSlider.background#cfdae980
  • scrollbarSlider.hoverBackground#cfdae9aa
  • selection.background#cfdae9
  • sideBar.background#f2eae0
  • sideBar.border#cfdae9
  • sideBar.foreground#495366
  • sideBarSectionHeader.background#f2eae0
  • sideBarSectionHeader.border#cfdae9
  • sideBarSectionHeader.foreground#495366
  • sideBarTitle.foreground#2a3345
  • statusBar.background#f2eae0
  • statusBar.border#cfdae9
  • statusBar.debuggingBackground#974c00
  • statusBar.foreground#495366
  • statusBar.noFolderBackground#f2eae0
  • statusBarItem.hoverBackground#ede5db
  • statusBarItem.remoteBackground#33659d
  • statusBarItem.remoteForeground#faf2e8
  • tab.activeBackground#faf2e8
  • tab.activeBorder#33659d
  • tab.activeBorderTop#33659d
  • tab.activeForeground#2a3345
  • tab.border#f2eae0
  • tab.inactiveBackground#f2eae0
  • tab.inactiveForeground#6a758a
  • terminal.ansiBlack#ede5db
  • terminal.ansiBlue#33659d
  • terminal.ansiBrightBlack#cfdae9
  • terminal.ansiBrightBlue#33659d
  • terminal.ansiBrightCyan#097687
  • terminal.ansiBrightGreen#3e7232
  • terminal.ansiBrightMagenta#954886
  • terminal.ansiBrightRed#be2327
  • terminal.ansiBrightWhite#2a3345
  • terminal.ansiBrightYellow#8e6c02
  • terminal.ansiCyan#097687
  • terminal.ansiGreen#3e7232
  • terminal.ansiMagenta#954886
  • terminal.ansiRed#be2327
  • terminal.ansiWhite#495366
  • terminal.ansiYellow#8e6c02
  • terminal.background#faf2e8
  • terminal.foreground#2a3345
  • terminal.selectionBackground#cfdae9
  • terminalCursor.background#faf2e8
  • terminalCursor.foreground#33659d
  • testing.iconFailed#be2327
  • testing.iconPassed#3e7232
  • testing.iconQueued#8e6c02
  • textLink.activeForeground#315987
  • textLink.foreground#33659d
  • titleBar.activeBackground#f2eae0
  • titleBar.activeForeground#2a3345
  • titleBar.border#cfdae9
  • titleBar.inactiveBackground#f2eae0
  • titleBar.inactiveForeground#6a758a
  • tree.indentGuidesStroke#cfdae9
  • widget.border#cfdae9
  • 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#be2327bold
keyword.operator#097687
entity.name.function#8e6c02bold
meta.function-call, support.function, meta.function-call entity.name.function#8e6c02
entity.name.function.constructor, entity.name.type.constructor#a75b14bold
entity.name.type, support.type, entity.name.class, support.class#974c00bold
variable.language, support.type.builtin, constant.language#a75b14italic
variable.parameter#204759italic
string, string.quoted, string.template#15733c
constant.character.escape#097687
constant.numeric#33659d
constant.language.boolean#695890
constant.other#695890
variable.other.constant#213d72
variable.other.property, support.variable.property, meta.object-literal.key#027369
variable, variable.other.readwrite#312d50
meta.preprocessor#be2327
comment, punctuation.definition.comment#6a758aitalic
punctuation, meta.brace#63574a
entity.name.tag#be2327
support.class.component, entity.name.tag.namespace#974c00
entity.other.attribute-name#0e605e
punctuation.definition.tag#495366
markup.inserted, markup.inserted punctuation.definition.inserted#3e7232
markup.changed, markup.changed punctuation.definition.changed#33659d
markup.deleted, markup.deleted punctuation.definition.deleted#be2327
heading.1.markdown, heading.1.markdown punctuation.definition.heading, markup.heading.setext.1.markdown#2e69b2bold
heading.2.markdown, heading.2.markdown punctuation.definition.heading, markup.heading.setext.2.markdown#067398bold
heading.3.markdown, heading.3.markdown punctuation.definition.heading#0d7780bold
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#027a6bbold
markup.bold#2a3345bold
markup.italic#2a3345italic
markup.inline.raw, markup.raw.inline, fenced_code.block.language, entity.name.language.markdown#027369
markup.underline.link, string.other.link.title.markdown, string.other.link.description.markdown, constant.other.reference.link.markdown#097687underline
markup.quote#6a758aitalic
punctuation.definition.list.begin.markdown, markup.list.numbered.bullet#974c00
meta.separator.markdown, entity.other.document.begin.yaml#63574a
markup.strikethrough#6a758astrikethrough
support.type.property-name, support.type.property-name punctuation, entity.name.tag.yaml#027369
variable.other.anchor.yaml, entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#695890
keyword.other.unit#974c00
constant.other.color#695890
keyword.other.important#be2327bold
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8e6c02
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#097687
constant.other.character-class.regexp, constant.other.character-class.set.regexp#974c00
keyword.operator.quantifier.regexp#be2327
keyword.control.anchor.regexp#be2327
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc#695890
variable.other.jsdoc#2a3345italic
meta.diff.header, meta.diff.range, punctuation.definition.range.diff, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#33659d
punctuation.definition.string#15733c
keyword.operator.expression, keyword.operator.new, keyword.operator.delete, keyword.operator.logical.python#be2327bold
keyword.control.type, storage.type.type#974c00italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#6031b1bold
storage.modifier.attribute#a75b14
storage.modifier.pointer, storage.modifier.reference, storage.modifier.array.bracket.square#097687bold
storage.modifier, storage.type.ts, storage.type.tsx, storage.type.js, storage.type.function.async#045cb2italic