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#f9826c
  • activityBar.background#fff
  • activityBar.border#e1e4e8
  • activityBar.foreground#2f363d
  • activityBar.inactiveForeground#959da5
  • activityBarBadge.background#2188ff
  • activityBarBadge.foreground#fff
  • badge.background#dbedff
  • badge.foreground#005cc5
  • breadcrumb.activeSelectionForeground#586069
  • breadcrumb.focusForeground#2f363d
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#fafbfc
  • button.background#159739
  • button.foreground#fff
  • button.hoverBackground#138934
  • button.secondaryBackground#e1e4e8
  • button.secondaryForeground#1b1f23
  • button.secondaryHoverBackground#d1d5da
  • checkbox.background#fafbfc
  • checkbox.border#d1d5da
  • debugToolBar.background#fff
  • descriptionForeground#6a737d
  • diffEditor.insertedTextBackground#34d05822
  • diffEditor.removedTextBackground#d73a4922
  • dropdown.background#fafbfc
  • dropdown.border#e1e4e8
  • dropdown.foreground#2f363d
  • dropdown.listBackground#fff
  • editor.background#fbf8f8
  • editor.findMatchBackground#ffdf5d
  • editor.findMatchHighlightBackground#ffdf5d66
  • editor.focusedStackFrameHighlightBackground#28a74525
  • editor.foldBackground#d1d5da11
  • editor.foreground#24292e
  • editor.inactiveSelectionBackground#0366d611
  • editor.lineHighlightBackground#c2cdd838
  • editor.linkedEditingBackground#0366d611
  • editor.selectionBackground#0366d625
  • editor.selectionHighlightBackground#34d05840
  • editor.selectionHighlightBorder#34d05800
  • editor.stackFrameHighlightBackground#ffd33d33
  • editor.wordHighlightBackground#34d05800
  • editor.wordHighlightBorder#24943e99
  • editor.wordHighlightStrongBackground#34d05800
  • editor.wordHighlightStrongBorder#24943e50
  • editorBracketHighlight.foreground1#005cc5
  • editorBracketHighlight.foreground2#e36209
  • editorBracketHighlight.foreground3#5a32a3
  • editorBracketHighlight.foreground4#005cc5
  • editorBracketHighlight.foreground5#e36209
  • editorBracketHighlight.foreground6#5a32a3
  • editorBracketMatch.background#34d05840
  • editorBracketMatch.border#34d05800
  • editorCursor.foreground#044289
  • editorError.foreground#cb2431
  • editorGroup.border#e1e4e8
  • editorGroupHeader.tabsBackground#f6f8fa
  • editorGroupHeader.tabsBorder#e1e4e8
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#d73a49
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground1#d7dbe0
  • editorIndentGuide.background1#eff2f6
  • editorLineNumber.activeForeground#16181a
  • editorLineNumber.foreground#1b1f2343
  • editorOverviewRuler.border#fff
  • editorWarning.foreground#f9c513
  • editorWhitespace.foreground#d1d5da
  • editorWidget.background#f6f8fa
  • errorForeground#cb2431
  • focusBorder#2188ff
  • foreground#444d56
  • gitDecoration.addedResourceForeground#28a745
  • gitDecoration.conflictingResourceForeground#e36209
  • gitDecoration.deletedResourceForeground#d73a49
  • gitDecoration.ignoredResourceForeground#959da5
  • gitDecoration.modifiedResourceForeground#005cc5
  • gitDecoration.submoduleResourceForeground#959da5
  • gitDecoration.untrackedResourceForeground#28a745
  • input.background#fafbfc
  • 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#fafbfc
  • notifications.border#e1e4e8
  • notifications.foreground#2f363d
  • notificationsErrorIcon.foreground#d73a49
  • notificationsInfoIcon.foreground#005cc5
  • notificationsWarningIcon.foreground#e36209
  • panel.background#f6f8fa
  • panel.border#e1e4e8
  • panelInput.border#e1e4e8
  • panelTitle.activeBorder#f9826c
  • panelTitle.activeForeground#2f363d
  • panelTitle.inactiveForeground#6a737d
  • pickerGroup.border#e1e4e8
  • pickerGroup.foreground#2f363d
  • progressBar.background#2188ff
  • quickInput.background#fafbfc
  • quickInput.foreground#2f363d
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#959da588
  • scrollbarSlider.background#959da533
  • scrollbarSlider.hoverBackground#959da544
  • settings.headerForeground#2f363d
  • settings.modifiedItemIndicator#2188ff
  • sideBar.background#f6f8fa
  • sideBar.border#e1e4e8
  • sideBar.foreground#586069
  • sideBarSectionHeader.background#f6f8fa
  • sideBarSectionHeader.border#e1e4e8
  • sideBarSectionHeader.foreground#2f363d
  • sideBarTitle.foreground#2f363d
  • statusBar.background#fff
  • statusBar.border#e1e4e8
  • statusBar.debuggingBackground#f9826c
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#586069
  • statusBar.noFolderBackground#fff
  • statusBarItem.prominentBackground#e8eaed
  • statusBarItem.remoteBackground#fff
  • statusBarItem.remoteForeground#586069
  • tab.activeBackground#fff
  • tab.activeBorder#fff
  • tab.activeBorderTop#f9826c
  • tab.activeForeground#2f363d
  • tab.border#e1e4e8
  • tab.hoverBackground#fff
  • tab.inactiveBackground#f6f8fa
  • tab.inactiveForeground#6a737d
  • tab.unfocusedActiveBorder#fff
  • tab.unfocusedActiveBorderTop#e1e4e8
  • tab.unfocusedHoverBackground#fff
  • 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.foreground#586069
  • terminal.tab.activeBorder#f9826c
  • terminalCursor.background#d1d5da
  • terminalCursor.foreground#005cc5
  • textBlockQuote.background#fafbfc
  • textBlockQuote.border#e1e4e8
  • textCodeBlock.background#f6f8fa
  • textLink.activeForeground#005cc5
  • textLink.foreground#0366d6
  • textPreformat.foreground#586069
  • textSeparator.foreground#d1d5da
  • titleBar.activeBackground#fff
  • titleBar.activeForeground#2f363d
  • titleBar.border#e1e4e8
  • titleBar.inactiveBackground#f6f8fa
  • titleBar.inactiveForeground#6a737d
  • tree.indentGuidesStroke#e1e4e8
  • welcomePage.buttonBackground#f6f8fa
  • welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#919aa2italic
