Skip to main content
Coding Theme

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.activeBackground#101119
  • activityBar.activeBorder#c44f64
  • activityBar.activeFocusBorder#c44f64
  • activityBar.background#0a0a0f
  • activityBar.border#101110
  • activityBar.dropBorder#c44f64
  • activityBar.foreground#383b47
  • activityBar.inactiveForeground#383b47
  • activityBarBadge.background#e76d83cc
  • activityBarBadge.foreground#ffffff
  • badge.background#101119
  • badge.foreground#afafaf
  • banner.foreground#afafaf
  • breadcrumb.activeSelectionForeground#e0eeeec0
  • breadcrumb.background#101119
  • breadcrumb.focusForeground#e0eeee80
  • breadcrumb.foreground#e0eeee40
  • breadcrumbPicker.background#101119
  • button.background#c44f64
  • button.border#cc6477
  • button.foreground#0a0a0f
  • button.hoverBackground#cc6477
  • button.secondaryBackground#cc6477
  • button.secondaryForeground#cc6477
  • button.secondaryHoverBackground#c44f64
  • checkbox.foreground#afafaf
  • debugConsoleInputIcon.foreground#e3b505
  • debugExceptionWidget.background#0f131a
  • debugExceptionWidget.border#11151c
  • debugIcon.breakpointDisabledForeground#f2966880
  • debugIcon.breakpointForeground#f29668
  • debugToolBar.background#0f131a
  • descriptionForeground#565b66
  • diffEditor.diagonalFill#11151c
  • diffEditor.insertedTextBackground#7fd9621f
  • diffEditor.removedTextBackground#6103451f
  • dropdown.background#0d1017
  • dropdown.border#565b6645
  • dropdown.foreground#afafaf
  • editor.background#101119
  • editor.findMatchBackground#cc6477aa
  • editor.findMatchBorder#cc6477aa
  • editor.findMatchHighlightBackground#6f6f6f
  • editor.findMatchHighlightBorder#6f6f6faa
  • editor.findRangeHighlightBackground#6f6f6f50
  • editor.findRangeHighlightBorder#6f6f6f10
  • editor.focusedStackFrameHighlightBackground#ff0000
  • editor.foldBackground#0d0c0fca
  • editor.foreground#afafaf
  • editor.hoverHighlightBackground#6f6f6f40
  • editor.inactiveSelectionBackground#6f6f6f20
  • editor.inlineValuesBackground#ff0000
  • editor.inlineValuesForeground#ff0000
  • editor.lineHighlightBackground#383b473a
  • editor.lineHighlightBorder#383b470b
  • editor.linkedEditingBackground#ff0000
  • editor.rangeHighlightBackground#6f6f6f50
  • editor.rangeHighlightBorder#6f6f6f10
  • editor.selectionBackground#6f6f6f50
  • editor.selectionForeground#afafaf
  • editor.selectionHighlightBackground#6f6f6f50
  • editor.selectionHighlightBorder#6f6f6f50
  • editor.snippetFinalTabstopHighlightBackground#e0b380aa
  • editor.snippetFinalTabstopHighlightBorder#e0b380
  • editor.snippetTabstopHighlightBackground#6f6f6f20
  • editor.snippetTabstopHighlightBorder#c44f64
  • editor.stackFrameHighlightBackground#ff0000
  • editor.symbolHighlightBackground#6f6f6f50
  • editor.symbolHighlightBorder#6f6f6f10
  • editor.wordHighlightBackground#ff0000
  • editor.wordHighlightBorder#6f6f6f10
  • editor.wordHighlightStrongBackground#6f6f6f20
  • editor.wordHighlightStrongBorder#7fd96280
  • editorBracketHighlight.unexpectedBracket.foreground#e76d83
  • editorBracketMatch.background#6f6f6f60
  • editorBracketMatch.border#6f6f6fc0
  • editorCodeLens.foreground#afafaf
  • editorCursor.background#6f6f6f50
  • editorCursor.foreground#e76d83f0
  • editorError.background#00000000
  • editorError.foreground#c44f64
  • editorGroup.background#0f131a
  • editorGroup.border#11151c
  • editorGroupHeader.noTabsBackground#0b0e14
  • editorGroupHeader.tabsBackground#0b0e14
  • editorGroupHeader.tabsBorder#0b0e14
  • editorGutter.addedBackground#81f495
  • editorGutter.background#101119
  • editorGutter.commentRangeForeground#6f6f6faa
  • editorGutter.deletedBackground#e76d83f0
  • editorGutter.foldingControlForeground#6f6f6f
  • editorGutter.modifiedBackground#a2afeb
  • editorHoverWidget.background#0f131a
  • editorHoverWidget.border#11151c
  • editorIndentGuide.activeBackground#6c738080
  • editorIndentGuide.background#6c738033
  • editorLineNumber.activeForeground#7e8e8d
  • editorLineNumber.foreground#4e4e5d
  • editorLink.activeForeground#e76d83
  • editorMarkerNavigation.background#0f131a
  • editorOverviewRuler.addedForeground#7fd962
  • editorOverviewRuler.border#11151c
  • editorOverviewRuler.bracketMatchForeground#6c7380b3
  • editorOverviewRuler.deletedForeground#610345
  • editorOverviewRuler.errorForeground#f03e3e
  • editorOverviewRuler.findMatchForeground#6c5980
  • editorOverviewRuler.modifiedForeground#73b8ff
  • editorOverviewRuler.rangeHighlightForeground#afafaf
  • editorOverviewRuler.warningForeground#e3b505
  • editorOverviewRuler.wordHighlightForeground#73b8ff66
  • editorOverviewRuler.wordHighlightStrongForeground#7fd96266
  • editorRuler.foreground#6c738033
  • editorSuggestWidget.background#101119
  • editorSuggestWidget.border#101119aa
  • editorSuggestWidget.focusHighlightForeground#f7d08a
  • editorSuggestWidget.foreground#afafaf
  • editorSuggestWidget.highlightForeground#e76d83f0
  • editorSuggestWidget.selectedBackground#6f6f6f50
  • editorSuggestWidget.selectedForeground#f7d08aaa
  • editorSuggestWidget.selectedIconForeground#afafaf
  • editorWarning.foreground#e3b505
  • editorWhitespace.foreground#6c738099
  • editorWidget.background#101119
  • editorWidget.border#c44f64
  • editorWidget.foreground#6f6f6f
  • editorWidget.resizeBorder#f7d08aaa
  • errorForeground#c44f64
  • extensionButton.prominentBackground#e3b505
  • extensionButton.prominentForeground#0d1017
  • extensionButton.prominentHoverBackground#e1af4b
  • focusBorder#c44f64aa
  • foreground#6f6f6f
  • gitDecoration.addedResourceForeground#81f495
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#610345b3
  • gitDecoration.ignoredResourceForeground#565b6680
  • gitDecoration.modifiedResourceForeground#73b8ffb3
  • gitDecoration.submoduleResourceForeground#d2a6ffb3
  • gitDecoration.untrackedResourceForeground#7fd962b3
  • icon.foreground#afafafc0
  • input.background#0a0a0f
  • input.border#242a2ac0
  • input.foreground#999a90
  • input.placeholderForeground#272a31
  • inputOption.activeBackground#272a31
  • inputOption.activeBorder#272a31
  • inputOption.activeForeground#c44f64
  • inputValidation.errorBackground#101110
  • inputValidation.errorBorder#c44f64aa
  • inputValidation.errorForeground#c44f64
  • inputValidation.infoBackground#101110
  • inputValidation.infoBorder#a2afebaa
  • inputValidation.infoForeground#a2afeb
  • inputValidation.warningBackground#101110
  • inputValidation.warningBorder#f7d08aaa
  • inputValidation.warningForeground#f7d08a
  • keybindingLabel.background#101110
  • keybindingLabel.border#e0eeee50
  • keybindingLabel.bottomBorder#e0eeee80
  • keybindingLabel.foreground#e0eeeea0
  • list.activeSelectionBackground#47526640
  • list.activeSelectionForeground#bfbdb6
  • list.deemphasizedForeground#f03e3e
  • list.errorForeground#f03e3e
  • list.filterMatchBackground#5f4c7266
  • list.filterMatchBorder#6c598066
  • list.focusBackground#47526640
  • list.focusForeground#bfbdb6
  • list.focusOutline#47526640
  • list.highlightForeground#e3b505
  • list.hoverBackground#47526640
  • list.inactiveSelectionBackground#47526633
  • list.inactiveSelectionForeground#565b66
  • list.invalidItemForeground#565b664d
  • listFilterWidget.background#0f131a
  • listFilterWidget.noMatchesOutline#f03e3e
  • listFilterWidget.outline#e3b505
  • menu.background#101119
  • menu.border#0d0c0f
  • menu.foreground#afafaf
  • menu.selectionBackground#6f6f6f30
  • menu.selectionBorder#6f6f6f10
  • menu.selectionForeground#bfbfbf
  • menu.separatorBackground#6f6f6fc0
  • menubar.selectionBackground#6f6f6f20
  • menubar.selectionBorder#6f6f6f10
  • menubar.selectionForeground#bfbfbf
  • minimap.background#101119
  • minimap.errorHighlight#c44f64
  • minimap.findMatchHighlight#bfbfbf
  • minimap.selectionHighlight#6f6f6f90
  • minimap.warningHighlight#f7d08a
  • minimapGutter.addedBackground#81f495
  • minimapGutter.deletedBackground#c44f64
  • minimapGutter.modifiedBackground#a2afeb
  • minimapSlider.activeBackground#bfbfbf50
  • minimapSlider.background#bfbfbf10
  • minimapSlider.hoverBackground#bfbfbf30
  • notificationCenter.border#bfbfbf40
  • notificationCenterHeader.background#1a1b27
  • notificationCenterHeader.foreground#bfbfbf40
  • notificationLink.foreground#e76d83b0
  • notifications.background#101119
  • notifications.border#1a1b27
  • notifications.foreground#bfbfbfa0
  • notificationsErrorIcon.foreground#e76d83
  • notificationsInfoIcon.foreground#a2afeb
  • notificationsWarningIcon.foreground#f7d08a
  • notificationToast.border#bfbfbf40
  • panel.background#101119
  • panel.border#0d0c0f
  • panel.dropBorder#6f6f6f
  • panelInput.border#ff0000
  • panelSection.border#ff0000
  • panelSection.dropBackground#ff0000
  • panelSectionHeader.background#ff0000
  • panelSectionHeader.border#ff0000
  • panelSectionHeader.foreground#ff0000
  • panelTitle.activeBorder#c44f64
  • panelTitle.activeForeground#bfbfbf
  • panelTitle.inactiveForeground#bfbfbf80
  • peekView.border#47526640
  • peekViewEditor.background#0f131a
  • peekViewEditor.matchHighlightBackground#6c598066
  • peekViewEditor.matchHighlightBorder#5f4c7266
  • peekViewResult.background#0f131a
  • peekViewResult.fileForeground#bfbdb6
  • peekViewResult.lineForeground#565b66
  • peekViewResult.matchHighlightBackground#6c598066
  • peekViewResult.selectionBackground#47526640
  • peekViewTitle.background#47526640
  • peekViewTitleDescription.foreground#565b66
  • peekViewTitleLabel.foreground#bfbdb6
  • pickerGroup.border#e0eeee50
  • pickerGroup.foreground#e0eeeea0
  • progressBar.background#e3b505
  • quickInput.background#101119
  • quickInput.foreground#afafafc0
  • quickInputList.focusBackground#e0eeee15
  • quickInputList.focusForeground#e0eeeee0
  • quickInputList.focusIconForeground#e0eeeea0
  • quickInputTitle.background#101110
  • scrollbar.shadow#09080a
  • scrollbarSlider.activeBackground#bfbfbf60
  • scrollbarSlider.background#bfbfbf20
  • scrollbarSlider.hoverBackground#bfbfbf40
  • selection.background#101119
  • settings.checkboxBackground#272a31
  • settings.checkboxBorder#242a2ac0
  • settings.checkboxForeground#c44f64aa
  • settings.dropdownBackground#101110
  • settings.dropdownBorder#101119
  • settings.headerForeground#6e6e6d
  • settings.modifiedItemIndicator#c44f64aa
  • settings.textInputBackground#101110
  • settings.textInputBorder#242a2ac0
  • settings.textInputForeground#6e6e6d
  • sideBar.background#101119
  • sideBar.border#0d0c0f
  • sideBar.dropBackground#6e6e6d40
  • sideBar.foreground#6e6e6d
  • sideBarSectionHeader.background#101119
  • sideBarSectionHeader.border#c44f64aa
  • sideBarSectionHeader.foreground#6e6e6d
  • sideBarTitle.foreground#6f6f6f
  • statusBar.background#0b0e14
  • statusBar.border#0b0e14
  • statusBar.debuggingBackground#f29668
  • statusBar.debuggingForeground#0d1017
  • statusBar.foreground#565b66
  • statusBar.noFolderBackground#0f131a
  • statusBarItem.activeBackground#565b6633
  • statusBarItem.hoverBackground#565b6633
  • statusBarItem.prominentBackground#11151c
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#e3b505
  • statusBarItem.remoteForeground#0d1017
  • tab.activeBackground#14151f
  • tab.activeBorder#c44f64
  • tab.activeForeground#60706a
  • tab.activeModifiedBorder#c44f64
  • tab.border#0b0e14
  • tab.hoverBackground#10111930
  • tab.hoverBorder#c44f64
  • tab.hoverForeground#e0eeeeaa
  • tab.inactiveBackground#101119
  • tab.inactiveForeground#e0eeee40
  • tab.inactiveModifiedBorder#c44f64
  • tab.lastPinnedBorder#7e8e8d
  • tab.unfocusedActiveBackground#181925aa
  • tab.unfocusedActiveBorder#e76d8355
  • tab.unfocusedActiveForeground#e0eeee50
  • tab.unfocusedInactiveForeground#565b66
  • terminal.ansiBlack#0a0a0f
  • terminal.ansiBlue#a2afeb
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#59c2ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#aad94c
  • terminal.ansiBrightMagenta#d2a6ff
  • terminal.ansiBrightRed#f03e3e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f7d08a
  • terminal.ansiCyan#adcccc
  • terminal.ansiGreen#7fd962
  • terminal.ansiMagenta#cda1fa
  • terminal.ansiRed#c44f64
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#e0b380
  • terminal.background#0d0e15
  • terminal.border#0a0a0f
  • terminal.dropBackground#6f6f6f
  • terminal.foreground#afafaf
  • terminal.selectionBackground#6f6f6f4a
  • terminal.tab.activeBorder#c44f64
  • terminalCursor.background#6f6f6f4a
  • terminalCursor.foreground#6f6f6f7a
  • textBlockQuote.background#0f131a
  • textLink.activeForeground#e76d83
  • textLink.foreground#e76d83b0
  • textPreformat.foreground#bfbdb6
  • titleBar.activeBackground#0d0c0f
  • titleBar.activeForeground#afafaf
  • titleBar.border#0d0c0f
  • titleBar.inactiveBackground#0d0c0f
  • titleBar.inactiveForeground#6f6f6f
  • toolbar.activeBackground#09080a
  • toolbar.hoverBackground#bfbfbf40
  • toolbar.hoverOutline#bfbfbf40
  • tree.indentGuidesStroke#6c738080
  • walkThrough.embeddedEditorBackground#0f131a
  • welcomePage.background#101119
  • welcomePage.buttonBackground#e3b50566
  • welcomePage.progress.background#131721
  • welcomePage.tileBackground#0b0e14
  • widget.shadow#0d0d13
  • window.activeBorder#09080a
  • window.inactiveBorder#e76d8350

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6C809AAAitalic
string, constant.other.symbol#F7D08A
constant.numeric#3A0CA3
constant.language#3A0CA3
variable, variable.parameter.function-call#6C698D
variable.member#F7D08A
variable.language#6C698Ditalic
storage#F7D08A
keyword#E76D83
keyword.operator#E76D83
punctuation.separator, punctuation.terminator#6C698D8A
punctuation.section#6C698DCA
punctuation.accessor#8AE9C1AA
storage.type.function#F7D08A
entity.name.function#81F495
variable.parameter, meta.parameter#6C698D
variable.function, variable.annotation, meta.function-call.generic, support.function.go#81F495
support.function, support.macro#E76D83
entity.name.import, entity.name.package#8AE9C1
entity.name#E76D83
entity.name.tag, meta.tag.sgml#6153CC
support.constant#E76D83italic
support.type, support.class, source.go storage.type#8AE9C1
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#E6B673
invalid#F03E3E
meta.diff, meta.diff.header#C594C5
constant.numeric.line-number.find-in-files - match#ACB6BF8C
constant.numeric.line-number.match#FF8F40
entity.name.filename.find-in-files#AAD94C
message.error#F03E3E
markup.heading, markup.heading entity.name#AAD94Cbold
markup.underline.link, string.other.link#39BAE6
markup.italic#F07178italic
markup.bold#F07178bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#ACB6BF8Cbold
markup.quote#95E6CBitalic
markup.list punctuation.definition.list.begin#FFB454
markup.inserted#7FD962
markup.changed#73B8FF
markup.deleted#610345
markup.strike#E6B673
markup.table#39BAE6
text.html.markdown markup.inline.raw#F29668
text.html.markdown meta.dummy.line-break#ACB6BF8C
punctuation.definition.markdown#ACB6BF8C
comment#202C39
punctuation.definition.comment#202C39
string#F7D08A
meta.embedded.assembly#F7D08A
keyword - keyword.operator#E76D83
keyword.control#E76D83
storage#E76D83
storage.type#E76D83
constant.numeric#D696D6
entity.name.type#A2AFEB
entity.name.class#A2AFEB
support.type#A2AFEB
support.class#A2AFEB
entity.name.function#81F495
support.function#81F495
variable#D1C2C2
entity.name.variable#D1C2C2
keyword#E76D83
keyword.operator#D15E73
support.function.label#D15E73
punctuation.separator.label-colon#B0C4ABbold
punctuation.separator#B0C4AB
punctuation#ADCCCC
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
comment#7A8080AA
punctuation.definition.comment#7A8080AA
string#F7D08A
meta.embedded.assembly#F7D08A
keyword - keyword.operator#E76D83
keyword.control#E76D83
storage#E76D83
storage.type#E76D83
constant.numeric#D696D6
entity.name.type#A2AFEB
entity.name.class#A2AFEB
support.type#A2AFEB
support.class#A2AFEB
entity.name.function#81F495
support.function#81F495
variable#D1C2C2
entity.name.variable#D1C2C2
keyword#E76D83
keyword.operator#D15E73
support.function.label#D15E73
punctuation.separator.label-colon#B0C4ABbold
punctuation.separator#B0C4AB
punctuation#ADCCCC
comment#7A8080AA
punctuation.definition.comment#7A8080AA
string#F7D08A
meta.embedded.assembly#F7D08A
keyword - keyword.operator#E76D83
keyword.control#E76D83
storage#E76D83
storage.type#E76D83
constant.numeric#D696D6
entity.name.type#A2AFEB
entity.name.class#A2AFEB
support.type#A2AFEB
support.class#A2AFEB
entity.name.function#81F495
support.function#81F495
variable#D1C2C2
entity.name.variable#D1C2C2
keyword#E76D83
keyword.operator#D15E73
support.function.label#D15E73
punctuation.separator.label-colon#B0C4ABbold
punctuation.separator#B0C4AB
punctuation#ADCCCC
comment#7A8080AA
punctuation.definition.comment#7A8080AA
string#F7D08A
meta.embedded.assembly#F7D08A
keyword - keyword.operator#E76D83
keyword.control#E76D83
storage#E76D83
storage.type#E76D83
constant.numeric#D696D6
entity.name.type#A2AFEB
entity.name.class#A2AFEB
support.type#A2AFEB
support.class#A2AFEB
entity.name.function#81F495
support.function#81F495
variable#D1C2C2
entity.name.variable#D1C2C2
keyword#E76D83
keyword.operator#D15E73
support.function.label#D15E73
punctuation.separator.label-colon#B0C4ABbold
punctuation.separator#B0C4AB
punctuation#ADCCCC
comment#7A8080AA
punctuation.definition.comment#7A8080AA
string#F7D08A
meta.embedded.assembly#F7D08A
keyword - keyword.operator#E76D83
keyword.control#E76D83
storage#E76D83
storage.type#E76D83
constant.numeric#D696D6
entity.name.type#A2AFEB
entity.name.class#A2AFEB
support.type#A2AFEB
support.class#A2AFEB
entity.name.function#81F495
support.function#81F495
variable#D1C2C2
entity.name.variable#D1C2C2
keyword#E76D83
keyword.operator#D15E73
support.function.label#D15E73
punctuation.separator.label-colon#B0C4ABbold
punctuation.separator#B0C4AB
punctuation#ADCCCC
Jacy lang by Jacy-Lang - VS Code Theme