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.background#313D31
  • activityBar.dropBackground#a0b4461f
  • activityBar.foreground#88b57d
  • activityBar.inactiveForeground#888a80
  • activityBarBadge.background#191F19
  • badge.background#454F32
  • badge.foreground#C9C984
  • breadcrumb.activeSelectionForeground#407a29
  • breadcrumb.background#191F19
  • breadcrumb.focusForeground#A3B57D
  • breadcrumb.foreground#29742dcc
  • breadcrumbPicker.background#252e25
  • button.background#1e3d05
  • button.foreground#446142
  • button.hoverBackground#88b57d
  • debugExceptionWidget.background#291011
  • debugExceptionWidget.border#454545
  • debugToolBar.background#191F19
  • descriptionForeground#8c9953b3
  • diffEditor.insertedTextBackground#e2fda333
  • diffEditor.removedTextBackground#c4010146
  • dropdown.background#161b16
  • dropdown.border#454545
  • dropdown.foreground#b0b2a4
  • editor.background#191F19
  • editor.findMatchBackground#7c39bf6e
  • editor.findMatchHighlightBackground#ab387244
  • editor.findRangeHighlightBackground#a6673a4f
  • editor.foreground#9D9E95
  • editor.hoverHighlightBackground#7870263b
  • editor.inactiveSelectionBackground#5c561e0c
  • editor.lineHighlightBackground#3f573122
  • editor.lineHighlightBorder#45454513
  • editor.rangeHighlightBackground#626b3a1a
  • editor.selectionBackground#648e963d
  • editor.selectionHighlightBackground#92965e1e
  • editor.snippetFinalTabstopHighlightBorder#454545
  • editor.snippetTabstopHighlightBackground#94c5214d
  • editor.wordHighlightBackground#7d993d20
  • editor.wordHighlightStrongBackground#3D969917
  • editorBracketMatch.background#47462eec
  • editorBracketMatch.border#47462eec
  • editorCodeLens.foreground#99993D
  • editorCursor.foreground#47cc26
  • editorError.foreground#B22D2D
  • editorGroup.border#454545
  • editorGroup.dropBackground#64967569
  • editorGroupHeader.noTabsBackground#232c23
  • editorGroupHeader.tabsBackground#252e25
  • editorGutter.addedBackground#2f3a2d
  • editorGutter.background#191F19
  • editorGutter.commentRangeForeground#746a51
  • editorGutter.deletedBackground#5e2427
  • editorGutter.modifiedBackground#2e5737
  • editorHint.foreground#96c78db3
  • editorHoverWidget.background#3f4e3f
  • editorHoverWidget.border#454545
  • editorIndentGuide.activeBackground#454545
  • editorIndentGuide.background#454545a9
  • editorInfo.foreground#2e6e03
  • editorLineNumber.activeForeground#6b6d58
  • editorLineNumber.foreground#454545a9
  • editorLink.activeForeground#7d8a57
  • editorMarkerNavigation.background#191F19
  • editorMarkerNavigationError.background#752424
  • editorMarkerNavigationInfo.background#191F19
  • editorMarkerNavigationWarning.background#8d8620
  • editorOverviewRuler.addedForeground#01802b99
  • editorOverviewRuler.border#454545
  • editorOverviewRuler.bracketMatchForeground#57835d
  • editorOverviewRuler.commonContentForeground#3f4d3766
  • editorOverviewRuler.currentContentForeground#40c85262
  • editorOverviewRuler.deletedForeground#a7270798
  • editorOverviewRuler.errorForeground#940505b3
  • editorOverviewRuler.findMatchForeground#649933b3
  • editorOverviewRuler.incomingContentForeground#22802680
  • editorOverviewRuler.infoForeground#275e0eb3
  • editorOverviewRuler.modifiedForeground#038a2099
  • editorOverviewRuler.rangeHighlightForeground#00662799
  • editorOverviewRuler.selectionHighlightForeground#02a03f99
  • editorOverviewRuler.warningForeground#7a8608b3
  • editorOverviewRuler.wordHighlightForeground#51814399
  • editorOverviewRuler.wordHighlightStrongForeground#5ea18bcc
  • editorPane.background#252e25
  • editorRuler.foreground#585c33
  • editorSuggestWidget.background#3f4e3f
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#b0b2a4
  • editorSuggestWidget.highlightForeground#586130
  • editorSuggestWidget.selectedBackground#213d2d
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#83a03f
  • editorWhitespace.foreground#454545a9
  • editorWidget.background#252e25
  • editorWidget.border#454545
  • errorForeground#912723f3
  • extensionButton.prominentBackground#2f7532
  • extensionButton.prominentForeground#b9bbad
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#698d606b
  • foreground#b0b2a4
  • gitDecoration.addedResourceForeground#46b65b
  • gitDecoration.conflictingResourceForeground#c4976c
  • gitDecoration.deletedResourceForeground#81453a
  • gitDecoration.ignoredResourceForeground#5e5e5eda
  • gitDecoration.modifiedResourceForeground#4e8d58
  • gitDecoration.submoduleResourceForeground#487c5c
  • gitDecoration.untrackedResourceForeground#959759
  • input.background#161b16
  • input.border#454545
  • input.foreground#C0C2B3
  • input.placeholderForeground#9ca2a080
  • inputOption.activeBorder#88b57d
  • inputValidation.errorBackground#490f0f
  • inputValidation.errorBorder#8b0d02
  • inputValidation.infoBackground#06492d
  • inputValidation.infoBorder#007a4b
  • inputValidation.warningBackground#2a3008
  • inputValidation.warningBorder#725d01
  • list.activeSelectionBackground#66793a4a
  • list.activeSelectionForeground#88b57d
  • list.dropBackground#405c50
  • list.errorForeground#f88070
  • list.focusBackground#a7af5e11
  • list.focusForeground#A3B57D
  • list.highlightForeground#909454
  • list.hoverBackground#a7af5e11
  • list.hoverForeground#A3B57D
  • list.inactiveFocusBackground#313135
  • list.inactiveSelectionBackground#90945415
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#3c3c3c
  • menu.foreground#f0f0f0
  • menu.selectionBackground#405c50
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#bbbbbb
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#cccccc
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#343c3d
  • notificationLink.foreground#3794ff
  • notifications.background#2c2f28
  • notifications.border#454545
  • panel.background#252e25
  • panel.border#454545
  • panel.dropBackground#b3aa791f
  • panelTitle.activeBorder#454545
  • panelTitle.activeForeground#6ba25d
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#045f2adc
  • peekViewEditor.background#162409ea
  • peekViewEditor.matchHighlightBackground#665d0e99
  • peekViewEditorGutter.background#12301cf3
  • peekViewResult.background#252526
  • peekViewResult.fileForeground#b0b2a4
  • peekViewResult.lineForeground#7e7960
  • peekViewResult.matchHighlightBackground#c2b5084d
  • peekViewResult.selectionBackground#3d7a2a33
  • peekViewResult.selectionForeground#b0b2a4
  • peekViewTitle.background#636348
  • peekViewTitleDescription.foreground#a4a572b3
  • peekViewTitleLabel.foreground#b0b2a4
  • pickerGroup.border#435240
  • pickerGroup.foreground#839765
  • progressBar.background#0da031
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#5363394d
  • scrollbarSlider.background#2f3b2fc4
  • scrollbarSlider.hoverBackground#5363397a
  • settings.checkboxBackground#161b16
  • settings.checkboxBorder#454545
  • settings.checkboxForeground#b0b2a4
  • settings.dropdownBackground#161b16
  • settings.dropdownBorder#454545
  • settings.dropdownForeground#b0b2a4
  • settings.dropdownListBorder#454545
  • settings.headerForeground#c7cab3
  • settings.modifiedItemIndicator#0d5a26e8
  • settings.numberInputBackground#161b16
  • settings.numberInputBorder#454545
  • settings.numberInputForeground#b0b2a4
  • settings.textInputBackground#161b16
  • settings.textInputBorder#454545
  • settings.textInputForeground#b0b2a4
  • sideBar.background#252e25
  • sideBar.border#454545
  • sideBar.dropBackground#82835a1f
  • sideBarSectionHeader.background#1b221b
  • sideBarTitle.foreground#C9C984
  • statusBar.background#252e25
  • statusBar.border#454545
  • statusBar.debuggingBackground#af4e4cd0
  • statusBar.debuggingBorder#454545
  • statusBar.debuggingForeground#b0b2a4
  • statusBar.foreground#b0b2a4
  • statusBar.noFolderBackground#343b3c
  • statusBar.noFolderBorder#454545
  • statusBar.noFolderForeground#86a0779d
  • statusBarItem.activeBackground#ffffff2e
  • statusBarItem.hoverBackground#cbcca51f
  • statusBarItem.prominentBackground#2f6e2b
  • statusBarItem.prominentHoverBackground#357c30
  • tab.activeBackground#191F19
  • tab.activeForeground#88b57d
  • tab.border#454545
  • tab.inactiveBackground#202920
  • tab.inactiveForeground#ffffff80
  • tab.unfocusedActiveForeground#ffffff80
  • tab.unfocusedInactiveForeground#ffffff40
  • terminal.ansiBlack#1f1f1f
  • terminal.ansiBlue#23454b
  • terminal.ansiBrightBlack#2c2c2c
  • terminal.ansiBrightBlue#6d9cbe
  • terminal.ansiBrightCyan#2e6069
  • terminal.ansiBrightGreen#61c548
  • terminal.ansiBrightMagenta#80528a
  • terminal.ansiBrightRed#914948
  • terminal.ansiBrightWhite#c7c7c7
  • terminal.ansiBrightYellow#c5b243
  • terminal.ansiCyan#588d8b
  • terminal.ansiGreen#8ca56f
  • terminal.ansiMagenta#704d77
  • terminal.ansiRed#8b3432
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#9b8b30
  • terminal.background#161b16
  • terminal.border#454545
  • terminal.foreground#0af32996
  • terminal.selectionBackground#66c21b4d
  • textBlockQuote.background#c3e71f1a
  • textBlockQuote.border#2c5c0080
  • textCodeBlock.background#2f361c66
  • textLink.activeForeground#5e811c
  • textLink.foreground#5b7c1c
  • textPreformat.foreground#c9b76a
  • textSeparator.foreground#454545
  • titleBar.activeBackground#273828
  • titleBar.activeForeground#cccccc
  • titleBar.border#454545
  • titleBar.inactiveBackground#454545
  • titleBar.inactiveForeground#cccccc99
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F8F8F2
meta.embedded, source.groovy.embedded#F8F8F2
comment#88846f
string#E6DB74
punctuation.definition.template-expression, punctuation.section.embedded#F92672
meta.template.expression#F8F8F2
constant.numeric#AE81FF
constant.language#AE81FF
constant.character, constant.other#AE81FF
variable#F8F8F2
keyword#F92672
storage#F92672
storage.type#66D9EFitalic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#A6E22Eunderline
entity.other.inherited-class#A6E22Eitalic underline
entity.name.function#A6E22E
variable.parameter#FD971Fitalic
entity.name.tag#F92672
entity.other.attribute-name#A6E22E
support.function#66D9EF
support.constant#66D9EF
support.type, support.class#66D9EFitalic
support.other.variable
invalid#F44747
invalid.deprecated#F44747
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#75715E
markup.deleted#F92672
markup.inserted#A6E22E
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#E6DB74
markup.quote#F92672
markup.list#E6DB74
markup.bold, markup.italic#66D9EF
markup.inline.raw#FD971F
markup.heading#A6E22E
markup.heading.setext#A6E22Ebold
markup.heading.markdownbold
markup.quote.markdown#75715Eitalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#AE81FF
markup.underline.link.markdown,markup.underline.link.image.markdown#E6DB74
markup.italic.markdownitalic
markup.list.unnumbered.markdown, markup.list.numbered.markdown#f8f8f2
punctuation.definition.list.begin.markdown#A6E22E
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
variable.language#FD971F
VSC Military Monokai by ROMAINPC - VS Code Theme