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#272727
  • activityBar.border#2D2D2D
  • activityBar.dropBackground#505050
  • activityBar.foreground#D7D4CB
  • activityBarBadge.background#D27C20
  • activityBarBadge.foreground#2D2D2D
  • badge.background#D27C20
  • badge.foreground#2D2D2D
  • button.background#2E2E2E
  • button.foreground#d7d4cb
  • button.hoverBackground#ADC9C658
  • contrastBorder#ADC9C600
  • debugExceptionWidget.background#2D2D2D
  • debugExceptionWidget.border#272727
  • debugToolBar.background#272727
  • descriptionForeground#D7D4CB
  • diffEditor.insertedTextBackground#3D807833
  • diffEditor.insertedTextBorder#3D807855
  • diffEditor.removedTextBackground#ee3a4333
  • diffEditor.removedTextBorder#ee3a4355
  • dropdown.background#272727
  • dropdown.border#272727
  • dropdown.foreground#d7d4cb58
  • editor.background#1A1A1A
  • editor.findMatchBackground#FF720066
  • editor.findMatchHighlightBackground#D27C2066
  • editor.findRangeHighlightBackground#272727
  • editor.foreground#EDECEA
  • editor.hoverHighlightBackground#D27C2033
  • editor.inactiveSelectionBackground#183345
  • editor.lineHighlightBackground#ffffff24
  • editor.lineHighlightBorder#272727
  • editor.rangeHighlightBackground#272727
  • editor.selectionBackground#505050
  • editor.selectionHighlightBackground#272727
  • editor.wordHighlightBackground#ADC9C621
  • editor.wordHighlightStrongBackground#ADC9C621
  • editorBracketMatch.background#EDECEA
  • editorBracketMatch.border#EDECEA
  • editorCodeLens.foreground#d7d4cb
  • editorCursor.foreground#EDECEA
  • editorError.border#B43A36
  • editorError.foreground#B43A36
  • editorGroup.border#272727
  • editorGroup.dropBackground#ADC9C658
  • editorGroupHeader.noTabsBackground#272727
  • editorGroupHeader.tabsBackground#272727
  • editorGroupHeader.tabsBorder#2E2E2E
  • editorGutter.addedBackground#3C9F4A
  • editorGutter.background#1f1f1f
  • editorGutter.deletedBackground#B43A36
  • editorGutter.modifiedBackground#26506D
  • editorHoverWidget.background#2D2D2D
  • editorHoverWidget.border#5f5f5f58
  • editorIndentGuide.background#6E6963
  • editorLineNumber.foreground#6E6963
  • editorLink.activeForeground#d7d4cb
  • editorMarkerNavigation.background#27272733
  • editorMarkerNavigationError.background#B43A36
  • editorMarkerNavigationWarning.background#D27C20
  • editorOverviewRuler.border#272727
  • editorOverviewRuler.commonContentForeground#D27C2055
  • editorOverviewRuler.currentContentForeground#ee3a4355
  • editorOverviewRuler.incomingContentForeground#3D807855
  • editorRuler.foreground#272727
  • editorSuggestWidget.background#2D2D2D
  • editorSuggestWidget.border#272727
  • editorSuggestWidget.foreground#d7d4cb
  • editorSuggestWidget.highlightForeground#D27C20
  • editorSuggestWidget.selectedBackground#272727
  • editorWarning.border#ADC9C600
  • editorWarning.foreground#D27C20
  • editorWhitespace.foreground#ADC9C61a
  • editorWidget.background#2D2D2D
  • editorWidget.border#272727
  • errorForeground#B43A36
  • extensionButton.prominentBackground#ADC9C6
  • extensionButton.prominentForeground#d7d4cb
  • extensionButton.prominentHoverBackground#D27C20
  • focusBorder#464646
  • foreground#d7d4cb
  • gitDecoration.conflictingResourceForeground#FF7200
  • gitDecoration.deletedResourceForeground#B43A36
  • gitDecoration.ignoredResourceForeground#747476
  • gitDecoration.modifiedResourceForeground#D27C20
  • gitDecoration.untrackedResourceForeground#3D8078
  • input.background#505050
  • input.border#2D2D2D
  • input.foreground#d7d4cb
  • input.placeholderForeground#a8a8a886
  • inputOption.activeBorder#d7d4cb
  • inputValidation.errorBackground#272727
  • inputValidation.errorBorder#B43A36
  • inputValidation.infoBackground#272727
  • inputValidation.infoBorder#272727
  • inputValidation.warningBackground#272727
  • inputValidation.warningBorder#B43A36
  • list.activeSelectionBackground#222E4258
  • list.activeSelectionForeground#d7d4cb
  • list.dropBackground#27272758
  • list.focusBackground#a8a8a886
  • list.focusForeground#d7d4cb
  • list.highlightForeground#ADC9C6
  • list.hoverBackground#3d3d3d
  • list.hoverForeground#d7d4cb
  • list.inactiveSelectionBackground#272727
  • list.inactiveSelectionForeground#d7d4cb
  • menu.background#272727
  • merge.border#ADC9C600
  • merge.commonContentBackground#D27C20
  • merge.commonHeaderBackground#D27C20
  • merge.currentContentBackground#368783
  • merge.currentHeaderBackground#368783
  • merge.incomingContentBackground#425B78
  • merge.incomingHeaderBackground#425B78
  • notificationCenter.border#272727
  • notificationCenterHeader.background#272727
  • notificationCenterHeader.foreground#d7d4cb
  • notificationLink.foreground#ADC9C6
  • notifications.background#272727
  • notifications.border#272727
  • notifications.foreground#d7d4cb
  • notificationToast.border#d7d4cb
  • panel.background#1F1F1F
  • panel.border#292929
  • panelTitle.activeBorder#ADC9C6
  • panelTitle.activeForeground#d7d4cb
  • panelTitle.inactiveForeground#505050
  • peekView.border#272727
  • peekViewEditor.background#272727
  • peekViewEditor.matchHighlightBackground#19354900
  • peekViewEditorGutter.background#272727
  • peekViewResult.background#272727
  • peekViewResult.fileForeground#d7d4cb
  • peekViewResult.lineForeground#d7d4cb
  • peekViewResult.matchHighlightBackground#8c95a0
  • peekViewResult.selectionBackground#3c3c3f
  • peekViewResult.selectionForeground#ADC9C6
  • peekViewTitle.background#272727
  • peekViewTitleDescription.foreground#d7d4cb
  • peekViewTitleLabel.foreground#ADC9C6
  • pickerGroup.border#272727
  • pickerGroup.foreground#d7d4cb
  • progressBar.background#ADC9C6
  • scrollbar.shadow#272727
  • scrollbarSlider.activeBackground#3c3c3f
  • scrollbarSlider.background#272727
  • scrollbarSlider.hoverBackground#3c3c3f
  • selection.background#505050
  • sideBar.background#1F1F1F
  • sideBar.border#2E2E2E
  • sideBar.foreground#d7d4cb
  • sideBarSectionHeader.background#272727
  • sideBarSectionHeader.foreground#A8A69F
  • sideBarTitle.foreground#A8A69F
  • statusBar.background#272727
  • statusBar.border#272727
  • statusBar.debuggingBackground#272727
  • statusBar.debuggingBorder#ADC9C6
  • statusBar.debuggingForeground#ADC9C6
  • statusBar.foreground#d7d4cb
  • statusBar.noFolderBackground#272727
  • statusBar.noFolderBorder#272727
  • statusBar.noFolderForeground#A8A69F
  • statusBarItem.activeBackground#ADC9C6
  • statusBarItem.hoverBackground#33363a
  • statusBarItem.prominentBackground#272727
  • statusBarItem.prominentHoverBackground#272727
  • tab.activeBackground#1f1f1f
  • tab.activeBorder#2D2D2D
  • tab.activeForeground#ADC9C6
  • tab.border#272727
  • tab.inactiveBackground#272727
  • tab.inactiveForeground#ADC9C6
  • tab.unfocusedActiveForeground#9fa6af
  • tab.unfocusedInactiveForeground#9fa6af
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#ADC9C6
  • terminal.ansiBrightBlack#425B78
  • terminal.ansiBrightBlue#ADC9C6
  • terminal.ansiBrightCyan#80fcff
  • terminal.ansiBrightGreen#3D8078
  • terminal.ansiBrightMagenta#C977CC
  • terminal.ansiBrightRed#B43A36
  • terminal.ansiBrightWhite#272727
  • terminal.ansiBrightYellow#D27C20
  • terminal.ansiCyan#80fcff
  • terminal.ansiGreen#3D8078
  • terminal.ansiMagenta#C977CC
  • terminal.ansiRed#B43A36
  • terminal.ansiWhite#ADC9C6
  • terminal.ansiYellow#D27C20
  • terminal.background#272727
  • terminal.foreground#ADC9C6
  • terminalCursor.background#D27C20
  • terminalCursor.foreground#D27C20
  • textBlockQuote.background#272727
  • textBlockQuote.border#ADC9C660
  • textCodeBlock.background#272727
  • textLink.activeForeground#ADC9C6
  • textLink.foreground#ADC9C6
  • textPreformat.foreground#D27C20
  • textSeparator.foreground#272727
  • titleBar.activeBackground#272727
  • titleBar.activeForeground#91A8A6
  • titleBar.inactiveBackground#272727
  • titleBar.inactiveForeground#91A8A633
  • walkThrough.embeddedEditorBackground#272727
  • welcomePage.buttonBackground#272727
  • welcomePage.buttonHoverBackground#425B78
  • widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ffffff50italic
