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#1a1a1a
  • activityBar.border#303030
  • activityBar.foreground#b0a090
  • activityBar.inactiveForeground#606060
  • activityBarBadge.background#6a9a9a
  • activityBarBadge.foreground#e0e0e0
  • badge.background#6a9a9a
  • badge.foreground#ffffff
  • breadcrumb.background#1a1a1a
  • breadcrumb.focusForeground#d4a06a
  • breadcrumb.foreground#a0a0a0
  • button.background#6a9a9a
  • button.foreground#ffffff
  • button.hoverBackground#7aaaaa
  • checkbox.background#252525
  • checkbox.border#404040
  • checkbox.foreground#b0a090
  • dropdown.background#252525
  • dropdown.border#404040
  • dropdown.foreground#b0a090
  • editor.background#1c1c1c
  • editor.findMatchBackground#505a50
  • editor.findMatchHighlightBackground#5a5050
  • editor.foreground#b0a090
  • editor.inactiveSelectionBackground#353535
  • editor.lineHighlightBackground#252525
  • editor.lineHighlightBorder#303030
  • editor.selectionBackground#404040
  • editorBracketMatch.background#353535
  • editorBracketMatch.border#6a9a9a
  • editorCursor.foreground#c4a44a
  • editorHoverWidget.background#1a1a1a
  • editorHoverWidget.border#6a9a9a
  • editorHoverWidget.foreground#b0a090
  • editorIndentGuide.activeBackground#505050
  • editorIndentGuide.background#303030
  • editorLineNumber.activeForeground#a0a0a0
  • editorLineNumber.foreground#505050
  • editorSuggestWidget.background#1e1e1e
  • editorSuggestWidget.border#404040
  • editorSuggestWidget.foreground#b0a090
  • editorSuggestWidget.highlightForeground#d4a06a
  • editorSuggestWidget.selectedBackground#353535
  • editorWhitespace.foreground#353535
  • editorWidget.background#1e1e1e
  • editorWidget.border#404040
  • editorWidget.foreground#b0a090
  • focusBorder#6a9a9a80
  • foreground#b0a090
  • gitDecoration.addedResourceForeground#8aaa7a
  • gitDecoration.conflictingResourceForeground#b89ac4
  • gitDecoration.deletedResourceForeground#c47a7a
  • gitDecoration.ignoredResourceForeground#606060
  • gitDecoration.modifiedResourceForeground#d4a06a
  • gitDecoration.stageDeletedResourceForeground#c47a7a
  • gitDecoration.stageModifiedResourceForeground#d4a06a
  • gitDecoration.submoduleResourceForeground#6a9a9a
  • gitDecoration.untrackedResourceForeground#7a9ac4
  • input.background#252525
  • input.border#404040
  • input.foreground#b0a090
  • input.placeholderForeground#606060
  • inputOption.activeBackground#6a9a9a40
  • inputOption.activeForeground#d4a06a
  • list.activeSelectionBackground#404040
  • list.activeSelectionForeground#d4a06a
  • list.focusBackground#353535
  • list.focusForeground#d4a06a
  • list.hoverBackground#2a2a2a
  • list.inactiveSelectionBackground#353535
  • menu.background#1e1e1e
  • menu.border#303030
  • menu.foreground#b0a090
  • menu.selectionBackground#353535
  • menu.selectionForeground#d4a06a
  • menubar.selectionBackground#353535
  • menubar.selectionForeground#d4a06a
  • panel.background#1a1a1a
  • panel.border#303030
  • panelTitle.activeBorder#6a9a9a
  • panelTitle.activeForeground#b0a090
  • panelTitle.inactiveForeground#808080
  • progressBar.background#6a9a9a
  • scrollbarSlider.activeBackground#6a9a9a
  • scrollbarSlider.background#404040
  • scrollbarSlider.hoverBackground#505050
  • selection.background#404040
  • sideBar.background#1e1e1e
  • sideBar.border#303030
  • sideBar.foreground#a0a0a0
  • sideBarSectionHeader.background#252525
  • sideBarSectionHeader.border#303030
  • sideBarSectionHeader.foreground#b0a090
  • sideBarTitle.foreground#b0a090
  • statusBar.background#181818
  • statusBar.border#303030
  • statusBar.debuggingBackground#4a4a5a
  • statusBar.foreground#a0a0a0
  • statusBar.noFolderBackground#4a4040
  • statusBarItem.remoteBackground#6a9a9a
  • tab.activeBackground#1c1c1c
  • tab.activeBorder#6a9a9a
  • tab.activeBorderTop#d4a06a
  • tab.activeForeground#d4a06a
  • tab.border#303030
  • tab.hoverBackground#252525
  • tab.hoverForeground#b0a090
  • tab.inactiveBackground#1e1e1e
  • tab.inactiveForeground#606060
  • terminal.ansiBlack#1c1c1c
  • terminal.ansiBlue#7a9ac4
  • terminal.ansiBrightBlack#606060
  • terminal.ansiBrightBlue#90aad4
  • terminal.ansiBrightCyan#7aaaaa
  • terminal.ansiBrightGreen#a0ba90
  • terminal.ansiBrightMagenta#c8aad4
  • terminal.ansiBrightRed#d49090
  • terminal.ansiBrightWhite#d0c8c0
  • terminal.ansiBrightYellow#e0b480
  • terminal.ansiCyan#6a9a9a
  • terminal.ansiGreen#8aaa7a
  • terminal.ansiMagenta#b89ac4
  • terminal.ansiRed#c47a7a
  • terminal.ansiWhite#b0a090
  • terminal.ansiYellow#d4a06a
  • terminal.background#1c1c1c
  • terminal.foreground#b0a090
  • terminal.selectionBackground#404040
  • terminalCursor.foreground#c4a44a
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#b0a090
  • titleBar.border#303030
  • titleBar.inactiveBackground#1e1e1e
  • titleBar.inactiveForeground#808080
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a8a7aitalic
string, string.template, string.quoted#d4a06a
punctuation.definition.string.begin, punctuation.definition.string.end#b8905a
punctuation.definition.string.template.begin, punctuation.definition.string.template.end#d4a06a
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#6a9a9a
constant.other.placeholder, string.quoted.other.placeholder#b89ac4
constant.character.escape, constant.character.escape.sequence#c47a9a
constant.numeric, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal, constant.numeric.float#b89bb8
constant.language, support.constant, variable.other.constant, constant.character#b89bb8
punctuation.definition.directive, punctuation.definition.preprocessor, keyword.control.directive.pound#a06050
keyword.control.directive, keyword.control.preprocessor, meta.preprocessor#c48a6abold
entity.name.function.preprocessor, meta.preprocessor.macro, variable.other.preprocessor, entity.name.constant.preprocessor#c48a6abold
string.quoted.other.lt-gt.include, string.quoted.double.include, string.quoted.include#b8905a
constant.other.color.rgb-value, punctuation.definition.constant.color#c47a9a
keyword.control, keyword.other, storage.modifier#6a9a9a
storage.type, storage.type.class, storage.type.struct, storage.type.enum, storage.type.typedef, storage.type.union#6aaa9a
entity.name.type, entity.name.type.class, entity.name.type.struct, entity.name.type.enum, entity.name.type.union, support.type#6aaa9a
support.type.primitive, storage.type.primitive, storage.type.builtin, storage.type.basic#8aaa7aitalic
storage.modifier, storage.type.qualifier#6a9a9a
keyword.operator.pointer, keyword.operator.reference, storage.modifier.pointer, punctuation.definition.pointer#c4a44abold
keyword.operator.dereference#c4a44abold
keyword.operator.address-of#c4a44abold
keyword.operator.new, keyword.operator.delete, keyword.operator.expression.instanceof, keyword.operator.expression.typeof#6a9a9a
entity.name.function, support.function, meta.function-call, meta.function#7a9ac4
variable.parameter, variable.parameter.function, meta.parameter#b0a090
entity.name.class, support.class, entity.other.inherited-class, entity.name.type.class#c47a7a
variable, variable.other.readwrite, variable.other#b0a090
meta.object-literal.key, variable.object.property, support.variable.property#b8a080
variable.language, variable.parameter.function.language.special, variable.language.this, variable.language.super#c47a7aitalic
keyword.operator, punctuation.separator.key-value#a0a0a0
keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational#b8a080
keyword.operator.arithmetic#a0a0a0
keyword.operator.assignment, keyword.operator.assignment.compound#b8a080
punctuation.definition.arguments, punctuation.definition.parameters, punctuation.separator.delimiter, punctuation.terminator, punctuation.section.block, punctuation.curlybrace, punctuation.roundbrace, punctuation.squarebrace, punctuation.separator, meta.brace#8a8a8a
entity.name.tag, meta.tag, punctuation.definition.tag#8a8a9a
entity.other.attribute-name, meta.attribute#b0a090
entity.other.attribute-name.id#7a9ac4
support.type.property-name, meta.property-name#b0a090
support.constant.property-value, support.constant.color#d4a06a
keyword.other.unit#b89bb8
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#6aaa9a
entity.name.lifetime, storage.modifier.lifetime#b89ac4
entity.name.function.macro, meta.macro.rules#c48a6abold
meta.attribute.rust, punctuation.brackets.attribute#b89bb8
storage.type.haskell, entity.name.type.haskell#6aaa9a
entity.name.function.haskell#7a9ac4
keyword.control.directive.asm, storage.modifier.asm#c48a6abold
keyword.operator.mnemonic, support.function.asm#6a9a9a
variable.language.register, support.constant.register#b89bb8
entity.name.label, entity.name.function.label#c47a7a
keyword.control.zig, storage.modifier.zig#6a9a9a
support.function.builtin.zig#7a9ac4
entity.name.type.error.zig#c47a7a
keyword.control.nim, storage.type.nim#6a9a9a
meta.pragma.nim, keyword.other.pragma.nim#b89bb8
storage.type.nim, entity.name.type.nim#6aaa9a
markup.heading, entity.name.section#c47a7abold
markup.underline.link, string.other.link#7a9ac4
markup.bold#b8a080bold
markup.italic#b8a080italic
markup.raw, markup.inline.raw#d4a06a
markup.quote#6a8a7aitalic
punctuation.definition.list#c48a6a
markup.inserted.diff, meta.diff.header.to-file#8aaa7a
markup.deleted.diff, meta.diff.header.from-file#c47a7a
markup.changed.diff#d4a06a
Goliath Theme by sibunut - VS Code Theme