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.activeBorder#4a8a6e
  • activityBar.background#1a1a1a
  • activityBar.border#333333
  • activityBar.foreground#c8c4b8
  • activityBar.inactiveForeground#4a4a4a
  • activityBarBadge.background#c8c4b8
  • activityBarBadge.foreground#1a1a1a
  • badge.background#c8c4b890
  • badge.foreground#1a1a1a
  • breadcrumb.activeSelectionForeground#c8c4b8
  • breadcrumb.background#222222
  • breadcrumb.focusForeground#c8c4b8
  • breadcrumb.foreground#4e4e4e
  • breadcrumbPicker.background#222222
  • button.background#4a8a6e
  • button.foreground#1a1a1a
  • button.hoverBackground#559e7d
  • checkbox.background#222222
  • checkbox.border#3d3d3d
  • commandCenter.activeBackground#2c2c2c
  • commandCenter.activeForeground#c8c4b8
  • commandCenter.background#222222
  • commandCenter.border#3d3d3d
  • commandCenter.foreground#c8c4b8
  • debugToolBar.background#222222
  • descriptionForeground#c8c4b890
  • diffEditor.insertedTextBackground#4a8a6e30
  • diffEditor.removedTextBackground#b86e6e30
  • dropdown.background#222222
  • dropdown.border#3d3d3d
  • dropdown.foreground#c8c4b8
  • dropdown.listBackground#222222
  • editor.background#1a1a1a
  • editor.findMatchBackground#4a8a6e60
  • editor.findMatchBorder#4a8a6e80
  • editor.findMatchHighlightBackground#4a8a6e35
  • editor.focusedStackFrameHighlightBackground#4a8a6e20
  • editor.foldBackground#c8c4b808
  • editor.foreground#c8c4b8
  • editor.inactiveSelectionBackground#33333390
  • editor.lineHighlightBackground#222222
  • editor.selectionBackground#3d3b38
  • editor.selectionHighlightBackground#3d3b3870
  • editor.stackFrameHighlightBackground#af8d6220
  • editor.wordHighlightBackground#3d3b3850
  • editor.wordHighlightStrongBackground#3d3b3870
  • editorBracketHighlight.foreground1#5a9e9c
  • editorBracketHighlight.foreground2#c08a7d
  • editorBracketHighlight.foreground3#af8d62
  • editorBracketHighlight.foreground4#93b072
  • editorBracketHighlight.foreground5#b86e6e
  • editorBracketHighlight.foreground6#4a8f87
  • editorBracketMatch.background#5a9e9c20
  • editorBracketMatch.border#5a9e9c40
  • editorError.foreground#d05060
  • editorGroup.border#3d3d3d
  • editorGroupHeader.tabsBackground#1e1e1e
  • editorGroupHeader.tabsBorder#333333
  • editorGutter.addedBackground#4a8a6e
  • editorGutter.commentRangeForeground#4e4e4e
  • editorGutter.deletedBackground#b86e6e
  • editorGutter.foldingControlForeground#4e4e4e
  • editorGutter.modifiedBackground#65a8b5
  • editorHint.foreground#778073
  • editorHoverWidget.background#222222
  • editorHoverWidget.border#3d3d3d
  • editorHoverWidget.foreground#c8c4b8
  • editorIndentGuide.activeBackground#3d3b38
  • editorIndentGuide.background#333333
  • editorInfo.foreground#65a8b5
  • editorInlayHint.background#22222200
  • editorInlayHint.foreground#555555
  • editorLineNumber.activeForeground#c8c4b8
  • editorLineNumber.foreground#4e4e4e
  • editorOverviewRuler.border#1a1a1a
  • editorRuler.foreground#222222
  • editorStickyScroll.background#1e1e1e
  • editorStickyScrollHover.background#222222
  • editorSuggestWidget.background#222222
  • editorSuggestWidget.border#3d3d3d
  • editorSuggestWidget.focusHighlightForeground#4a8a6e
  • editorSuggestWidget.foreground#c8c4b8
  • editorSuggestWidget.highlightForeground#4a8a6e
  • editorSuggestWidget.selectedBackground#3a3835
  • editorSuggestWidget.selectedForeground#c8c4b8
  • editorWarning.foreground#d4bf6e
  • editorWhitespace.foreground#333333
  • editorWidget.background#222222
  • errorForeground#b86e6e
  • focusBorder#00000000
  • foreground#c8c4b8
  • gitDecoration.addedResourceForeground#4a8a6e
  • gitDecoration.conflictingResourceForeground#af8d62
  • gitDecoration.deletedResourceForeground#b86e6e
  • gitDecoration.ignoredResourceForeground#4a4a4a
  • gitDecoration.modifiedResourceForeground#65a8b5
  • gitDecoration.submoduleResourceForeground#c8c4b890
  • gitDecoration.untrackedResourceForeground#5a9e9c
  • input.background#222222
  • input.border#3d3d3d
  • input.foreground#c8c4b8
  • input.placeholderForeground#c8c4b850
  • inputOption.activeBackground#c8c4b820
  • list.activeSelectionBackground#3a3835
  • list.activeSelectionForeground#c8c4b8
  • list.focusBackground#3a3835
  • list.focusForeground#c8c4b8
  • list.highlightForeground#4a8a6e
  • list.hoverBackground#2c2c2c
  • list.hoverForeground#c8c4b8
  • list.inactiveFocusBackground#2c2c2c
  • list.inactiveSelectionBackground#333333
  • list.inactiveSelectionForeground#c8c4b8
  • menu.background#222222
  • menu.border#3d3d3d
  • menu.foreground#c8c4b8
  • menu.selectionBackground#3a3835
  • menu.selectionForeground#c8c4b8
  • menu.separatorBackground#333333
  • menubar.selectionBackground#2c2c2c
  • menubar.selectionForeground#c8c4b8
  • minimap.errorHighlight#d05060
  • minimap.findMatchHighlight#4a8a6e60
  • minimap.selectionHighlight#2e2e2e
  • minimap.warningHighlight#d4bf6e
  • notificationCenterHeader.background#222222
  • notificationCenterHeader.foreground#c8c4b8
  • notifications.background#222222
  • notifications.border#3d3d3d
  • notifications.foreground#c8c4b8
  • notificationsErrorIcon.foreground#b86e6e
  • notificationsInfoIcon.foreground#65a8b5
  • notificationsWarningIcon.foreground#d4bf6e
  • panel.background#1a1a1a
  • panel.border#333333
  • panelInput.border#3d3d3d
  • panelTitle.activeBorder#4a8a6e
  • panelTitle.activeForeground#c8c4b8
  • panelTitle.inactiveForeground#4a4a4a
  • peekViewEditor.background#1a1a1a
  • peekViewEditor.matchHighlightBackground#d4bf6e33
  • peekViewResult.background#1a1a1a
  • peekViewResult.matchHighlightBackground#d4bf6e33
  • peekViewResult.selectionBackground#3a3835
  • peekViewResult.selectionForeground#c8c4b8
  • pickerGroup.border#3d3d3d
  • pickerGroup.foreground#c8c4b8
  • problemsErrorIcon.foreground#d05060
  • problemsInfoIcon.foreground#65a8b5
  • problemsWarningIcon.foreground#d4bf6e
  • progressBar.background#4a8a6e
  • quickInput.background#222222
  • quickInput.foreground#c8c4b8
  • quickInputList.focusBackground#333333
  • quickInputList.focusForeground#c8c4b8
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#c8c4b830
  • scrollbarSlider.background#c8c4b810
  • scrollbarSlider.hoverBackground#c8c4b830
  • settings.headerForeground#c8c4b8
  • settings.modifiedItemIndicator#4a8a6e
  • sideBar.background#1a1a1a
  • sideBar.border#333333
  • sideBar.foreground#c8c4b8
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.border#333333
  • sideBarSectionHeader.foreground#c8c4b8
  • sideBarTitle.foreground#c8c4b8
  • statusBar.background#222222
  • statusBar.border#333333
  • statusBar.debuggingBackground#222222
  • statusBar.debuggingForeground#c08a7d
  • statusBar.foreground#c8c4b8
  • statusBar.noFolderBackground#222222
  • statusBarItem.activeBackground#ffffff20
  • statusBarItem.hoverBackground#ffffff10
  • statusBarItem.prominentBackground#333333
  • statusBarItem.remoteBackground#4a8a6e
  • statusBarItem.remoteForeground#1a1a1a
  • tab.activeBackground#222222
  • tab.activeBorder#333333
  • tab.activeBorderTop#c8c4b880
  • tab.activeForeground#c8c4b8
  • tab.border#333333
  • tab.hoverBackground#2c2c2c
  • tab.hoverForeground#c8c4b8
  • tab.inactiveBackground#1e1e1e
  • tab.inactiveForeground#4a4a4a
  • tab.unfocusedActiveBorder#333333
  • tab.unfocusedActiveBorderTop#333333
  • tab.unfocusedHoverBackground#262626
  • tab.unfocusedHoverForeground#c8c4b8
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#65a8b5
  • terminal.ansiBrightBlack#4e4e4e
  • terminal.ansiBrightBlue#65a8b5
  • terminal.ansiBrightCyan#5a9e9c
  • terminal.ansiBrightGreen#4a8a6e
  • terminal.ansiBrightMagenta#c08a7d
  • terminal.ansiBrightRed#b86e6e
  • terminal.ansiBrightWhite#c8c4b8
  • terminal.ansiBrightYellow#d4bf6e
  • terminal.ansiCyan#5a9e9c
  • terminal.ansiGreen#4a8a6e
  • terminal.ansiMagenta#c08a7d
  • terminal.ansiRed#b86e6e
  • terminal.ansiWhite#c8c4b8
  • terminal.ansiYellow#d4bf6e
  • terminal.foreground#c8c4b8
  • terminal.selectionBackground#2e2e2e
  • textBlockQuote.background#1a1a1a
  • textBlockQuote.border#3d3d3d
  • textCodeBlock.background#222222
  • textLink.activeForeground#4a8a6e
  • textLink.foreground#4a8a6e
  • textPreformat.foreground#c8c4b8
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#c8c4b8
  • titleBar.border#333333
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#4a4a4a
  • tree.indentGuidesStroke#333333
  • welcomePage.buttonBackground#222222
  • welcomePage.buttonHoverBackground#333333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#778073