comment.block.preprocessor#919aa2italic
comment.documentation, comment.block.documentation#919aa2italic
invalid.illegal#BF3D34
keyword.operator#0000f3b0
keyword, storage#0f8040italic bold
storage.type, support.type#8200f4bold
constant.language, support.constant, variable.language#004d25
variable, support.variable#2d2d2d
entity.name.function, support.function#1f427citalic bold
entity.name.type, entity.other.inherited-class, support.class#9E0083bold
entity.name.exception#0586b1
entity.name.sectionbold
constant.numeric, constant.character, constant#0055ffitalic
string#c23f5f
constant.character.escape#469129bold
string.regexp#4B83CD
constant.other.symbol#2cc389
punctuation#444444bold
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#444444
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#16263B
entity.name.tag#4273B3
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#621a8fitalic
constant.character.entity, punctuation.definition.entity#E37500
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7A3E9Dbold
meta.property-name, support.type.property-name#7A3E9D
meta.property-value, meta.property-value constant.other, support.constant.property-value#E37500
keyword.other.important#AA3731bold
markup.changed#444444
markup.deleted#444444
markup.italicitalic
markup.error#660000
markup.inserted#333333
meta.link#4B83CD
markup.output, markup.raw#555555
markup.prompt#555555
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#444444
meta.diff.header.from-file#444444
meta.diff.header.to-file#444444
Nerd Sun by Josue Ttito - VS Code Theme