Skip to main content
Coding Theme

Color themes

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#1d1d20
  • activityBar.foreground#d4be98
  • activityBarBadge.background#a96b69
  • editor.background#232326
  • editor.foreground#d4be98
  • editor.lineHighlightBackground#2a2a2d
  • editor.selectionBackground#3a3a3d
  • editor.selectionHighlightBackground#3a3a3d99
  • editor.wordHighlightBackground#3a3a3d99
  • editor.wordHighlightStrongBackground#3a3a3dcc
  • editorCursor.foreground#d4be98
  • editorIndentGuide.activeBackground1#3a3a3d
  • editorIndentGuide.background1#2a2a2d
  • editorLineNumber.activeForeground#d4be98
  • editorLineNumber.foreground#7c7c7c
  • editorSuggestWidget.background#1d1d20
  • editorSuggestWidget.border#3a3a3d
  • editorSuggestWidget.selectedBackground#3a3a3d
  • editorWhitespace.foreground#3a3a3d
  • editorWidget.background#1d1d20
  • editorWidget.border#3a3a3d
  • focusBorder#3a3a3d
  • panel.background#1d1d20
  • panel.border#3a3a3d
  • panelTitle.activeForeground#d4be98
  • panelTitle.inactiveForeground#7c7c7c
  • sideBar.background#1d1d20
  • sideBar.foreground#d4be98
  • statusBar.background#1d1d20
  • statusBar.debuggingBackground#a96b69
  • statusBar.foreground#d4be98
  • statusBar.noFolderBackground#1d1d20
  • tab.activeBackground#232326
  • tab.activeForeground#d4be98
  • tab.border#1d1d20
  • tab.inactiveBackground#1d1d20
  • tab.inactiveForeground#7c7c7c
  • terminal.ansiBlack#1d1d20
  • terminal.ansiBlue#d79969
  • terminal.ansiBrightBlack#7c7c7c
  • terminal.ansiBrightBlue#d79969
  • terminal.ansiBrightCyan#89a87d
  • terminal.ansiBrightGreen#89a87d
  • terminal.ansiBrightMagenta#a96b69
  • terminal.ansiBrightRed#a96b69
  • terminal.ansiBrightWhite#d4be98
  • terminal.ansiBrightYellow#d6b986
  • terminal.ansiCyan#89a87d
  • terminal.ansiGreen#89a87d
  • terminal.ansiMagenta#a96b69
  • terminal.ansiRed#a96b69
  • terminal.ansiWhite#d4be98
  • terminal.ansiYellow#d6b986
  • terminal.background#232326
  • terminal.foreground#d4be98
  • titleBar.activeBackground#1d1d20
  • titleBar.activeForeground#d4be98
  • titleBar.inactiveBackground#1d1d20
  • titleBar.inactiveForeground#7c7c7c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.expression, keyword.operator.new, keyword.operator.wordlike, keyword.other.unit#a96b69
entity.name.function, support.function, meta.function-call.generic, meta.function-call, meta.method-call, meta.function, support.function.console, entity.name.function.method#d79969
string, string.quoted, string.template, string.regexp, constant.character, constant.other.character, constant.other.symbol#89a87d
variable, variable.other, variable.parameter, variable.language, variable.other.readwrite, variable.other.object, variable.other.property, support.variable#d4be98
entity.name.type, support.type, entity.name.class, entity.other.inherited-class, support.class, storage.type.built-in, storage.type.primitive#d6b986
variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property, support.type.property-name#d4be98
constant, constant.numeric, constant.language, constant.other, support.constant#d6b986
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.type#a96b69
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator, meta.brace#d4be98
comment, comment.line, comment.block, punctuation.definition.comment#7c7c7citalic
entity.name.tag, punctuation.definition.tag#a96b69
entity.other.attribute-name#d6b986
markup.heading, entity.name.section#d79969bold
markup.underline.link, string.other.link#89a87d