Skip to main content
CodingTheme

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.activeBorder#ff0000
  • activityBar.background#519657
  • activityBar.foreground#ffffff
  • activityBarBadge.background#75b37a
  • activityBarBadge.foreground#eeeeee
  • badge.background#519657
  • badge.foreground#eeeeee
  • button.background#2d8034
  • button.hoverBackground#519657
  • dropdown.background#c8e6c9
  • dropdown.border#c5e1a5
  • editor.background#B6DEB6
  • editor.findMatchBackground#FFFF00
  • editor.findMatchBorder#3bfdea
  • editor.findMatchHighlightBackground#cfcf35
  • editor.findMatchHighlightBorder#00000030
  • editor.foreground#616161
  • editor.lineHighlightBackground#99D099
  • editor.selectionBackground#99D099
  • editor.selectionHighlightBackground#cfcf35
  • editorGroupHeader.tabsBackground#B6DEB6
  • editorIndentGuide.activeBackground#939393
  • editorIndentGuide.background#c2c2c2
  • editorLineNumber.foreground#A0A0A0
  • editorSuggestWidget.background#c8e6c9
  • editorSuggestWidget.border#a5d6a7
  • editorSuggestWidget.foreground#338a3e
  • editorSuggestWidget.highlightForeground#338a3e
  • editorSuggestWidget.selectedBackground#a5d6a7
  • editorWhitespace.foreground#86be88
  • extensionButton.prominentBackground#3BBA54
  • extensionButton.prominentHoverBackground#4CC263
  • foreground#616161
  • gitDecoration.modifiedResourceForeground#00600f
  • input.background#c8e6c9
  • list.activeSelectionBackground#F5E5B1
  • list.activeSelectionForeground#616161
  • list.focusBackground#F5E5B1
  • list.highlightForeground#519657
  • list.hoverBackground#F5E5B1
  • list.inactiveFocusBackground#F5E5B1
  • list.inactiveSelectionBackground#99D099
  • scrollbarSlider.activeBackground#2d8034
  • scrollbarSlider.background#83b985
  • scrollbarSlider.hoverBackground#519657
  • sideBar.background#a0dba3
  • sideBarSectionHeader.background#a0dba3
  • statusBar.background#c8e6c9
  • statusBar.debuggingBackground#C8E6C9
  • statusBar.debuggingForeground#00701a
  • statusBar.foreground#519657
  • statusBar.noFolderBackground#519657
  • statusBarItem.hoverBackground#F5E5B1
  • statusBarItem.remoteBackground#C8E6C9
  • statusBarItem.remoteForeground#00600f
  • tab.activeBackground#B6DEB6
  • tab.activeBorderTop#ff0000
  • tab.activeForeground#ff0000
  • tab.border#A3E4A3
  • tab.hoverBorder#bcbdbd
  • tab.hoverForeground#ff0000
  • tab.inactiveBackground#C8E6C9
  • tab.inactiveForeground#717272
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#5597ef
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#80baff
  • terminal.ansiBrightCyan#78ffff
  • terminal.ansiBrightGreen#b8f171
  • terminal.ansiBrightMagenta#d778ff
  • terminal.ansiBrightRed#ff7882
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f1f376
  • terminal.ansiCyan#99ffff
  • terminal.ansiGreen#097e00
  • terminal.ansiMagenta#ebbbff
  • terminal.ansiRed#ff9da4
  • terminal.ansiWhite#dfdfdf
  • terminal.ansiYellow#d9e712
  • titleBar.activeBackground#c8e6c9
  • titleBar.activeForeground#519657
  • titleBar.inactiveBackground#4c5e4d
  • titleBar.inactiveForeground#519657

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#97b498
entity.name, entity.name.type, entity.name.type.class, entity.name.class, support.class, entity.other.inherited-class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, source.java storage.modifier.import, source.java storage.type#ff0000
keyword, meta.selector, markup.changed, keyword.operator.new, keyword.other.unsafe.rust#ba68c8
source.c keyword.operator, source.cpp keyword.operator, source.cs keyword.operator, source.elixir variable.definition, source.elixir variable.anonymous, source.go storage.type.string, source.java keyword.operator.instanceof, ng.attribute-with-value string, source.python keyword.operator.logical.python, source.java keyword.operator.instanceof#ba68c8
variable, variable.parameter, function.definition, punctuation.definition.variable, punctuation.definition.variable.php, punctuation.definition.variable.shell, variable.interpolation, support.type.object.module, support.type.object.module.js, support.type.object.module.ts, support.type.property-name, meta.object-literal.key, meta.object-literal.key.js, meta.object-literal.key.ts, meta.definition.variable, meta.function-call.arguments#008080
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#f07178
constant.language.json#0066CC
meta.structure.dictionary.json support.type.property-name.json#da3e3e
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e49337
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b6b433
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#42b116
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#13ccc3
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#3b7dc9
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C792EA
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d32b2b
keyword.control#0066CC
keyword.operator, meta.separator, meta.tag, meta.class.body, meta.method-call, meta.method, punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array, punctuation.definition.class, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.separator, punctuation.section.arguments, punctuation.terminator.statement, punctuation.section.block, punctuation.section.class, punctuation.section.parens, meta.object.member, meta.objectliteral#616161
meta.diff.header#000080
storage.modifier, keyword.operator.noexcept#ff00ff
function, entity.name.function, variable.function, support.function.any-method, entity.name.section, meta.function-call.generic, entity.name.tag#0000ff
support.function, keyword.other.special-method#c8a415
string#a31515
number#098658
string.regexp, string.regexp keyword.operator, string.regexp constant.character, string.interpolated, meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#e57373
entity.other.attribute-name#ab47bc
constant, constant.character, constant.numeric, constant.language, support.variable, entity.name.function.decorator#c79100
string.quoted punctuation, string.quoted.double punctuation, string.quoted.single punctuation, support.type.property-name.json punctuation#519657
storage, storage.type, storage.modifier.package, storage.modifier.import#ab47bc
keyword.other.unit, constant.other.color, constant.other.symbol, entity.other, markup.quote, punctuation.definition.bold, markup.bold, markup.inline.raw.string#c79100
heading.1, heading.2, punctuation.definition.bold, markup.boldbold

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...