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#193549
  • activityBar.background#193549
  • activityBar.border#06b0e438
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#c5bdbd
  • activityBarBadge.background#219fd5
  • activityBarBadge.foreground#ffffff
  • badge.background#219fd528
  • badge.foreground#ffffff
  • banner.background#3b5485c4
  • banner.foreground#ffffff
  • banner.iconForeground#ffffff
  • breadcrumb.background#2e4a81c4
  • breadcrumbPicker.background#193549
  • button.background#03648a
  • button.border#00c3ff
  • button.foreground#ffffff
  • button.hoverBackground#219fd5
  • button.secondaryBackground#0015ff
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#0015ff
  • button.separator#0015ff
  • checkbox.background#3b5485c4
  • checkbox.border#00c3ff
  • checkbox.foreground#ffffff
  • commandCenter.activeBackground#193549
  • commandCenter.activeForeground#ffffff
  • commandCenter.background#193549
  • commandCenter.foreground#ffffff
  • contrastActiveBorder#122d42
  • contrastBorder#122d42
  • debugExceptionWidget.background#193549
  • debugToolBar.background#022846
  • debugToolBar.border#2f00ff
  • descriptionForeground#ffffff
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.insertedTextBorder#addb6733
  • diffEditor.removedTextBackground#ef535033
  • diffEditor.removedTextBorder#ef53504d
  • disabledForeground#ffffff
  • dropdown.background#3b5485c4
  • dropdown.border#00c3ff
  • dropdown.foreground#ffffff
  • dropdown.listBackground#193549
  • editor.background#193549
  • editor.findMatchBackground#740000
  • editor.focusedStackFrameHighlightBackground#193549
  • editor.foldBackground#3b5485c4
  • editor.foreground#00ff0d
  • editor.hoverHighlightBackground#0c4994
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#0c499477
  • editor.lineHighlightBorder#b3bcf0c4
  • editor.linkedEditingBackground#3b5485c4
  • editor.rangeHighlightBackground#045bbe
  • editor.selectionBackground#0077ff
  • editor.stackFrameHighlightBackground#193549
  • editor.symbolHighlightBorder#3b5485c4
  • editor.wordHighlightBackground#045bbe
  • editor.wordHighlightBorder#3b5485c4
  • editor.wordHighlightStrongBackground#0077ff
  • editorBracketHighlight.unexpectedBracket.foreground#565050
  • editorBracketMatch.background#219fd54d
  • editorCursor.background#193549
  • editorCursor.foreground#219fd5
  • editorError.border#ff0000
  • editorError.foreground#ef5350
  • editorGhostText.background#193549
  • editorGroup.border#219fd544
  • editorGroup.dropBackground#193549
  • editorGroup.dropIntoPromptBackground#193549
  • editorGroup.dropIntoPromptBorder#193549
  • editorGroup.dropIntoPromptForeground#193549
  • editorGroup.emptyBackground#193549
  • editorGroup.focusedEmptyBorder#193549
  • editorGroupHeader.border#00c3ff
  • editorGroupHeader.noTabsBackground#193549
  • editorGroupHeader.tabsBackground#0f3149
  • editorGroupHeader.tabsBorder#193549
  • editorGutter.background#0f3149
  • editorHoverWidget.background#193549
  • editorHoverWidget.border#0b6dbd
  • editorIndentGuide.activeBackground#C792EA
  • editorIndentGuide.background#0e2c45
  • editorInlayHint.background#193549
  • editorLineNumber.activeForeground#1ee7ee
  • editorLineNumber.foreground#1a79af
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#212022
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorPane.background#3b5485c4
  • editorStickyScrollHover.background#0c499477
  • editorSuggestWidget.background#2C3043
  • editorSuggestWidget.border#2B2F40
  • editorSuggestWidget.foreground#d6deeb
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#5f7e97
  • editorWarning.foreground#ffca28
  • editorWhitespace.foreground#3B3A32
  • editorWidget.background#0b2942
  • editorWidget.border#262A39
  • errorForeground#EF5350
  • errorLens.hintBackground#ff0000
  • errorLens.hintBackgroundLight#ff0000
  • errorLens.infoBackgroundLight#ff0000
  • extensionBadge.remoteBackground#193549
  • extensionButton.prominentBackground#193549
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#193549
  • foreground#ffffff
  • gitDecoration.modifiedResourceForeground#219fd5
  • gitDecoration.untrackedResourceForeground#5ABEB0
  • icon.foreground#ffffff
  • input.background#0b253a
  • input.border#5f7e97
  • input.foreground#ffffffcc
  • input.placeholderForeground#5f7e97
  • inputOption.activeBorder#ffffff
  • inputOption.hoverBackground#193549
  • inputValidation.errorBackground#ef5350
  • inputValidation.errorBorder#ef5350
  • inputValidation.infoBackground#219fd5
  • inputValidation.infoBorder#219fd5
  • inputValidation.warningBackground#f7ecb5
  • inputValidation.warningBorder#f7ecb5
  • inputValidation.warningForeground#000000
  • keybindingLabel.background#193549
  • keybindingLabel.border#00c3ff
  • keybindingLabel.bottomBorder#ffffff
  • keybindingLabel.foreground#fefefe
  • list.activeSelectionBackground#219fd5
  • list.dropBackground#193549
  • list.filterMatchBackground#193549
  • list.focusBackground#03648a
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#193549
  • list.hoverForeground#219fd5
  • list.inactiveSelectionBackground#0e293f
  • list.inactiveSelectionForeground#5f7e97
  • list.invalidItemForeground#975f94
  • listFilterWidget.background#193549
  • menu.background#193549
  • menu.border#00c3ff
  • menu.foreground#ffffff
  • menu.selectionBackground#b0c2e6c4
  • menu.selectionBorder#ffffff
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#193549
  • menubar.selectionBackground#3b5485c4
  • menubar.selectionBorder#ffffffc4
  • menubar.selectionForeground#ffffff
  • minimap.background#2e4a81c4
  • notebook.editorBackground#193549
  • notificationLink.foreground#80CBC4
  • notifications.background#193549
  • notifications.foreground#ffffffcc
  • notificationToast.border#00c3ff
  • panel.background#193549
  • panel.border#00c3ff
  • panelSection.dropBackground#193549
  • panelTitle.activeBorder#5f7e97
  • panelTitle.activeForeground#219fd5
  • panelTitle.inactiveForeground#5f7e97
  • peekView.border#00c3ff
  • peekViewEditor.background#193549
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#193549
  • peekViewResult.matchHighlightBackground#7e57c25a
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#cecece
  • peekViewTitle.background#193549
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#00c3ff
  • problemsErrorIcon.foreground#ff0000
  • problemsInfoIcon.foreground#ff0000
  • problemsWarningIcon.foreground#ff0000
  • progressBar.background#193549
  • quickInput.background#3b5485c4
  • quickInput.foreground#ffffff
  • quickInput.list.focusBackground#219fd5
  • quickInputList.focusBackground#344a54
  • quickInputList.focusForeground#ffffff
  • quickInputList.focusIconForeground#ffffff
  • quickInputTitle.background#193549
  • sash.hoverBorder#193549
  • scrollbar.shadow#309eff
  • scrollbarSlider.activeBackground#084d8180
  • scrollbarSlider.background#084d8180
  • scrollbarSlider.hoverBackground#084d8180
  • selection.background#0062ff
  • settings.checkboxBackground#0015ff
  • settings.dropdownBackground#193549
  • settings.rowHoverBackground#193549
  • sideBar.background#193549
  • sideBar.border#00c3ff
  • sideBar.dropBackground#193549
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#008ff5
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#219fd5
  • statusBar.debuggingBackground#2f00ff
  • statusBar.noFolderBackground#193549
  • statusBarItem.activeBackground#03648a
  • statusBarItem.hoverBackground#03648a
  • statusBarItem.prominentBackground#03648a
  • statusBarItem.prominentHoverBackground#03648a
  • tab.activeBackground#0b2942
  • tab.activeBorder#007bff
  • tab.activeBorderTop#ff0000
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#ffffff
  • tab.border#6aafc4
  • tab.hoverBackground#193549
  • tab.hoverBorder#ffffff
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#0b2942
  • tab.inactiveForeground#ffffff
  • tab.inactiveModifiedBorder#ffffff
  • tab.lastPinnedBorder#ffffff
  • tab.unfocusedActiveBackground#193549
  • tab.unfocusedActiveBorder#ffffff
  • tab.unfocusedActiveBorderTop#ffffff
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedActiveModifiedBorder#ffffff
  • tab.unfocusedHoverBackground#193549
  • tab.unfocusedHoverBorder#ffffff
  • tab.unfocusedHoverForeground#ffffff
  • tab.unfocusedInactiveBackground#193549
  • tab.unfocusedInactiveForeground#ffffff
  • tab.unfocusedInactiveModifiedBorder#ffffff
  • terminal.ansiBlack#0b2942
  • terminal.tab.activeBorder#ffffff
  • terminalCursor.background#193549
  • testing.runAction#ff0000
  • textBlockQuote.background#193549
  • textCodeBlock.background#193549
  • textLink.activeForeground#ffffff
  • textLink.foreground#219fd5
  • titleBar.activeBackground#0b2942
  • titleBar.activeForeground#ffffff
  • titleBar.border#00c3ff60
  • titleBar.inactiveBackground#0b2942
  • titleBar.inactiveForeground#ffffff
  • toolbar.activeBackground#193549
  • toolbar.hoverBackground#193549
  • walkThrough.embeddedEditorBackground#0b2942
  • welcomePage.background#193549
  • welcomePage.buttonBackground#193549
  • welcomePage.buttonHoverBackground#193549
  • welcomePage.progress.background#193549
  • welcomePage.progress.foreground#ffffff
  • welcomePage.tileBackground#193549
  • welcomePage.tileHoverBackground#193549
  • widget.shadow#22d6eee0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#fffb00
