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#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
Guttenbergovitz by Guttenbergovitz - VS Code Theme