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.activeBorder#6B8F71
  • activityBar.background#F5EFE6
  • activityBar.border#E8DFD1
  • activityBar.foreground#2E2923
  • breadcrumb.background#F5EFE6
  • commandCenter.activeBackground#9E7209
  • commandCenter.activeBorder#2E2923
  • commandCenter.background#B8860B
  • commandCenter.border#2E2923
  • commandCenter.foreground#FAF6F0
  • commandCenter.inactiveBorder#3D3630
  • debugToolBar.background#F5EFE6
  • disabledForeground#7A7168
  • editor.background#FAF6F0
  • editor.findMatchBackground#D4A01799
  • editor.findMatchBorder#D4A01799
  • editor.findMatchHighlightBackground#FCEBD566
  • editor.foreground#2E2923
  • editor.lineHighlightBackground#F0EBE2
  • editor.selectionBackground#C8DBBE
  • editor.selectionForeground#2E2923
  • editor.selectionHighlightBackground#D4E4D17F
  • editor.wordHighlightBackground#D4E4D180
  • editor.wordHighlightStrongBackground#F5DCC87F
  • editorError.foreground#C0503A
  • editorGroupHeader.noTabsBackground#F5EFE6
  • editorGroupHeader.tabsBackground#F5EFE6
  • editorGroupHeader.tabsBorder#E8DFD1
  • editorGutter.background#FAF6F0
  • editorHint.foreground#9E958A
  • editorIndentGuide.activeBackground1#B8A99A
  • editorIndentGuide.background1#E8DFD1
  • editorInfo.foreground#5B7DA6
  • editorInlayHint.background#F5EFE6
  • editorInlayHint.foreground#9E958A
  • editorLineNumber.activeForeground#7A7168
  • editorLineNumber.dimmedForeground#7A7168
  • editorLineNumber.foreground#B8A99A
  • editorOverviewRuler.background#F5EFE6
  • editorOverviewRuler.border#F5EFE6
  • editorOverviewRuler.errorForeground#C0503A
  • editorOverviewRuler.infoForeground#5B7DA6
  • editorOverviewRuler.warningForeground#B8860B
  • editorWarning.foreground#B8860B
  • editorWidget.background#F5EFE6
  • editorWidget.border#E8DFD1
  • focusBorder#B8A99A
  • gitDecoration.addedResourceForeground#3E6B45
  • gitDecoration.modifiedResourceForeground#3D5A80
  • list.activeSelectionBackground#C8DBBE
  • list.activeSelectionForeground#2E2923
  • list.focusAndSelectionOutline#C8DBBE
  • list.focusBackground#E4DCD0
  • list.focusForeground#2E2923
  • list.focusOutline#E4DCD0
  • list.hoverBackground#EDE7DC
  • list.hoverForeground#2E2923
  • list.inactiveSelectionBackground#E4DCD0
  • list.inactiveSelectionForeground#2E2923
  • minimap.background#F5EFE6
  • minimapSlider.background#9E958A33
  • panel.background#F5EFE6
  • panel.border#E8DFD1
  • panelSection.border#E8DFD1
  • panelSectionHeader.background#F5EFE6
  • panelSectionHeader.border#E8DFD1
  • problemsErrorIcon.foreground#C0503A
  • problemsInfoIcon.foreground#5B7DA6
  • problemsWarningIcon.foreground#B8860B
  • scrollbarSlider.background#9E958A33
  • sideBar.background#F5EFE6
  • sideBar.border#E8DFD1
  • sideBar.foreground#2E2923
  • sideBarSectionHeader.background#F5EFE6
  • sideBarSectionHeader.border#E8DFD1
  • statusBar.background#F5EFE6
  • statusBar.border#E8DFD1
  • statusBar.debuggingBackground#6B8F71
  • statusBar.debuggingForeground#FAF6F0
  • statusBar.foreground#2E2923
  • statusBar.noFolderBackground#F5EFE6
  • statusBarItem.remoteBackground#F5EFE6
  • statusBarItem.remoteForeground#2E2923
  • tab.activeBackground#FAF6F0
  • tab.activeBorder#6B8F71
  • tab.activeForeground#2E2923
  • tab.border#E8DFD1
  • tab.hoverForeground#2E2923
  • tab.inactiveBackground#F5EFE6
  • tab.inactiveForeground#9E958A
  • terminal.ansiBlack#5C544B
  • terminal.ansiBlue#3D5A80
  • terminal.ansiBrightBlack#2E2923
  • terminal.ansiBrightBlue#5B7DA6
  • terminal.ansiBrightCyan#5A8F8F
  • terminal.ansiBrightGreen#3E6B45
  • terminal.ansiBrightMagenta#7B3F61
  • terminal.ansiBrightRed#B5623F
  • terminal.ansiBrightWhite#FAF6F0
  • terminal.ansiBrightYellow#B8860B
  • terminal.ansiCyan#2E8B8B
  • terminal.ansiGreen#6B8F71
  • terminal.ansiMagenta#8B4570
  • terminal.ansiRed#C0503A
  • terminal.ansiWhite#E8DFD1
  • terminal.ansiYellow#D4A017
  • terminal.background#FAF6F0
  • terminal.foreground#2E2923
  • titleBar.activeBackground#2E2923
  • titleBar.activeForeground#F5EFE6
  • titleBar.border#2E2923
  • titleBar.inactiveBackground#3D3630
  • tree.indentGuidesStroke#B8A99A
  • widget.border#E8DFD1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#3A342Eff