meta.paragraph.markdown, string.other.link.description.title.markdown#EEFFFF
entity.name.section.markdown, punctuation.definition.heading.markdown#5ABEB0
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown#82AAFF
markup.quote.markdown#82AAFFitalic
markup.bold.markdown, punctuation.definition.bold.markdown#57cdffbold
markup.italic.markdown, punctuation.definition.italic.markdown#C792EAitalic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#f7ecb5italic
punctuation.definition.metadata.markdown#f3b8c2
markup.underline.link.image.markdown, markup.underline.link.markdown#6dbdfa
comment#999999italic
punctuation.definition.string#6bff81
string#fffb00
string.quoted, variable.other.readwrite.js#fffb00
constant.numeric#ff9900
constant.language.boolean#ff9900
constant#A170C6
constant.language, punctuation.definition.constant, variable.other.constant#92b6f4
constant.character, constant.other#82AAFF
variable#ebebebd3italic
variable.other.object.js#d6deebitalic
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#d6deeb
meta.class entity.name.type.class.tsx#d29ffcff
entity.name.type.tsx, entity.name.type.module.tsx#d29ffcff
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#a1bde6
variable.other.object.property#f7ecb5italic
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#7fdbca
variable.other.readwrite.js, variable.parameter#d7dbe0
string.template meta.template.expression#c63ed3
string.template punctuation.definition.string#fff
storage#6dbdfa
keyword, storage.type, storage.modifier, variable.language.this#ff02f2
keyword.operator#ff02f2
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts#c792eaitalic
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#d3eed6
entity.name.class#f7ecb5
entity.other.inherited-class#4FB4D8
variable.other.readwrites, meta.definition.variable#f7ecb5
support.variable.property#7fdbca
entity.name.function#87aff4italic
variable.parameter#d7dbe0
entity.name.tag#6dbdfa
entity.name.type#33ff00
entity.other.attribute-name#f7ecb5italic
punctuation.decorator#f7ecb5italic
punctuation.definition.block, punctuation.definition.tag#ffffff
support.function#f7ecb5
support.constant#c44848
support.type, support.class#c44848
support.other.variable#c44848
invalid#6dbdfa italic bold underline
invalid.deprecated#6dbdfa bold italic underline
support.type.property-name.json#91dacd
support.constant.json#addb67
meta.structure.dictionary.value.json string.quoted.double#e0aff5
string.quoted.double.json punctuation.definition.string.json#80CBC4
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#f29fd8
source.json support#6dbdfa
source.json string, source.json punctuation.definition.string#ece7cd
markup.list#6dbdfa
markup.heading punctuation.definition.heading, entity.name.section#4FB4D8
text.html.markdown meta.paragraph meta.link.inline, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown#78bd65
meta.paragraph.markdown#ffffff
markup.quote#78bd65italic
meta.link#78BD65
source.dockerfile#99d0f7
nadi cool Theme by Nadi Nasser M - VS Code Theme