constant#EDECEA
entity#ADC9C6
invalid#B43A36
storage.type.function#B43A36
keyword, storage.type.class#F08E25
meta#D7D4CB
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#D7D4CB
meta.brace#91BAB8
punctuation#91BAB8
punctuation.definition.parameters#C2B457
punctuation.definition.template-expression#C2B457
storage#D27C20
storage.type.function.arrow#D6A16B
string, punctuation.definition.string#94933B
string.template, punctuation.definition.string.template#94933B
support#D6A16B
support.function#B43A36
support.variable.property.dom#D7D4CB
variable#D7D4CB
keyword.operator.logical#D27C20
keyword.operator.comparison#D27C20
source.css entity, source.stylus entity#82B3AD
entity.other.attribute-name.id.css#D27C20
entity.name.tag#67A6A6
source.css support, source.stylus support#81B076
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#C2B457
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#94933B
source.css variable, source.stylus variable#67A6A6
text.html.basic entity.name#67A6A6
meta.toc-list.id.html#94933B
text.html.basic entity.other#D27C20italic
meta.tag.metadata.script.html entity.name.tag.html#D27C20
punctuation.definition.string.begin, punctuation.definition.string.end#94933B
source.ini entity#D7D4CB
source.ini keyword#D27C20
source.ini punctuation.definition#C2B457
source.ini punctuation.separator#D27C20
source.js storage.type.function#D7D4CB
variable.language, entity.name.type.class.js#d7d4cb
entity.other.inherited-class.js#d7d4cb
variable.parameter.function.language.special.self.python#788E8D
source.json support#D27C20
source.json string, source.json punctuation.definition.string#D7D4CB
punctuation.definition.heading.markdown#D7D4CB
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#D27C20bold
meta.paragraph.markdown#D7D4CB
beginning.punctuation.definition.quote.markdown#D27C20
markup.quote.markdown meta.paragraph.markdown#67A6A6italic
meta.separator.markdown#D27C20
markup.bold.markdown#67A6A6bold
markup.italic.markdown#67A6A6italic
beginning.punctuation.definition.list.markdown#D27C20
string.other.link.title.markdown#81B076
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown#81B076
markup.underline.link.markdown, markup.underline.link.image.markdown#67A6A6
fenced_code.block.language, markup.inline.raw.markdown#67A6A6
fenced_code.block.language, markup.inline.raw.markdown#67A6A6
text.jade entity.name#67A6A6
text.jade entity.other.attribute-name.tagitalic
text.jade string.interpolated#C2B457
source.ts entity.name.type#80ffbb
source.ts keyword#D27C20
source.ts punctuation.definition.parameters#D7D4CB
meta.arrow.ts punctuation.definition.parameters#C2B457
source.ts storage#67A6A6
variable.language, entity.name.type.class.ts, entity.name.type.class.tsx#d7d4cb
entity.other.inherited-class.ts, entity.other.inherited-class.tsx#d7d4cb
source.php entity#67A6A6
variable.other.php#D27C20
storage.type.cs#67A6A6
entity.name.variable.property.cs#67A6A6
storage.modifier.cs#80ffbb
modifier, this, comment, storage.modifier.js, storage.modifier.ts, storage.modifier.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.htmlitalic
storage.modifier.cs, keyword.type.cs#B43A36
storage.type.cs#80ffbb
entity.name.type.namespace.cs, entity.name.variable.parameter.cs, entity.name.variable.field.cs, entity.name.variable.property.cs#e1efff
AROS Theme by xyr0z1ne - VS Code Theme