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.activeBorder#4f9eeb
  • activityBar.background#ffffff
  • activityBar.border#e1e4e8
  • activityBar.foreground#2f363d
  • activityBar.inactiveForeground#959da5
  • activityBarBadge.background#4f9eeb
  • activityBarBadge.foreground#ffffff
  • badge.background#dbedff
  • badge.foreground#005cc5
  • breadcrumb.activeSelectionForeground#586069
  • breadcrumb.focusForeground#2f363d
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#ffffff
  • button.background#005cc5
  • button.foreground#ffffff
  • button.hoverBackground#4f9eeb
  • button.secondaryBackground#e1e4e8
  • button.secondaryForeground#1b1f23
  • button.secondaryHoverBackground#d1d5da
  • checkbox.background#ffffff
  • checkbox.border#d1d5da
  • debugIcon.breakpointForeground#D73A49
  • debugToolBar.background#ffffff
  • descriptionForeground#6a737d
  • diffEditor.insertedTextBackground#34d05822
  • diffEditor.removedTextBackground#d73a4922
  • dropdown.background#ffffff
  • dropdown.border#e1e4e8
  • dropdown.foreground#2f363d
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#ffdf5d
  • editor.findMatchHighlightBackground#ffdf5d66
  • editor.focusedStackFrameHighlightBackground#28a74525
  • editor.foldBackground#d1d5da11
  • editor.foreground#24292e
  • editor.inactiveSelectionBackground#0366d611
  • editor.lineHighlightBackground#f6f8fa
  • editor.linkedEditingBackground#0366d611
  • editor.rangeHighlightBackground#FFF4C866
  • editor.selectionBackground#0366d625
  • editor.selectionHighlightBackground#22863a22
  • editor.selectionHighlightBorder#34d05800
  • editor.stackFrameHighlightBackground#ffd33d33
  • editor.wordHighlightBackground#22863a22
  • editor.wordHighlightBorder#24943e99
  • editor.wordHighlightStrongBackground#22863a22
  • editor.wordHighlightStrongBorder#24943e50
  • editorBracketHighlight.foreground1#005cc5
  • editorBracketHighlight.foreground2#a74047
  • editorBracketHighlight.foreground3#5a32a3
  • editorBracketHighlight.foreground4#005cc5
  • editorBracketHighlight.foreground5#a74047
  • editorBracketHighlight.foreground6#5a32a3
  • editorBracketMatch.background#34d05840
  • editorBracketMatch.border#34d05800
  • editorCursor.foreground#044289
  • editorError.foreground#cb2431
  • editorGroup.border#e1e4e8
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#ffffff00
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#d73a49
  • editorGutter.modifiedBackground#4f9eeb
  • editorIndentGuide.activeBackground1#d7dbe0
  • editorIndentGuide.background1#eff2f6
  • editorLineNumber.activeForeground#24292e
  • editorLineNumber.foreground#1b1f234d
  • editorOverviewRuler.border#ffffff
  • editorOverviewRuler.modifiedForeground#4f9eeb
  • editorRuler.foreground#e1e4e8
  • editorWarning.foreground#dcab07
  • editorWhitespace.foreground#d1d5da
  • editorWidget.background#ffffff
  • editorWidget.resizeBorder#ffffff00
  • errorForeground#cb2431
  • focusBorder#4f9eeb
  • foreground#444d56
  • gitDecoration.addedResourceForeground#28a745
  • gitDecoration.conflictingResourceForeground#dcab07
  • gitDecoration.deletedResourceForeground#d73a49
  • gitDecoration.ignoredResourceForeground#959da5
  • gitDecoration.modifiedResourceForeground#005cc5
  • gitDecoration.submoduleResourceForeground#959da5
  • gitDecoration.untrackedResourceForeground#28a745
  • input.background#ffffff
  • input.border#e1e4e8
  • input.foreground#2f363d
  • input.placeholderForeground#959da5
  • list.activeSelectionBackground#e2e5e9
  • list.activeSelectionForeground#2f363d
  • list.focusBackground#cce5ff
  • list.hoverBackground#ebf0f4
  • list.hoverForeground#2f363d
  • list.inactiveFocusBackground#dbedff
  • list.inactiveSelectionBackground#e8eaed
  • list.inactiveSelectionForeground#2f363d
  • notificationCenterHeader.background#e1e4e8
  • notificationCenterHeader.foreground#6a737d
  • notifications.background#ffffff
  • notifications.border#e1e4e8
  • notifications.foreground#2f363d
  • notificationsErrorIcon.foreground#d73a49
  • notificationsInfoIcon.foreground#005cc5
  • notificationsWarningIcon.foreground#e36209
  • panel.background#ffffff
  • panel.border#e1e4e8
  • panelInput.border#e1e4e8
  • panelTitle.activeBorder#4f9eeb
  • panelTitle.activeForeground#2f363d
  • panelTitle.inactiveForeground#6a737d
  • peekView.border#4f9eeb
  • peekViewEditor.background#ffffff
  • peekViewResult.background#ffffff
  • pickerGroup.border#e1e4e8
  • pickerGroup.foreground#2f363d
  • progressBar.background#4f9eeb
  • quickInput.background#ffffff
  • quickInput.foreground#2f363d
  • scrollbar.shadow#ffffff00
  • scrollbarSlider.activeBackground#959da588
  • scrollbarSlider.background#959da533
  • scrollbarSlider.hoverBackground#959da544
  • settings.headerForeground#2f363d
  • settings.modifiedItemIndicator#4f9eeb
  • sideBar.background#ffffff
  • sideBar.border#e1e4e8
  • sideBar.foreground#586069
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#e1e4e8
  • sideBarSectionHeader.foreground#2f363d
  • sideBarTitle.foreground#2f363d
  • statusBar.background#ffffff
  • statusBar.border#e1e4e8
  • statusBar.debuggingBackground#f9826c
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#586069
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.compactHoverBackground#e1e4e8
  • statusBarItem.hoverBackground#ebf0f4
  • statusBarItem.prominentBackground#e8eaed
  • statusBarItem.remoteBackground#ffffff
  • statusBarItem.remoteForeground#586069
  • tab.activeBackground#ffffff
  • tab.activeBorder#4f9eeb
  • tab.activeBorderTop#ffffff00
  • tab.activeForeground#2f363d
  • tab.border#ffffff00
  • tab.hoverBackground#ebf0f4
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#6a737d
  • tab.unfocusedActiveBorder#E1E4E8
  • tab.unfocusedActiveBorderTop#ffffff00
  • tab.unfocusedHoverBackground#ffffff
  • terminal.ansiBlack#24292e
  • terminal.ansiBlue#0366d6
  • terminal.ansiBrightBlack#959da5
  • terminal.ansiBrightBlue#005cc5
  • terminal.ansiBrightCyan#3192aa
  • terminal.ansiBrightGreen#22863a
  • terminal.ansiBrightMagenta#5a32a3
  • terminal.ansiBrightRed#cb2431
  • terminal.ansiBrightWhite#d1d5da
  • terminal.ansiBrightYellow#b08800
  • terminal.ansiCyan#1b7c83
  • terminal.ansiGreen#28a745
  • terminal.ansiMagenta#5a32a3
  • terminal.ansiRed#d73a49
  • terminal.ansiWhite#6a737d
  • terminal.ansiYellow#dbab09
  • terminal.background#ffffff
  • terminal.foreground#24292e
  • terminal.tab.activeBorder#4f9eeb
  • terminalCursor.background#d1d5da
  • terminalCursor.foreground#24292e
  • testing.iconErrored#d73a49
  • testing.iconFailed#d73a49
  • testing.iconPassed#22863A
  • testing.iconQueued#dbab09
  • testing.iconSkipped#6a737d
  • testing.iconUnset#6a737d
  • testing.message.error.decorationForeground#cb2431
  • testing.peekBorder#cb2431
  • testing.runAction#22863A
  • textBlockQuote.background#fafbfc
  • textBlockQuote.border#e1e4e8
  • textCodeBlock.background#f6f8fa
  • textLink.activeForeground#4f9eeb
  • textLink.foreground#005cc5
  • textPreformat.background#f6f8fa
  • textPreformat.foreground#24292E
  • textSeparator.foreground#d1d5da
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#2f363d
  • titleBar.border#E1E4E8
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#6a737d
  • tree.indentGuidesStroke#e1e4e8
  • widget.border#e1e4e8
  • widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6A737D
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language#005CC5
entity, entity.name#6F42C1
variable.parameter.function#24292E
entity.name.tag#22863A
keyword#D73A49
storage, storage.type#D73A49
storage.modifier.package, storage.modifier.import, storage.type.java#24292E
string, punctuation.definition.string, string punctuation.section.embedded source#032F62
support#005CC5
meta.property-name#005CC5
variable#E36209
variable.other#24292E
invalid.broken#B31D28italic
invalid.deprecated#B31D28italic
invalid.illegal#B31D28italic
invalid.unimplemented#B31D28italic
carriage-return#FAFBFCitalic underline
message.error#B31D28
string variable#005CC5
source.regexp, string.regexp#032F62
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#032F62
string.regexp constant.character.escape#22863Abold
support.constant#005CC5
support.variable#005CC5
meta.module-reference#005CC5
punctuation.definition.list.begin.markdown#9C602B
markup.heading, markup.heading entity.name#005CC5bold
markup.quote#22863A
markup.italic#24292Eitalic
markup.bold#24292Ebold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#005CC5
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#B31D28
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#22863A
markup.changed, punctuation.definition.changed#E36209
markup.ignored, markup.untracked#F6F8FA
meta.diff.range#6F42C1bold
meta.diff.header#005CC5
meta.separator#005CC5bold
meta.output#005CC5
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#586069
brackethighlighter.unmatched#B31D28
constant.other.reference.link, string.other.link#032F62underline
keyword#A74047
storage#A74047
storage.type#A74047
variable.parameter#22863A
variable.css#22863A
variable.scss#22863A
support.constant.property-value.css#032F62
entity.name.type#9C602B
constant.language.json.comments#A74047
constant.numeric.json.comments#A74047
constant.language.boolean.false.tsx#A74047
constant.language.boolean.true.tsx#A74047
constant.character.escape.json.comments#22863A
support.class.component.tsx#9C602B
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
variable.object.property.tsx#24292E
variable.object.property.ts#24292E
variable#24292E
support.type.graphql#9C602B
constant.character.enum.graphql#9C602B
support.type.builtin.graphql#9C602B
variable#24292E
support.type.primitive.ts#9C602B
support.type.builtin.ts#9C602B
support.type.primitive.tsx#9C602B
entity.other.inherited-class.ts, entity.other.inherited-class.tsx#9C602B
source.yaml invalid.illegal#24292E
source.svg keyword#24292E
GitHub Soft Theme by Igor Krupenja - VS Code Theme