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#050505
  • activityBar.border#242424
  • activityBar.foreground#67DDE5
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#5B9BF7
  • activityBarBadge.foreground#000000
  • badge.background#5B9BF7
  • badge.foreground#000000
  • button.background#5B9BF7
  • button.foreground#000000
  • button.hoverBackground#7BAEFA
  • dropdown.background#111111
  • dropdown.border#242424
  • editor.background#000000
  • editor.findMatchBackground#6B4E1E
  • editor.findMatchHighlightBackground#3A2F1A
  • editor.foreground#E8E8E8
  • editor.inactiveSelectionBackground#1C2A3A88
  • editor.lineHighlightBackground#0D0D0D
  • editor.selectionBackground#1C2A3A
  • editor.selectionForeground#F0F0F0
  • editor.selectionHighlightBackground#5B9BF722
  • editor.wordHighlightBackground#5B9BF71f
  • editor.wordHighlightStrongBackground#5B9BF733
  • editorBracketHighlight.foreground1#67DDE5
  • editorBracketHighlight.foreground2#D8A657
  • editorBracketHighlight.foreground3#9A8CDB
  • editorBracketHighlight.foreground4#5B9BF7
  • editorBracketHighlight.foreground5#8CCF4D
  • editorBracketHighlight.foreground6#A8323A
  • editorBracketMatch.background#5B9BF733
  • editorBracketMatch.border#5B9BF7
  • editorCursor.foreground#67DDE5
  • editorError.foreground#E5484D
  • editorGroup.border#242424
  • editorGroupHeader.tabsBackground#0A0A0A
  • editorGutter.addedBackground#8CCF4D
  • editorGutter.deletedBackground#E5484D
  • editorGutter.modifiedBackground#D8A657
  • editorHint.foreground#67DDE5
  • editorHoverWidget.background#111111
  • editorHoverWidget.border#242424
  • editorIndentGuide.activeBackground1#303030
  • editorIndentGuide.background1#161616
  • editorInfo.foreground#5B9BF7
  • editorLineNumber.activeForeground#8A8A8A
  • editorLineNumber.foreground#3F3F3F
  • editorOverviewRuler.border#000000
  • editorRuler.foreground#242424
  • editorSuggestWidget.background#111111
  • editorSuggestWidget.border#242424
  • editorSuggestWidget.selectedBackground#161616
  • editorWarning.foreground#D8A657
  • editorWhitespace.foreground#161616
  • editorWidget.background#111111
  • editorWidget.border#242424
  • focusBorder#5B9BF780
  • foreground#E8E8E8
  • gitDecoration.addedResourceForeground#8CCF4D
  • gitDecoration.conflictingResourceForeground#E5484D
  • gitDecoration.deletedResourceForeground#E5484D
  • gitDecoration.ignoredResourceForeground#4D4D4D
  • gitDecoration.modifiedResourceForeground#D8A657
  • gitDecoration.untrackedResourceForeground#8CCF4D
  • input.background#111111
  • input.border#242424
  • input.foreground#E8E8E8
  • input.placeholderForeground#6F767E
  • list.activeSelectionBackground#161616
  • list.activeSelectionForeground#E8E8E8
  • list.focusBackground#161616
  • list.focusHighlightForeground#E8C46A
  • list.highlightForeground#E8C46A
  • list.hoverBackground#111111
  • list.inactiveSelectionBackground#111111
  • minimap.background#050505
  • panel.background#0A0A0A
  • panel.border#242424
  • panelTitle.activeBorder#5B9BF7
  • panelTitle.activeForeground#E8E8E8
  • peekView.border#5B9BF7
  • peekViewEditor.background#000000
  • peekViewResult.background#0A0A0A
  • scrollbarSlider.activeBackground#303030aa
  • scrollbarSlider.background#30303055
  • scrollbarSlider.hoverBackground#30303088
  • selection.background#1C2A3A
  • sideBar.background#050505
  • sideBar.border#242424
  • sideBar.foreground#B8B8B8
  • sideBarSectionHeader.background#050505
  • sideBarSectionHeader.border#242424
  • sideBarTitle.foreground#E8E8E8
  • statusBar.background#0A0A0A
  • statusBar.border#242424
  • statusBar.debuggingBackground#D8A657
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#B8B8B8
  • statusBar.noFolderBackground#0A0A0A
  • tab.activeBackground#111111
  • tab.activeBorderTop#5B9BF7
  • tab.activeForeground#E8E8E8
  • tab.border#242424
  • tab.inactiveBackground#0A0A0A
  • tab.inactiveForeground#666666
  • tab.unfocusedActiveBorderTop#242424
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#5B9BF7
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#82B4FF
  • terminal.ansiBrightCyan#8BE8EE
  • terminal.ansiBrightGreen#A6E875
  • terminal.ansiBrightMagenta#B5A8F0
  • terminal.ansiBrightRed#FF6469
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E8C875
  • terminal.ansiCyan#67DDE5
  • terminal.ansiGreen#8CCF4D
  • terminal.ansiMagenta#9A8CDB
  • terminal.ansiRed#E5484D
  • terminal.ansiWhite#E8E8E8
  • terminal.ansiYellow#D8A657
  • terminal.background#000000
  • terminal.foreground#E8E8E8
  • terminal.selectionBackground#1C2A3A
  • terminalCursor.foreground#67DDE5
  • textBlockQuote.background#0A0A0A
  • textBlockQuote.border#5B9BF7
  • textCodeBlock.background#080808
  • titleBar.activeBackground#0A0A0A
  • titleBar.activeForeground#E8E8E8
  • titleBar.border#242424
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#666666
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#E8E8E8
comment, punctuation.definition.comment#6F767Eitalic
comment.block.documentation, comment.line.documentation#858C94italic
variable, variable.other, variable.parameter, string constant.other.placeholder#E8E8E8
keyword, keyword.control, keyword.control.flow, keyword.other#C792EA
keyword.operator#B8B8B8
storage.type, storage.modifier#D8A657
support.class, support.type#D8A657
entity.name.class, entity.name.type, entity.other.inherited-class#E0B66B
string, constant.other.symbol, constant.other.key#8CCF4D
string.regexp#D8A657
constant.numeric#D8A657
constant.language.boolean#67DDE5
constant.language#C792EA
entity.name.function#82AAFF
meta.function-call entity.name.function, support.function#AFC7E8
entity.name.tag, meta.tag.sgml#5B9BF7
entity.other.attribute-name, meta.decorator#D8A657
punctuation, meta.brace#9A9A9A
support.type.property-name.json, entity.name.tag.yaml#82AAFF
support.function.builtin.shell, entity.name.function.shell#82AAFF
constant.other.option#D8A657
markup.heading#D8A657bold
markup.heading.1, markup.heading.2#E0B66Bbold
markup.boldbold
markup.italicitalic
markup.underline.link, string.other.link#5B9BF7
markup.inline.raw#67DDE5
markup.quote, punctuation.definition.quote#6F767E
invalid, invalid.illegal#E5484Dunderline