Skip to main content
Coding Theme

Color themes

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#151515
  • activityBar.activeBorder#0075CD
  • activityBar.background#151515
  • activityBar.border#2e2e2e
  • activityBar.foreground#0075CD
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#0075CD
  • activityBarBadge.foreground#f5f5f5
  • badge.background#0075CD33
  • badge.foreground#0075CD
  • breadcrumb.background#151515
  • button.background#0075CD
  • button.foreground#f1f1f1
  • button.hoverBackground#004070
  • debugConsoleInputIcon.foreground#0075CD
  • debugExceptionWidget.background#181818
  • debugExceptionWidget.border#1e232b
  • debugIcon.breakpointDisabledForeground#f2966880
  • debugIcon.breakpointForeground#f29668
  • debugToolBar.background#181818
  • descriptionForeground#666666
  • diffEditor.diagonalFill#1e232b
  • diffEditor.insertedTextBackground#7fd9621f
  • diffEditor.removedTextBackground#f26d781f
  • dropdown.background#0d1017
  • dropdown.border#66666645
  • dropdown.foreground#666666
  • editor.background#0F0F0F
  • editor.findMatchBackground#0075CD
  • editor.findMatchBorder#6c5980
  • editor.findMatchHighlightBackground#6c598066
  • editor.findMatchHighlightBorder#5f4c7266
  • editor.findRangeHighlightBackground#6c598040
  • editor.inactiveSelectionBackground#409fff21
  • editor.lineHighlightBackground#131721
  • editor.rangeHighlightBackground#6c598033
  • editor.selectionBackground#409fff4d
  • editor.selectionHighlightBackground#7fd96226
  • editor.selectionHighlightBorder#7fd96200
  • editor.snippetTabstopHighlightBackground#7fd96233
  • editor.wordHighlightBackground#73b8ff14
  • editor.wordHighlightBorder#73b8ff80
  • editor.wordHighlightStrongBackground#7fd96214
  • editor.wordHighlightStrongBorder#7fd96280
  • editorBracketMatch.background#6c73804d
  • editorBracketMatch.border#6c73804d
  • editorCodeLens.foreground#acb6bf8c
  • editorCursor.foreground#0075CD
  • editorError.foreground#d95757
  • editorGroup.background#181818
  • editorGroup.border#1e232b
  • editorGroupHeader.border#2e2e2e
  • editorGroupHeader.noTabsBackground#0F0F0F
  • editorGroupHeader.tabsBackground#0F0F0F
  • editorGroupHeader.tabsBorder#0F0F0F
  • editorGutter.addedBackground#7fd962cc
  • editorGutter.background#131313
  • editorGutter.deletedBackground#f26d78cc
  • editorGutter.foldingControlForeground#409fff
  • editorGutter.modifiedBackground#73b8ffcc
  • editorHoverWidget.background#181818
  • editorHoverWidget.border#1e232b
  • editorIndentGuide.activeBackground#6c738080
  • editorIndentGuide.background#6c738033
  • editorLineNumber.activeForeground#0075CD
  • editorLineNumber.foreground#C5C5C5
  • editorLink.activeForeground#0075CD
  • editorMarkerNavigation.background#181818
  • editorOverviewRuler.addedForeground#7fd962
  • editorOverviewRuler.border#1e232b
  • editorOverviewRuler.bracketMatchForeground#6c7380b3
  • editorOverviewRuler.deletedForeground#f26d78
  • editorOverviewRuler.errorForeground#d95757
  • editorOverviewRuler.findMatchForeground#6c5980
  • editorOverviewRuler.modifiedForeground#73b8ff
  • editorOverviewRuler.warningForeground#0075CD
  • editorOverviewRuler.wordHighlightForeground#73b8ff66
  • editorOverviewRuler.wordHighlightStrongForeground#7fd96266
  • editorRuler.foreground#6c738033
  • editorSuggestWidget.background#181818
  • editorSuggestWidget.border#1e232b
  • editorSuggestWidget.highlightForeground#0075CD
  • editorSuggestWidget.selectedBackground#47526640
  • editorWarning.foreground#0075CD
  • editorWhitespace.foreground#6c738099
  • editorWidget.background#181818
  • editorWidget.border#1e232b
  • errorForeground#d95757
  • extensionButton.prominentBackground#0075CD
  • extensionButton.prominentForeground#734d00
  • extensionButton.prominentHoverBackground#e1af4b
  • focusBorder#0075CDb3
  • foreground#C5C5C5
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#f26d78b3
  • gitDecoration.ignoredResourceForeground#626262
  • gitDecoration.modifiedResourceForeground#73b8ffb3
  • gitDecoration.submoduleResourceForeground#d2a6ffb3
  • gitDecoration.untrackedResourceForeground#7fd962b3
  • icon.foreground#666666
  • input.background#232323
  • input.border#66666645
  • input.foreground#f1f1f1
  • input.placeholderForeground#787878
  • inputOption.activeBackground#0075CD33
  • inputOption.activeBorder#0075CD4d
  • inputOption.activeForeground#0075CD
  • inputValidation.errorBackground#0d1017
  • inputValidation.errorBorder#d95757
  • inputValidation.infoBackground#0F0F0F
  • inputValidation.infoBorder#0091FF
  • inputValidation.warningBackground#0F0F0F
  • inputValidation.warningBorder#ffb454
  • keybindingLabel.background#6666661a
  • keybindingLabel.border#f1f1f11a
  • keybindingLabel.bottomBorder#f1f1f11a
  • keybindingLabel.foreground#f1f1f1
  • list.activeSelectionBackground#3B3B3B
  • list.activeSelectionForeground#f1f1f1
  • list.deemphasizedForeground#d95757
  • list.errorForeground#d95757
  • list.filterMatchBackground#5f4c7266
  • list.filterMatchBorder#6c598066
  • list.focusBackground#3B3B3B
  • list.focusForeground#f1f1f1
  • list.focusOutline#3B3B3B
  • list.highlightForeground#0075CD
  • list.hoverBackground#3B3B3B
  • list.inactiveSelectionBackground#47526633
  • list.inactiveSelectionForeground#666666
  • list.invalidItemForeground#6666664d
  • listFilterWidget.background#181818
  • listFilterWidget.noMatchesOutline#d95757
  • listFilterWidget.outline#0075CD
  • menu.background#181818
  • menu.foreground#c5c5c5
  • menu.selectionBackground#0075CD
  • menu.selectionForeground#f5f5f5
  • menu.separatorBackground#0961A3
  • menubar.selectionBackground#0075CD
  • minimap.background#0F0F0F
  • minimap.errorHighlight#d95757
  • minimap.findMatchHighlight#6c5980
  • minimap.selectionHighlight#409fff4d
  • minimapGutter.addedBackground#7fd962
  • minimapGutter.deletedBackground#f26d78
  • minimapGutter.modifiedBackground#73b8ff
  • notificationsErrorIcon.foreground#C10000
  • panel.background#0F0F0F
  • panel.border#1e232b
  • panelTitle.activeBorder#0075CD
  • panelTitle.activeForeground#f1f1f1
  • panelTitle.inactiveForeground#666666
  • peekView.border#47526640
  • peekViewEditor.background#181818
  • peekViewEditor.matchHighlightBackground#6c598066
  • peekViewEditor.matchHighlightBorder#5f4c7266
  • peekViewResult.background#181818
  • peekViewResult.fileForeground#f1f1f1
  • peekViewResult.lineForeground#666666
  • peekViewResult.matchHighlightBackground#6c598066
  • peekViewResult.selectionBackground#47526640
  • peekViewTitle.background#47526640
  • peekViewTitleDescription.foreground#666666
  • peekViewTitleLabel.foreground#f1f1f1
  • pickerGroup.border#2e2e2e
  • pickerGroup.foreground#626262
  • progressBar.background#0075CD
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#005E2E
  • scrollbarSlider.background#1d1d1d
  • scrollbarSlider.hoverBackground#0075CD
  • selection.background#4F4F4F
  • settings.headerForeground#f1f1f1
  • settings.modifiedItemIndicator#73b8ff
  • sideBar.background#111111
  • sideBar.border#0F0F0F
  • sideBar.foreground#c5c5c5
  • sideBarSectionHeader.background#0F0F0F
  • sideBarSectionHeader.border#0F0F0F
  • sideBarSectionHeader.foreground#C5C5C5
  • sideBarTitle.foreground#C5C5C5
  • statusBar.background#151515
  • statusBar.border#2e2e2e
  • statusBar.debuggingBackground#f29668
  • statusBar.debuggingForeground#0d1017
  • statusBar.foreground#C5C5C5
  • statusBar.noFolderBackground#181818
  • statusBarItem.activeBackground#66666633
  • statusBarItem.hoverBackground#66666633
  • statusBarItem.prominentBackground#1e232b
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#323232
  • statusBarItem.remoteForeground#C5C5C5
  • tab.activeBackground#0F0F0F
  • tab.activeBorder#0075CD
  • tab.activeForeground#C5C5C5
  • tab.border#0f0f0f
  • tab.inactiveBackground#0f0f0f
  • tab.inactiveForeground#666666
  • tab.unfocusedActiveBorder#666666
  • tab.unfocusedActiveForeground#666666
  • tab.unfocusedInactiveForeground#666666
  • terminal.ansiBlack#1e232b
  • terminal.ansiBlue#53bdfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#59c2ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#aad94c
  • terminal.ansiBrightMagenta#d2a6ff
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffb454
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#7fd962
  • terminal.ansiMagenta#cda1fa
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f9af4f
  • terminal.background#0F0F0F
  • terminal.foreground#f1f1f1
  • textBlockQuote.background#181818
  • textLink.activeForeground#0075CD
  • textLink.foreground#0075CD
  • textPreformat.foreground#f1f1f1
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#C5C5C5
  • titleBar.border#0F0F0F
  • titleBar.inactiveBackground#0F0F0F
  • titleBar.inactiveForeground#858585
  • tree.indentGuidesStroke#6c738080
  • walkThrough.embeddedEditorBackground#181818
  • welcomePage.buttonBackground#0075CD66
  • welcomePage.progress.background#131721
  • welcomePage.tileBackground#0F0F0F
  • welcomePage.tileShadow#00000080
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f1f1f1
comment#007349italic
string, constant.other.symbol#00974b
string.regexp, constant.character, constant.other#00974b
constant.numeric#00974B
constant.language#d2a6ff
variable, variable.parameter.function-call#f1f1f1
variable.member#f07178
variable.language#0091FFitalic
storage#ff8f40
keyword#ff8f40
keyword.operator#f29668
punctuation.separator, punctuation.terminator#f1f1f1b3
punctuation.section#f1f1f1
punctuation.accessor#D868F2
meta.embedded#f1f1f1
source.java storage.type, source.haskell storage.type, source.c storage.type#7260B0
entity.other.inherited-class#7C96AA
storage.type.function#B04A4A
entity.name.tag, meta.tag.sgml#0091FF
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#005A9E
entity.other.attribute-name#FF950D
support.constant#FF950Ditalic
support.type, support.class, source.go storage.type#0091FF
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#e6b673
invalid#d95757
meta.diff, meta.diff.header#c594c5
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#C93434
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#acb6bf8c
support.type.property-name#0091FFnormal
constant.numeric.line-number.find-in-files - match#acb6bf8c
constant.numeric.line-number.match#ff8f40
entity.name.filename.find-in-files#aad94c
message.error#d95757
markup.heading, markup.heading entity.name#aad94cbold
markup.underline.link, string.other.link#0091FF
markup.italic#f07178italic
markup.bold#f07178bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#acb6bf8cbold
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#ffb454
markup.inserted#7fd962
markup.changed#73b8ff
markup.deleted#f26d78
markup.strike#e6b673
markup.table#0091FF
text.html.markdown markup.inline.raw#f29668
text.html.markdown meta.dummy.line-break#acb6bf8c
punctuation.definition.markdown#acb6bf8c
Shawarpers Theme Bundle by Tolgahan Soylu - VS Code Theme