Skip to main content
CodingTheme

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
#848677
comment, punctuation.definition.comment#7772618citalic
variable, string constant.other.placeholder#40A180
constant.other.color#92906e
invalid, invalid.illegal#882031
keyword, storage.type, storage.modifier#999454
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#57993D
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#3A913E
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#96963C
meta.block variable.other#3A9191
support.other.variable, string.other.link#3D9999
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#9C6D3E
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#3D995Cnormal
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#3D995C
support.type#6d8845
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#849945
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#7C55A3
variable.language#7C55A3italic
entity.name.method.js#7C55A3italic
meta.class-method.js entity.name.function.js, variable.function.constructor#7C55A3
entity.other.attribute-name#497AAB
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#7E9945italic
entity.other.attribute-name.class#3D996B
source.sass keyword.control#43A39D
markup.inserted#77A140
markup.deleted#993D4C
markup.changed#7FA140
string.regexp#6166AD
constant.character.escape#9C436F
*url*, *link*, *uri*italic
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#3D9942italic
source.js constant.other.object.key.js string.unquoted.label.js#993D49italic
source.json meta.structure.dictionary.json support.type.property-name.json#917849
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#917849
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#917849
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#917849
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#917849
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#917849
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#917849
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#917849
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#917849
text.html.markdown, punctuation.definition.list_item.markdown#9D9E95
text.html.markdown markup.inline.raw.markdown#9D9E95
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#9D9E95
text.html.markdown meta.dummy.line-break#9D9E95
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#849945
markup.italic#9D9E95italic
markup.bold, markup.bold string#9D9E95bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#9D9E95bold
markup.underline#849945underline
markup.strike#9D9E95strike
markup.quote punctuation.definition.blockquote.markdown#9D9E95
markup.quote#9D9E95italic
string.other.link.title.markdown#4b8846
string.other.link.description.title.markdown#9D9E95
constant.other.reference.link.markdown#62993D
markup.raw.block#9D9E95
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#9D9E95
variable.language.fenced.markdown#9D9E95
meta.separator#849945bold
markup.table#b0b2a4
token.info-token#51A13D
token.warn-token#A1963B
token.error-token#A13B3B
token.debug-token#992E2E

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

VSC Military Style by TechnoNinja - VS Code Theme