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#e3e5e8
  • activityBar.foreground#44b682
  • activityBarBadge.background#44b682
  • badge.background#f04747
  • badge.foreground#ffffff
  • button.background#5865f2
  • button.hoverBackground#4752c4
  • dropdown.background#f3f3f4
  • editor.background#ffffff
  • editor.foreground#2e3338
  • editor.lineHighlightBackground#fafafa
  • editor.selectionBackground#2ecc7144
  • editor.selectionHighlightBackground#1abc9c44
  • editorBracketHighlight.foreground1#ad1457
  • editorBracketHighlight.foreground2#992d22
  • editorBracketHighlight.foreground3#a84300
  • editorBracketHighlight.foreground4#c27c0e
  • editorBracketHighlight.foreground5#1f8b4c
  • editorBracketHighlight.foreground6#11806a
  • editorBracketHighlight.unexpectedBracket.foreground#f04747
  • editorCursor.foreground#747449
  • editorWhitespace.foreground#ebedef
  • editorWidget.background#ebedef
  • focusBorder#44b682
  • input.background#ebedef
  • list.activeSelectionBackground#44b682
  • notifications.background#e3e5e8
  • panel.background#ffffff
  • peekViewEditor.background#f2f3f5
  • peekViewEditorGutter.background#f2f3f5
  • progressBar.background#44b682
  • scrollbarSlider.background#cccccc
  • scrollbarSlider.hoverBackground#cccccc
  • sideBar.background#f2f3f5
  • sideBar.dropBackground#828797d7
  • sideBarSectionHeader.background#f2f3f5
  • statusBar.background#e3e5e8
  • statusBar.border#00000000
  • statusBar.debuggingBackground#e3e5e8
  • statusBar.foreground#2e3338
  • statusBar.noFolderBackground#e3e5e8
  • terminal.ansiBlack#36393f
  • terminal.ansiBlue#4752c4
  • terminal.ansiBrightBlack#546e7a
  • terminal.ansiBrightBlue#5865f2
  • terminal.ansiBrightCyan#3496db
  • terminal.ansiBrightGreen#2ecc71
  • terminal.ansiBrightMagenta#9b59b6
  • terminal.ansiBrightRed#e91e63
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f1c40f
  • terminal.ansiCyan#206694
  • terminal.ansiGreen#1f8b4c
  • terminal.ansiMagenta#71368a
  • terminal.ansiRed#ad1457
  • terminal.ansiWhite#dcddde
  • terminal.ansiYellow#c27c0e
  • terminal.background#36393f
  • terminal.foreground#dcddde
  • terminalCursor.background#2e3338
  • terminalCursor.foreground#dcddde
  • textLink.activeForeground#b5eed4
  • textLink.foreground#44b682
  • titleBar.activeBackground#e3e5e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#828797
string#3498DB
constant.numeric#AE81FF
constant.language#AE81FF
constant.character, constant.other#AE81FF
variable#607D8B
keyword#F92672
storage#F92672
storage.type#F92672
entity.name.class#44B682underline
entity.other.inherited-class#44B682
entity.name.function#44B682
variable.parameter#FD971F
entity.name.tag#F92672
entity.other.attribute-name#A6E22E
support.function#E91E63
support.constant#E91E63
support.type, support.class#E91E63
support.other.variable
invalid#979C9F
invalid.deprecated#979C9F
variable.other.readwrite.instance#3498DB
constant.other.symbol.hashkey.parameter.function, comment.line.parameter.yard.ruby#FD971F
comment.line.keyword.yard.ruby, comment.line.keyword.punctuation.yard.ruby#1ABC9C
comment.line.type.yard.ruby, comment.line.punctuation.yard.ruby#C27C0E
markup.heading.markdown#C27C0E
markup.inline.raw.string.markdown#747F8D
variable.other.readwrite.global.ruby#2ECC71
meta.embedded.block#2E3338
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
variable.other.readwrite.instance#3498DB
constant.other.symbol.hashkey.parameter.function, comment.line.parameter.yard.ruby#FD971F
comment.line.keyword.yard.ruby, comment.line.keyword.punctuation.yard.ruby#1ABC9C
comment.line.type.yard.ruby, comment.line.punctuation.yard.ruby#C27C0E
markup.heading.markdown#C27C0E
markup.inline.raw.string.markdown#747F8D
variable.other.readwrite.class.ruby#206694
variable.other.readwrite.global.ruby#2ECC71
discord-light by Nanashi. - VS Code Theme