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#e5ecde
  • activityBar.border#d0dac5
  • activityBar.foreground#4a5d42
  • activityBar.inactiveForeground#8da37a
  • badge.background#7c9a6b
  • badge.foreground#ffffff
  • button.background#7c9a6b
  • button.foreground#ffffff
  • button.hoverBackground#6b8e55
  • diffEditor.insertedTextBackground#d8e8d0
  • diffEditor.removedTextBackground#f0d8d8
  • editor.background#f0f4e8
  • editor.findMatchBackground#c8d6bb
  • editor.findMatchHighlightBackground#dce5d3
  • editor.foreground#4a5d42
  • editor.inactiveSelectionBackground#dce5d3
  • editor.lineHighlightBackground#e8ede0
  • editor.selectionBackground#d0dac5
  • editor.selectionHighlightBackground#d8e2cc
  • editorBracketMatch.background#dce5d3
  • editorBracketMatch.border#7c9a6b
  • editorCursor.foreground#4a5d42
  • editorGutter.addedBackground#00a240
  • editorGutter.deletedBackground#e02e2a
  • editorGutter.modifiedBackground#7c9a6b
  • editorLineNumber.activeForeground#4a5d42
  • editorLineNumber.foreground#8da37a
  • focusBorder#7c9a6b
  • gitDecoration.addedResourceForeground#00a240
  • gitDecoration.deletedResourceForeground#e02e2a
  • gitDecoration.modifiedResourceForeground#7c9a6b
  • input.background#f6f8f2
  • input.border#d0dac5
  • input.foreground#4a5d42
  • input.placeholderForeground#a3b899
  • inputOption.activeBorder#7c9a6b
  • list.activeSelectionBackground#d0dac5
  • list.activeSelectionForeground#4a5d42
  • list.errorForeground#e02e2a
  • list.hoverBackground#e5ecde
  • list.inactiveSelectionBackground#dce5d3
  • list.warningForeground#c9a032
  • menu.background#f6f8f2
  • menu.foreground#4a5d42
  • menu.selectionBackground#dce5d3
  • menu.separatorBackground#d0dac5
  • panel.background#f0f4e8
  • panel.border#d0dac5
  • panelTitle.activeForeground#4a5d42
  • panelTitle.inactiveForeground#8da37a
  • scrollbar.shadow#d0dac5
  • scrollbarSlider.activeBackground#7c9a6b
  • scrollbarSlider.background#c0ceb3
  • scrollbarSlider.hoverBackground#a8ba9c
  • sideBar.background#e8ede0
  • sideBar.border#d0dac5
  • sideBar.foreground#4a5d42
  • sideBarSectionHeader.background#e5ecde
  • sideBarSectionHeader.foreground#4a5d42
  • sideBarTitle.foreground#4a5d42
  • statusBar.background#e5ecde
  • statusBar.border#d0dac5
  • statusBar.foreground#4a5d42
  • statusBar.noFolderBackground#e5ecde
  • tab.activeBackground#f0f4e8
  • tab.activeForeground#4a5d42
  • tab.border#d0dac5
  • tab.inactiveBackground#e5ecde
  • tab.inactiveForeground#8da37a
  • terminal.background#f0f4e8
  • terminal.foreground#4a5d42
  • terminal.selectionBackground#d0dac5
  • terminalCursor.foreground#4a5d42
  • titleBar.activeBackground#e5ecde
  • titleBar.activeForeground#4a5d42
  • titleBar.inactiveBackground#e8ede0
  • titleBar.inactiveForeground#8da37a
  • widget.shadow#d0dac5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a3b899italic
keyword, storage.type, storage.modifier#5A7D6Bbold
string, string.quoted#b8956a
constant.numeric, constant.language#8a7a5a
entity.name.function#7a6b5a
support.function, meta.function-call#6b7d5e
keyword.operator, punctuation.accessor#4A5D42
variable, variable.parameter, support.variable#4a5d42
entity.name.type, entity.name.class, entity.name.namespace, support.type, storage.type.java#5a7d6b
storage.type.annotation, entity.name.type.annotation, punctuation.definition.annotation#8b7a5a
variable.other.constant, constant.character#8a7a5a
variable.other.property, support.variable.property#4a5d42
entity.name.tag#5A7D6B
entity.other.attribute-name#7a6b5a
markup.inserted#00a240
markup.deleted#e02e2a
markup.heading, entity.name.section#3d4f36bold
markup.boldbold
markup.italicitalic
Sage 鼠尾草 by Licy - VS Code Theme