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#0a3c24
  • activityBar.foreground#CDEDE0
  • button.background#145C3A
  • button.foreground#E2F0E8
  • dropdown.background#0a3c24
  • dropdown.border#145C3A
  • dropdown.foreground#E2F0E8
  • editor.background#0F5132
  • editor.foreground#E2F0E8
  • editor.lineHighlightBackground#000000
  • editor.selectionBackground#000000
  • editor.selectionForeground#FFFFFF
  • editorCursor.foreground#B5E3C8
  • editorHoverWidget.background#0a3c24
  • editorHoverWidget.border#145C3A
  • editorLineNumber.foreground#9BCFB8
  • editorSuggestWidget.background#0a3c24
  • editorSuggestWidget.border#145C3A
  • editorSuggestWidget.foreground#E2F0E8
  • editorSuggestWidget.selectedBackground#145C3A
  • editorWidget.background#0a3c24
  • editorWidget.border#145C3A
  • input.background#0a3c24
  • input.border#145C3A
  • input.foreground#E2F0E8
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#FFFFFF
  • list.hoverBackground#0F5132
  • list.hoverForeground#E2F0E8
  • menu.background#0a3c24
  • menu.foreground#E2F0E8
  • menubar.selectionBackground#000000
  • menubar.selectionForeground#FFFFFF
  • notificationCenter.border#145C3A
  • notifications.background#0a3c24
  • notifications.border#145C3A
  • notifications.foreground#E2F0E8
  • panel.background#0F5132
  • panel.border#145C3A
  • peekView.background#0a3c24
  • peekViewEditor.background#0F5132
  • peekViewResult.background#0a3c24
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#145C3AC0
  • scrollbarSlider.background#145C3A80
  • scrollbarSlider.hoverBackground#145C3AA0
  • sideBar.background#0a3c24
  • sideBar.foreground#CDEDE0
  • statusBar.background#0A3C24
  • statusBar.foreground#B5E3C8
  • tab.activeBackground#145C3A
  • tab.activeForeground#E2F0E8
  • tab.inactiveBackground#0a3c24
  • tab.inactiveForeground#7FB8A4
  • terminal.background#0F5132
  • terminal.foreground#E2F0E8
  • titleBar.activeBackground#0a3c24
  • titleBar.activeForeground#CDEDE0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9BCFB8italic
keyword, storage.type, storage.modifier#FFD580bold
keyword.control, keyword.control.flow#FF9F9Bbold
keyword.operator, punctuation.separator, punctuation.terminator#FCE38A
string, string.quoted, string.template#C3F584
string.template.js, string.interpolated, punctuation.definition.template-expression#B8F2B8
constant.numeric, constant.numeric.integer, constant.numeric.float#FFB6B9
constant.language, constant.language.boolean, constant.language.null#FFDAC1
entity.name.function, meta.function-call, support.function#A0E7E5
variable.parameter, meta.function.parameters#F7D6E0italic
entity.name.type, entity.name.class, support.class, support.type#C4B7FFbold
entity.name.type.interface#D4C7FFitalic
variable, variable.other#F7D6E0
variable.other.property, support.variable.property#E8C5E8
meta.object-literal.key, string.unquoted#B8E6B8
entity.name.tag, punctuation.definition.tag#FF9F9B
entity.other.attribute-name#FFD580
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A0E7E5
support.type.property-name.css#C4B7FF
support.constant.property-value.css, constant.numeric.css#C3F584
support.type.property-name.json#A0E7E5
markup.heading, entity.name.section.markdown#FFD580bold
markup.bold#FF9F9Bbold
markup.italic#F7D6E0italic
markup.inline.raw, markup.fenced_code#C3F584
markup.underline.link#A0E7E5underline
invalid, invalid.illegal#FF6B6B
invalid.deprecated#FFB347strikethrough
Verdant Focus Color Theme by Mohsin Khan Shuvo - VS Code Theme