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#4d9375
  • activityBar.background#121212
  • activityBar.border#2a2a2a
  • activityBar.foreground#dbd7ca
  • activityBar.inactiveForeground#555555
  • activityBarBadge.background#dbd7ca
  • activityBarBadge.foreground#121212
  • badge.background#dbd7ca90
  • badge.foreground#121212
  • breadcrumb.activeSelectionForeground#dbd7ca
  • breadcrumb.background#1a1a1a
  • breadcrumb.focusForeground#dbd7ca
  • breadcrumb.foreground#585858
  • breadcrumbPicker.background#1a1a1a
  • button.background#4d9375
  • button.foreground#121212
  • button.hoverBackground#5aaa85
  • checkbox.background#1a1a1a
  • checkbox.border#3a3a3a
  • commandCenter.activeBackground#2a2a2a
  • commandCenter.activeForeground#dbd7ca
  • commandCenter.background#1a1a1a
  • commandCenter.border#3a3a3a
  • commandCenter.foreground#dbd7ca
  • debugToolBar.background#1a1a1a
  • descriptionForeground#dbd7ca90
  • diffEditor.insertedTextBackground#4d937530
  • diffEditor.removedTextBackground#cb767630
  • dropdown.background#1a1a1a
  • dropdown.border#3a3a3a
  • dropdown.foreground#dbd7ca
  • dropdown.listBackground#1a1a1a
  • editor.background#121212
  • editor.findMatchBackground#4d937560
  • editor.findMatchBorder#4d937580
  • editor.findMatchHighlightBackground#4d937535
  • editor.focusedStackFrameHighlightBackground#4d937520
  • editor.foldBackground#dbd7ca08
  • editor.foreground#dbd7ca
  • editor.inactiveSelectionBackground#3a3a3a90
  • editor.lineHighlightBackground#1a1a1a
  • editor.selectionBackground#42403d
  • editor.selectionHighlightBackground#42403d70
  • editor.stackFrameHighlightBackground#bd976a20
  • editor.wordHighlightBackground#42403d50
  • editor.wordHighlightStrongBackground#42403d70
  • editorBracketHighlight.foreground1#5da9a7
  • editorBracketHighlight.foreground2#d29384
  • editorBracketHighlight.foreground3#bd976a
  • editorBracketHighlight.foreground4#9aba7a
  • editorBracketHighlight.foreground5#cb7676
  • editorBracketHighlight.foreground6#4c9a91
  • editorBracketMatch.background#5da9a720
  • editorBracketMatch.border#5da9a740
  • editorError.foreground#e05561
  • editorGroup.border#3a3a3a
  • editorGroupHeader.tabsBackground#161616
  • editorGroupHeader.tabsBorder#2a2a2a
  • editorGutter.addedBackground#4d9375
  • editorGutter.commentRangeForeground#585858
  • editorGutter.deletedBackground#cb7676
  • editorGutter.foldingControlForeground#585858
  • editorGutter.modifiedBackground#6db3c2
  • editorHint.foreground#7d857c
  • editorHoverWidget.background#1a1a1a
  • editorHoverWidget.border#3a3a3a
  • editorHoverWidget.foreground#dbd7ca
  • editorIndentGuide.activeBackground#42403d
  • editorIndentGuide.background#2e2e2e
  • editorInfo.foreground#6db3c2
  • editorInlayHint.background#1a1a1a00
  • editorInlayHint.foreground#606060
  • editorLineNumber.activeForeground#777777
  • editorLineNumber.foreground#333333
  • editorOverviewRuler.border#121212
  • editorRuler.foreground#1a1a1a
  • editorStickyScroll.background#161616
  • editorStickyScrollHover.background#1a1a1a
  • editorSuggestWidget.background#1a1a1a
  • editorSuggestWidget.border#3a3a3a
  • editorSuggestWidget.focusHighlightForeground#4d9375
  • editorSuggestWidget.foreground#dbd7ca
  • editorSuggestWidget.highlightForeground#4d9375
  • editorSuggestWidget.selectedBackground#3a3a3a
  • editorSuggestWidget.selectedForeground#dbd7ca
  • editorWarning.foreground#e6cc77
  • editorWhitespace.foreground#2e2e2e
  • editorWidget.background#1a1a1a
  • errorForeground#cb7676
  • focusBorder#00000000
  • foreground#dbd7ca
  • gitDecoration.addedResourceForeground#4d9375
  • gitDecoration.conflictingResourceForeground#bd976a
  • gitDecoration.deletedResourceForeground#cb7676
  • gitDecoration.ignoredResourceForeground#555555
  • gitDecoration.modifiedResourceForeground#6db3c2
  • gitDecoration.submoduleResourceForeground#dbd7ca90
  • gitDecoration.untrackedResourceForeground#5da9a7
  • input.background#1a1a1a
  • input.border#3a3a3a
  • input.foreground#dbd7ca
  • input.placeholderForeground#dbd7ca50
  • inputOption.activeBackground#dbd7ca20
  • list.activeSelectionBackground#3a3a3a
  • list.activeSelectionForeground#dbd7ca
  • list.focusBackground#3a3a3a
  • list.focusForeground#dbd7ca
  • list.highlightForeground#4d9375
  • list.hoverBackground#2a2a2a
  • list.hoverForeground#dbd7ca
  • list.inactiveFocusBackground#2a2a2a
  • list.inactiveSelectionBackground#333333
  • list.inactiveSelectionForeground#dbd7ca
  • menu.background#1a1a1a
  • menu.border#3a3a3a
  • menu.foreground#dbd7ca
  • menu.selectionBackground#3a3a3a
  • menu.selectionForeground#dbd7ca
  • menu.separatorBackground#2e2e2e
  • menubar.selectionBackground#2a2a2a
  • menubar.selectionForeground#dbd7ca
  • minimap.errorHighlight#e05561
  • minimap.findMatchHighlight#4d937560
  • minimap.selectionHighlight#3a3a3a
  • minimap.warningHighlight#e6cc77
  • notificationCenterHeader.background#1a1a1a
  • notificationCenterHeader.foreground#dbd7ca
  • notifications.background#1a1a1a
  • notifications.border#3a3a3a
  • notifications.foreground#dbd7ca
  • notificationsErrorIcon.foreground#cb7676
  • notificationsInfoIcon.foreground#6db3c2
  • notificationsWarningIcon.foreground#e6cc77
  • panel.background#121212
  • panel.border#2a2a2a
  • panelInput.border#3a3a3a
  • panelTitle.activeBorder#4d9375
  • panelTitle.activeForeground#dbd7ca
  • panelTitle.inactiveForeground#555555
  • peekViewEditor.background#121212
  • peekViewEditor.matchHighlightBackground#e6cc7733
  • peekViewResult.background#121212
  • peekViewResult.matchHighlightBackground#e6cc7733
  • peekViewResult.selectionBackground#3a3a3a
  • peekViewResult.selectionForeground#dbd7ca
  • pickerGroup.border#3a3a3a
  • pickerGroup.foreground#dbd7ca
  • problemsErrorIcon.foreground#e05561
  • problemsInfoIcon.foreground#6db3c2
  • problemsWarningIcon.foreground#e6cc77
  • progressBar.background#4d9375
  • quickInput.background#1a1a1a
  • quickInput.foreground#dbd7ca
  • quickInputList.focusBackground#3a3a3a
  • quickInputList.focusForeground#dbd7ca
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#dbd7ca30
  • scrollbarSlider.background#dbd7ca10
  • scrollbarSlider.hoverBackground#dbd7ca30
  • settings.headerForeground#dbd7ca
  • settings.modifiedItemIndicator#4d9375
  • sideBar.background#121212
  • sideBar.border#2a2a2a
  • sideBar.foreground#dbd7ca
  • sideBarSectionHeader.background#121212
  • sideBarSectionHeader.border#2a2a2a
  • sideBarSectionHeader.foreground#dbd7ca
  • sideBarTitle.foreground#dbd7ca
  • statusBar.background#1a1a1a
  • statusBar.border#2a2a2a
  • statusBar.debuggingBackground#1a1a1a
  • statusBar.debuggingForeground#d29384
  • statusBar.foreground#dbd7ca
  • statusBar.noFolderBackground#1a1a1a
  • statusBarItem.activeBackground#ffffff20
  • statusBarItem.hoverBackground#ffffff10
  • statusBarItem.prominentBackground#3a3a3a
  • statusBarItem.remoteBackground#4d9375
  • statusBarItem.remoteForeground#121212
  • tab.activeBackground#1a1a1a
  • tab.activeBorder#2a2a2a
  • tab.activeBorderTop#dbd7ca80
  • tab.activeForeground#dbd7ca
  • tab.border#2a2a2a
  • tab.hoverBackground#2a2a2a
  • tab.hoverForeground#dbd7ca
  • tab.inactiveBackground#161616
  • tab.inactiveForeground#555555
  • tab.unfocusedActiveBorder#2a2a2a
  • tab.unfocusedActiveBorderTop#2a2a2a
  • tab.unfocusedHoverBackground#1e1e1e
  • tab.unfocusedHoverForeground#dbd7ca
  • terminal.ansiBlack#2e2e2e
  • terminal.ansiBlue#6db3c2
  • terminal.ansiBrightBlack#585858
  • terminal.ansiBrightBlue#6db3c2
  • terminal.ansiBrightCyan#5da9a7
  • terminal.ansiBrightGreen#4d9375
  • terminal.ansiBrightMagenta#d29384
  • terminal.ansiBrightRed#cb7676
  • terminal.ansiBrightWhite#dbd7ca
  • terminal.ansiBrightYellow#e6cc77
  • terminal.ansiCyan#5da9a7
  • terminal.ansiGreen#4d9375
  • terminal.ansiMagenta#d29384
  • terminal.ansiRed#cb7676
  • terminal.ansiWhite#dbd7ca
  • terminal.ansiYellow#e6cc77
  • terminal.foreground#dbd7ca
  • terminal.selectionBackground#3a3a3a
  • textBlockQuote.background#121212
  • textBlockQuote.border#3a3a3a
  • textCodeBlock.background#1a1a1a
  • textLink.activeForeground#4d9375
  • textLink.foreground#4d9375
  • textPreformat.foreground#dbd7ca
  • titleBar.activeBackground#121212
  • titleBar.activeForeground#dbd7ca
  • titleBar.border#2a2a2a
  • titleBar.inactiveBackground#121212
  • titleBar.inactiveForeground#555555
  • tree.indentGuidesStroke#2e2e2e
  • welcomePage.buttonBackground#1a1a1a
  • welcomePage.buttonHoverBackground#3a3a3a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#7d857c
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#858585
punctuation.definition.string#d2938488
punctuation.definition.template-expression, punctuation.section.embedded#8f8c84
keyword, storage.type.class.jsdoc#4d9375
keyword.control.import, keyword.control.from, keyword.control.export, keyword.import, keyword.other.import#7d857c
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.trycatch#cb7676
keyword.operator, keyword.operator.assignment.compound, keyword.operator.rest, keyword.operator.spread, keyword.operator.ternary, keyword.other.unit#8f8c84
keyword.operator.relational, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.type.annotation, keyword.operator.type#858585
storage, storage.type, storage.modifier#cb7676
storage.type.function, storage.type.class, storage.type.interface, storage.type.enum, storage.type.struct#4d9375
string, string punctuation.section.embedded source, attribute.value#d29384
string.regexp, source.regexp#c99076
string variable#d29384
entity.name.function, support.function#9aba7a
entity.name.function.macro, support.function.macro#cb7676
entity, entity.name#9aba7a
entity.name.tag, tag.html#5da9a7
entity.name.type, support.type, support.type.primitive, support.type.builtin#5da9a7
entity.name.namespace, entity.name.module#5da9a7
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#bd976a
variable, identifier#bfae90
variable.parameter, variable.parameter.function#b8a965
variable.language#cb7676
variable.other.property, variable.other.member, variable.other.object.property, meta.object-literal.key#bfae90
variable.other.enummember#5da9a7
property, meta.property-name, support.type.property-name, entity.name.tag.yaml, attribute.name#b8a965
punctuation.support.type.property-name#b8a96588
support#b8a965
constant, entity.name.constant, support.constant#c99076
constant.numeric, number#4c9a91
constant.character#d29384
constant.character.escape#cb7676
constant.language#c99076
constant.language.boolean#c99076
constant.language.null, constant.language.undefined#cb7676
namespace#5da9a7
meta.module-reference#4d9375
entity.name.label#d29384
markup.heading, markup.heading entity.name#9aba7abold
markup.bold#dbd7cabold
markup.italic#dbd7caitalic
markup.strikethroughstrikethrough
markup.quote#5da9a7
markup.raw#bd976a
markup.underline.link.markdown, markup.underline.link.image.markdown#4d9375underline
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#d29384
punctuation.definition.list.begin.markdown#cb7676
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#cb7676
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#4d9375
markup.changed, punctuation.definition.changed#bd976a
markup.ignored, markup.untracked#2e2e2e
meta.diff.range#5da9a7bold
meta.diff.header#6db3c2
keyword.operator.quantifier.regexp#4c9a91
string.regexp constant.character.escape#cb7676
invalid.broken#e05561italic
invalid.deprecated#e05561italic
invalid.illegal#e05561italic
invalid.unimplemented#e05561italic
message.error#e05561
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#dbd7ca
invalid.illegal.unrecognized-tag.htmlnormal
Patina by Luis C. Markmann - VS Code Theme