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#060a06
  • activityBar.border#1f4e1f
  • activityBar.foreground#7af77a
  • activityBar.inactiveForeground#3a7a3a
  • button.background#1f4e1f
  • button.foreground#a0ffa0
  • button.hoverBackground#3a7a3a
  • disabledForeground#284c28
  • dropdown.background#0a120a
  • dropdown.border#1f4e1f
  • dropdown.foreground#55c455
  • editor.background#060a06
  • editor.findMatchBackground#b7ffb7
  • editor.findMatchHighlightBackground#1a301a4d
  • editor.findRangeHighlightBackground#1a301a4d
  • editor.foreground#55c455
  • editor.inactiveSelectionBackground#1a301a4d
  • editor.lineHighlightBackground#0a120a
  • editor.lineHighlightBorder#0a120a
  • editor.selectionBackground#347a34
  • editor.selectionForeground#e8ffe8
  • editor.selectionHighlightBackground#1a301a4d
  • editor.wordHighlightBackground#1a301a4d
  • editor.wordHighlightStrongBackground#1a301a4d
  • editorBracketMatch.background#b7ffb754
  • editorBracketMatch.border#b7ffb754
  • editorCursor.background#7af77a7f
  • editorCursor.foreground#7af77a7f
  • editorError.foreground#31d18f
  • editorGutter.background#060a06
  • editorHint.foreground#3a7a3a
  • editorHoverWidget.background#0a120a
  • editorHoverWidget.border#1f4e1f
  • editorIndentGuide.activeBackground1#3a7a3a
  • editorIndentGuide.background1#1f4e1f
  • editorInfo.foreground#7af77a
  • editorLineNumber.activeForeground#7af77a
  • editorLineNumber.foreground#3a7a3a
  • editorWarning.foreground#a0ffa0
  • editorWhitespace.foreground#284c28
  • editorWidget.background#0a120a
  • editorWidget.border#1f4e1f
  • errorForeground#31d18f
  • focusBorder#1f4e1f
  • foreground#55c455
  • gitDecoration.addedResourceForeground#7af77a
  • gitDecoration.deletedResourceForeground#284c28
  • gitDecoration.modifiedResourceForeground#63e063
  • input.background#0a120a
  • input.border#1f4e1f
  • input.foreground#55c455
  • list.activeSelectionBackground#1f4e1f
  • list.activeSelectionForeground#a0ffa0
  • list.highlightForeground#63e063
  • list.hoverBackground#0a120a
  • list.inactiveSelectionBackground#0a120a
  • list.inactiveSelectionForeground#55c455
  • notificationCenterHeader.background#0a120a
  • notifications.background#0a120a
  • notifications.border#1f4e1f
  • notifications.foreground#55c455
  • panel.background#060a06
  • panel.border#1f4e1f
  • peekView.border#1f4e1f
  • peekViewEditor.background#0a120a
  • sideBar.background#060a06
  • sideBar.border#1f4e1f
  • sideBar.foreground#55c455
  • sideBarSectionHeader.background#0a120a
  • sideBarSectionHeader.foreground#7af77a
  • statusBar.background#63e063
  • statusBar.foreground#101610
  • statusBar.noFolderBackground#0a120a
  • statusBar.noFolderForeground#55c455
  • terminal.ansiBlack#060a06
  • terminal.ansiBlue#55c455
  • terminal.ansiBrightBlack#284c28
  • terminal.ansiBrightBlue#7af77a
  • terminal.ansiBrightCyan#a0ffa0
  • terminal.ansiBrightGreen#a0ffa0
  • terminal.ansiBrightMagenta#7af77a
  • terminal.ansiBrightRed#63e063
  • terminal.ansiBrightWhite#b7ffb7
  • terminal.ansiBrightYellow#a0ffa0
  • terminal.ansiCyan#7af77a
  • terminal.ansiGreen#7af77a
  • terminal.ansiMagenta#63e063
  • terminal.ansiRed#31d18f
  • terminal.ansiWhite#e8ffe8
  • terminal.ansiYellow#63e063
  • terminal.background#060a06
  • terminal.foreground#55c455
  • titleBar.activeBackground#060a06
  • titleBar.activeForeground#55c455
  • titleBar.inactiveBackground#060a06
  • titleBar.inactiveForeground#3a7a3a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#284c28italic
string, string.quoted, string.template, punctuation.definition.string#a0ffa0
constant.numeric, constant.language.boolean, constant.numeric.integer, constant.numeric.float#7af77a
constant, variable.other.constant, entity.name.constant#7af77a
keyword, storage.type, storage.modifier#63e063bold
keyword.operator, punctuation, meta.brace, meta.delimiter#55c455
entity.name.function, support.function, meta.function-call, variable.function#7af77a
entity.name.type, support.type, support.class, entity.name.class, storage.type.class#55c455
variable, identifier#55c455
entity.name.tag, punctuation.definition.tag#63e063
entity.other.attribute-name#55c455
markup.underline.link, string.other.link#63e063underline
markup.heading, entity.name.section#7af77abold underline
markup.inserted, markup.deleted, meta.diff, source.diff#7af77a
awesome-green by awesometaro - VS Code Theme