comment, punctuation.definition.comment#B0A898italic
comment.block.preprocessor#B0A898
comment.documentation, comment.block.documentation#6B8F71
invalid.illegal#C0503A
keyword.operator#7A7168
keyword, storage#6E4B2Dbold
storage.type, support.type#2E2923
constant.language, support.constant#B5623F
variable, support.variable#704214bold
entity.name.function, support.function#7B3F61
entity.name.type, entity.other.inherited-class, support.class#2E2923
entity.name.exception#5E3A1A
entity.name.sectionbold
constant.numeric, constant.character, constant#B5623F
string#3E6B45bold
constant.character.escape#7A7168
string.regexp#5B7DA6
constant.other.symbol#B5623F
punctuation#7A7168
string source, text source#2E2923
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#B0A898
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#3A342E
entity.name.tag#6E4B2Dbold
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#3D5A80
string.quoted.double.html
source.css
constant.character.entity, punctuation.definition.entity#B5623F
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#8B6914
meta.property-name, support.type.property-name#B5623F
meta.property-value, meta.property-value constant.other, support.constant.property-value#3E6B45
keyword.other.importantbold
markup.changed#2E2923
markup.deleted#2E2923
markup.italicitalic
markup.error#5E3A1A
markup.inserted#2E2923
meta.link#5B7DA6
markup.output, markup.raw#7A7168
markup.prompt#7A7168
markup.heading#B5623F
markup.bold#3E6B45bold
markup.traceback#5E3A1A
markup.underlineunderline
markup.quote#8B6914
markup.list#5B7DA6
markup.italic#3E6B45italic
markup.inline.raw#B5623F
meta.diff.range, meta.diff.index, meta.separator#5C544B
meta.diff.header.from-file#5C544B
meta.diff.header.to-file#5C544B
meta.object-literal.key, meta.object-literal.key entity.name.function#7B3F61
variable.language#6E4B2Dbold
variable.other.object.js#2E8B8B
variable.other.object.property.js
variable.other.readwrite.js
variable.other.property.js
string.quoted.double.js
string.quoted.single.js
entity.name.function.js#7B3F61
support.class.console.js, meta.function-call.js, meta.block.js, meta.function.expression.js, meta.block.js, meta.method.declaration.js, meta.objectliteral.js#7B3F61
variable.parameter.js#2E2923
keyword.operator.expression.delete.js#6E4B2D
constant.language#6E4B2D
storage.type.function.js#6E4B2D
storage.type.js#6E4B2Dbold
Desert Space Light by Mihailo Matijevic - VS Code Theme