punctuation, delimiter, delimiter.bracket, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, storage.type.function.arrow, meta.objectliteral.ts#787878
punctuation.definition.string#c48b7688
punctuation.definition.template-expression, punctuation.section.embedded#8d8a82
keyword, storage.type.class.jsdoc#4a8a6e
keyword.control.import, keyword.control.from, keyword.control.export, keyword.import, keyword.other.import#778073
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.trycatch#b86e6e
keyword.operator, keyword.operator.assignment.compound, keyword.operator.rest, keyword.operator.spread, keyword.operator.ternary, keyword.other.unit#8d8a82
keyword.operator.relational, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.type.annotation, keyword.operator.type#787878
storage, storage.type, storage.modifier#b86e6e
storage.type.function, storage.type.class, storage.type.interface, storage.type.enum, storage.type.struct#4a8a6e
string, string punctuation.section.embedded source, attribute.value#c48b76
string.regexp, source.regexp#b88068
string variable#c48b76
entity.name.function, support.function#93b072
entity.name.function.macro, support.function.macro#b86e6e
entity, entity.name#93b072
entity.name.tag, tag.html#5a9e9c
entity.name.type, support.type, support.type.primitive, support.type.builtin#5a9e9c
entity.name.namespace, entity.name.module#5a9e9c
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#af8d62
variable, identifier#b3a489
variable.parameter, variable.parameter.function#ad9e5e
variable.language#b86e6e
variable.other.property, variable.other.member, variable.other.object.property, meta.object-literal.key#b3a489
variable.other.enummember#5a9e9c
property, meta.property-name, support.type.property-name, entity.name.tag.yaml, attribute.name#ad9e5e
punctuation.support.type.property-name#ad9e5e88
support#ad9e5e
constant, entity.name.constant, support.constant#b88068
constant.numeric, number#4a8f87
constant.character#c48b76
constant.character.escape#b86e6e
constant.language#b88068
constant.language.boolean#b88068
constant.language.null, constant.language.undefined#b86e6e
namespace#5a9e9c
meta.module-reference#4a8a6e
entity.name.label#c48b76
markup.heading, markup.heading entity.name#93b072bold
markup.bold#c8c4b8bold
markup.italic#c8c4b8italic
markup.strikethroughstrikethrough
markup.quote#5a9e9c
markup.raw#af8d62
markup.underline.link.markdown, markup.underline.link.image.markdown#4a8a6eunderline
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#c48b76
punctuation.definition.list.begin.markdown#b86e6e
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#b86e6e
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#4a8a6e
markup.changed, punctuation.definition.changed#af8d62
markup.ignored, markup.untracked#333333
meta.diff.range#5a9e9cbold
meta.diff.header#65a8b5
keyword.operator.quantifier.regexp#4a8f87
string.regexp constant.character.escape#b86e6e
invalid.broken#d05060italic
invalid.deprecated#d05060italic
invalid.illegal#d05060italic
invalid.unimplemented#d05060italic
message.error#d05060
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#c8c4b8
invalid.illegal.unrecognized-tag.htmlnormal