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#041b17
  • activityBar.border#041b17
  • activityBar.dropBorder#105140
  • activityBar.foreground#6d9d8e
  • activityBar.inactiveForeground#6d9d8e99
  • activityBarBadge.background#ff5246
  • activityBarBadge.foreground#041b17
  • badge.background#ff5246
  • badge.foreground#07231e
  • breadcrumb.activeSelectionForeground#d4e2df
  • breadcrumb.background#07231e
  • breadcrumb.focusForeground#d4e2df
  • breadcrumb.foreground#6d9d8e
  • breadcrumbPicker.background#041b17
  • button.background#ff5246
  • button.foreground#041b17
  • button.hoverBackground#ff524699
  • debugExceptionWidget.background#105140
  • debugExceptionWidget.border#105140
  • debugToolBar.background#105140
  • debugToolBar.border#105140
  • descriptionForeground#d4e2df
  • diffEditor.border#105140
  • diffEditor.insertedTextBackground#31d19822
  • diffEditor.insertedTextBorder#31d19844
  • diffEditor.removedTextBackground#ff352522
  • diffEditor.removedTextBorder#ff352544
  • dropdown.background#105140
  • dropdown.border#105140
  • dropdown.foreground#d4e2df
  • dropdown.listBackground#041b17
  • editor.background#07231e
  • editor.findMatchBackground#6d9d8e77
  • editor.findMatchBorder#ff5246
  • editor.findMatchHighlightBackground#6d9d8e77
  • editor.findRangeHighlightBackground#6d9d8e77
  • editor.foreground#bad1d0
  • editor.hoverHighlightBackground#6d9d8e77
  • editor.inactiveSelectionBackground#6d9d8e77
  • editor.lineHighlightBackground#105140
  • editor.lineHighlightBorder#105140
  • editor.rangeHighlightBackground#105140
  • editor.selectionBackground#105140
  • editor.selectionForeground#bad1d0
  • editor.selectionHighlightBackground#105140
  • editor.wordHighlightBackground#6d9d8e77
  • editor.wordHighlightStrongBackground#6d9d8e77
  • editorBracketMatch.background#6d9d8e55
  • editorBracketMatch.border#ff5246
  • editorCodeLens.foreground#d4e2df
  • editorCursor.background#07231e
  • editorCursor.foreground#ff5246
  • editorError.foreground#ff3525
  • editorGroup.border#105140
  • editorGroup.dropBackground#105140
  • editorGroup.emptyBackground#07231e
  • editorGroup.focusedEmptyBorder#07231e
  • editorGroupHeader.noTabsBackground#07231e
  • editorGroupHeader.tabsBackground#041b17
  • editorGroupHeader.tabsBorder#041b17
  • editorGutter.addedBackground#31d198
  • editorGutter.background#07231e
  • editorGutter.deletedBackground#ff3525
  • editorGutter.modifiedBackground#2ab088
  • editorHint.foreground#ff5246
  • editorHoverWidget.background#105140
  • editorHoverWidget.border#105140
  • editorIndentGuide.activeBackground#6d9d8e77
  • editorIndentGuide.background#6d9d8e33
  • editorInfo.foreground#2ab088
  • editorInlayHint.background#041b17
  • editorInlayHint.foreground#6d9d8e99
  • editorLineNumber.activeForeground#6d9d8e
  • editorLineNumber.foreground#6d9d8e55
  • editorLink.activeForeground#ff5246
  • editorMarkerNavigation.background#105140
  • editorMarkerNavigationError.background#ff3525
  • editorMarkerNavigationInfo.background#2ab088
  • editorMarkerNavigationWarning.background#ff5246
  • editorOverviewRuler.addedForeground#31d198
  • editorOverviewRuler.border#105140
  • editorOverviewRuler.bracketMatchForeground#ff5246
  • editorOverviewRuler.commonContentForeground#105140
  • editorOverviewRuler.currentContentForeground#2ab088
  • editorOverviewRuler.deletedForeground#ff3525
  • editorOverviewRuler.errorForeground#ff3525
  • editorOverviewRuler.findMatchForeground#ff5246
  • editorOverviewRuler.incomingContentForeground#31d198
  • editorOverviewRuler.infoForeground#2ab088
  • editorOverviewRuler.modifiedForeground#2ab088
  • editorOverviewRuler.rangeHighlightForeground#6d9d8e
  • editorOverviewRuler.selectionHighlightForeground#6d9d8e
  • editorOverviewRuler.warningForeground#ffc42a
  • editorOverviewRuler.wordHighlightForeground#6d9d8e
  • editorOverviewRuler.wordHighlightStrongForeground#6d9d8e
  • editorPane.background#07231e
  • editorRuler.foreground#105140
  • editorSuggestWidget.background#105140
  • editorSuggestWidget.border#105140
  • editorSuggestWidget.foreground#d4e2df
  • editorSuggestWidget.highlightForeground#ff5246
  • editorSuggestWidget.selectedBackground#07231e
  • editorWarning.foreground#ffc42a
  • editorWhitespace.foreground#6d9d8e77
  • editorWidget.background#041b17
  • editorWidget.border#041b17
  • errorForeground#ff3525
  • extensionButton.prominentBackground#ff5246
  • extensionButton.prominentForeground#07231e
  • extensionButton.prominentHoverBackground#ff524699
  • focusBorder#6d9d8e77
  • foreground#6d9d8e
  • gitDecoration.conflictingResourceForeground#ff3525
  • gitDecoration.deletedResourceForeground#ff3525
  • gitDecoration.ignoredResourceForeground#6d9d8e77
  • gitDecoration.modifiedResourceForeground#2ab088
  • gitDecoration.untrackedResourceForeground#31d198
  • input.background#07231e
  • input.border#105140
  • input.foreground#d4e2df
  • input.placeholderForeground#6d9d8e77
  • inputOption.activeBorder#105140
  • inputValidation.errorBackground#07231e
  • inputValidation.errorBorder#ff3525
  • inputValidation.errorForeground#ff3525
  • inputValidation.infoBackground#07231e
  • inputValidation.infoBorder#2ab088
  • inputValidation.infoForeground#2ab088
  • inputValidation.warningBackground#07231e
  • inputValidation.warningBorder#ffc42a
  • inputValidation.warningForeground#ffc42a
  • list.activeSelectionBackground#105140
  • list.activeSelectionForeground#d4e2df
  • list.dropBackground#105140
  • list.errorForeground#ff3525
  • list.focusBackground#105140
  • list.focusForeground#d4e2df
  • list.highlightForeground#ff5246
  • list.hoverBackground#105140
  • list.hoverForeground#d4e2df
  • list.inactiveFocusBackground#105140
  • list.inactiveSelectionBackground#105140
  • list.inactiveSelectionForeground#d4e2df
  • list.invalidItemForeground#ff3525
  • list.warningForeground#ffc42a
  • listFilterWidget.background#105140
  • listFilterWidget.noMatchesOutline#ff3525
  • listFilterWidget.outline#105140
  • menu.background#041b17
  • menu.foreground#6d9d8e
  • menu.selectionBackground#105140
  • menu.selectionForeground#d4e2df
  • menubar.selectionBackground#105140
  • menubar.selectionForeground#d4e2df
  • merge.border#6d9d8e
  • merge.commonContentBackground#10514055
  • merge.commonHeaderBackground#10514077
  • merge.currentContentBackground#2ab08822
  • merge.currentHeaderBackground#2ab08877
  • merge.incomingContentBackground#31d19822
  • merge.incomingHeaderBackground#31d19877
  • notificationCenter.border#041b17
  • notificationCenterHeader.background#041b17
  • notificationCenterHeader.foreground#d4e2df
  • notificationLink.foreground#d4e2df
  • notifications.background#041b17
  • notifications.border#041b17
  • notifications.foreground#d4e2df
  • notificationToast.border#041b17
  • panel.background#041b17
  • panel.border#07231e
  • panel.dropBorder#105140
  • panelInput.border#6d9d8e
  • panelSection.border#105140
  • panelSection.dropBackground#105140
  • panelSectionHeader.background#07231e
  • panelSectionHeader.foreground#ff5246
  • panelTitle.activeBorder#ff5246
  • panelTitle.activeForeground#d4e2df
  • panelTitle.inactiveForeground#6d9d8e
  • peekView.border#ff5246
  • peekViewEditor.background#105140
  • peekViewEditor.matchHighlightBackground#6d9d8e
  • peekViewEditor.matchHighlightBorder#ff5246
  • peekViewEditorGutter.background#07231e
  • peekViewResult.background#105140
  • peekViewResult.fileForeground#6d9d8e
  • peekViewResult.lineForeground#d4e2df
  • peekViewResult.matchHighlightBackground#ff524633
  • peekViewResult.selectionBackground#105140
  • peekViewResult.selectionForeground#d4e2df
  • peekViewTitle.background#105140
  • peekViewTitleDescription.foreground#6d9d8e
  • peekViewTitleLabel.foreground#6d9d8e
  • pickerGroup.border#105140
  • pickerGroup.foreground#ff5246
  • progressBar.background#ff5246
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#6d9d8e77
  • scrollbarSlider.background#6d9d8e55
  • scrollbarSlider.hoverBackground#6d9d8e99
  • selection.background#6d9d8e77
  • settings.checkboxBackground#105140
  • settings.checkboxBorder#105140
  • settings.checkboxForeground#d4e2df
  • settings.dropdownBackground#105140
  • settings.dropdownBorder#105140
  • settings.dropdownForeground#d4e2df
  • settings.dropdownListBorder#105140
  • settings.headerForeground#d4e2df
  • settings.modifiedItemIndicator#2ab088
  • settings.numberInputBackground#105140
  • settings.numberInputBorder#105140
  • settings.numberInputForeground#d4e2df
  • settings.textInputBackground#105140
  • settings.textInputBorder#105140
  • settings.textInputForeground#d4e2df
  • sideBar.background#041b17
  • sideBar.foreground#6d9d8e
  • sideBarSectionHeader.background#07231e
  • sideBarSectionHeader.border#041b17
  • sideBarSectionHeader.foreground#ff5246
  • sideBarTitle.foreground#ff5246
  • statusBar.background#041b17
  • statusBar.border#041b17
  • statusBar.debuggingBackground#041b17
  • statusBar.debuggingForeground#6d9d8e
  • statusBar.foreground#6d9d8e
  • statusBar.noFolderBackground#041b17
  • statusBar.noFolderForeground#6d9d8e
  • statusBarItem.activeBackground#105140
  • statusBarItem.hoverBackground#07231e
  • statusBarItem.remoteBackground#041b17
  • statusBarItem.remoteForeground#6d9d8e
  • tab.activeBackground#07231e
  • tab.activeBorder#ff5246
  • tab.activeBorderTop#041b17
  • tab.activeForeground#d4e2df
  • tab.border#041b17
  • tab.hoverBackground#105140
  • tab.hoverBorder#ff5246
  • tab.inactiveBackground#041b17
  • tab.inactiveForeground#d4e2df77
  • tab.unfocusedActiveBackground#07231e
  • tab.unfocusedActiveBorder#ff524677
  • tab.unfocusedActiveBorderTop#07231e
  • tab.unfocusedActiveForeground#d4e2df
  • tab.unfocusedHoverBackground#07231e
  • tab.unfocusedHoverBorder#ff524677
  • tab.unfocusedInactiveForeground#d4e2df77
  • terminal.ansiBlack#105140
  • terminal.ansiBlue#2ab088
  • terminal.ansiBrightBlack#344d4d
  • terminal.ansiBrightBlue#2ab088
  • terminal.ansiBrightCyan#2ab088
  • terminal.ansiBrightGreen#31d198
  • terminal.ansiBrightMagenta#ff5246
  • terminal.ansiBrightRed#ff3525
  • terminal.ansiBrightWhite#bad1d0
  • terminal.ansiBrightYellow#ff5246
  • terminal.ansiCyan#2ab088
  • terminal.ansiGreen#31d198
  • terminal.ansiMagenta#ff5246
  • terminal.ansiRed#ff3525
  • terminal.ansiWhite#bad1d0
  • terminal.ansiYellow#ff5246
  • terminal.background#041b17
  • terminal.border#041b17
  • terminal.foreground#bad1d0
  • terminal.selectionBackground#6d9d8e33
  • terminalCursor.background#ff5246
  • terminalCursor.foreground#ff5246
  • textBlockQuote.background#105140
  • textBlockQuote.border#105140
  • textCodeBlock.background#041b17
  • textLink.activeForeground#ff5246
  • textLink.foreground#ff5246
  • textPreformat.foreground#d4e2df
  • textSeparator.foreground#d4e2df
  • titleBar.activeBackground#041b17
  • titleBar.activeForeground#d4e2df
  • titleBar.border#041b17
  • titleBar.inactiveBackground#041b17
  • titleBar.inactiveForeground#6d9d8e
  • tree.indentGuidesStroke#105140
  • walkThrough.embeddedEditorBackground#041b17
  • welcomePage.buttonBackground#105140
  • welcomePage.buttonHoverBackground#10514099
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#bad1d0
comment, punctuation.definition.comment#6d9d8e99italic
variable, string constant.other.placeholder, source#bad1d0
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#ff5246
invalid, invalid.illegal#ff3525
keyword, storage.type, storage.modifier, constant.numeric, constant.language, support.constant, constant.character, constant.escape#ff5246
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.block, meta.jsx, meta.embedded.expression, meta.template.expression, meta.tag.block.any.html, string.unquoted.tag-string.nunjucks, text.html.nunjucks#bad1d0
punctuation.separator.key-value.html, keyword.control, keyword.operator, constant.other.color, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.definition.keyword, punctuation.accessor, punctuation.separator.property, string.unquoted.filter-pipe#ff7e51
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.variable.dom, meta.import, meta.export, meta.export.default, support.class.builtin, support.class.component, variable.other.object#2ab088
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#ffc42a
meta.block variable.other#bad1d0
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#bad1d0
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks#31d198
entity.name, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.object-literal.key#ffc42a
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#2ab088
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, support.type.property-name, support.variable.object.node, support.variable.object.process#2ab088
entity.name.module.js, variable.import.parameter.js#ff3525
variable.language#2ab088italic
entity.name.method.js#2ab088italic
meta.class-method.js entity.name.function.js, variable.function.constructor#2ab088
entity.other.attribute-name#ff7e51
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff7e51
entity.other.attribute-name.class, punctuation.definition.entity.css#ff7e51
source.sass keyword.control#2ab088
markup.inserted#31d198
markup.deleted#ff3525
markup.changed#ff5246
string.regexp#ff7e51
constant.character.escape#2ab088
*url*, *link*, *uri*underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#2ab088
source.js constant.other.object.key.js string.unquoted.label.js#ff3525italic
source.json meta.structure.dictionary.json support.type.property-name.json#2ab088
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#2ab088
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#ff7e51
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#2ab088
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#ff7e51
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#2ab088
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#ff7e51
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#2ab088
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#ff7e51
markup.italic#ff3525italic
markup.bold#ff3525bold
markup.underline#ff5246underline
markup.strike#ff5246italic
markup.quote#2ab088italic
markup.raw.block#ff7e51
markup.table#2ab088
text.html.markdown, punctuation.definition.list_item.markdown#bad1d0
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#2ab088
text.html.markdown meta.dummy.line-break#bad1d0
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown#31d198
markup.quote, punctuation.definition.blockquote.markdown#2ab088italic
string.other.link.title.markdown#ff5246underline
markup.raw.block.fenced.markdown#d4e2df
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#bad1d0
variable.language.fenced.markdown#bad1d0
meta.separator#bad1d0
token.info-token#2ab088
token.warn-token#ff5246
token.error-token#ff3525
token.debug-token#ff5246
storage.type.error.go#2ab088
punctuation.other.period.go#ff7e51
British Racing Green Theme by Danesed - VS Code Theme