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.activeBorder#00FF9C
  • activityBar.background#000000
  • activityBar.foreground#c9c9c9
  • activityBarBadge.background#00FF9C
  • activityBarBadge.foreground#000000
  • badge.background#2E2E2E
  • breadcrumb.activeSelectionForeground#00FF9c
  • breadcrumb.background#000000
  • breadcrumb.foreground#c9c9c9
  • breadcrumbPicker.background#000000
  • button.background#000000
  • checkbox.background#000000
  • debugToolBar.background#000000
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#000000
  • dropdown.border#5DFF33
  • dropdown.foreground#c9c9c9
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#c9c9c9
  • editor.findMatchHighlightBackground#000000
  • editor.findMatchHighlightBorder#00FF9C
  • editor.lineHighlightBackground#000000
  • editor.selectionBackground#484e5b
  • editor.selectionHighlightBackground#484e5b
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightBorder#00FF9c
  • editor.wordHighlightStrongBackground#AAB1C026
  • editor.wordHighlightStrongBorder#00FF9c
  • editorBracketMatch.background#5D19CB
  • editorBracketMatch.border#5DFF33
  • editorCursor.foreground#00FF9C
  • editorError.foreground#ff1865
  • editorGroup.background#000000
  • editorGroup.border#5DFF33
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#5DFF33
  • editorHoverWidget.background#232324
  • editorHoverWidget.border#00FF9C
  • editorIndentGuide.background#3B4048
  • editorLineNumber.foreground#00ff9c
  • editorMarkerNavigation.background#000000
  • editorRuler.foreground#AAB1C026
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#00FF9C
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#009550
  • editorWhitespace.foreground#3B4048
  • editorWidget.background#000000
  • editorWidget.border#00FF9c
  • editorWidget.foreground#c9c9c9
  • foreground#c9c9c9
  • input.background#000000
  • input.border#c9c9c9
  • input.foreground#c9c9c9
  • inputOption.activeborder#00FF9C
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#00FF9C
  • list.focusBackground#2c313a
  • list.focusForeground#00FF9C
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#000000
  • list.hoverForeground#00FF9C
  • list.inactiveSelectionBackground#000000
  • list.inactiveSelectionForeground#d7dae0
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#c24038
  • listFilterWidget.outline#4D78CC
  • menu.border#5DFF33
  • menu.separatorBackground#000000
  • notebook.cellBorderColor#c9c9c9
  • notebook.cellInsertionIndicator#ffffff
  • notebook.focusedCellBorder#00FF9C
  • notebook.focusedEditorBorder#00FF9C
  • notifications.background#000000
  • panel.border#5DFF33
  • panelTitle.activeBorder#00ff9c
  • panelTitle.activeForeground#00FF9C
  • panelTitle.inactiveForeground#c9c9c9
  • peekViewEditor.matchHighlightBackground#29244b
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#000000
  • sideBar.border#5DFF33
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#00FF9C
  • sideBarTitle.foreground#5DFF33
  • statusBar.background#000000
  • statusBar.debuggingBackground#000000
  • statusBar.foreground#00ff9c
  • statusBar.noFolderBackground#000000
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#000000
  • tab.activeBorder#5DFF33
  • tab.activeForeground#00FF9C
  • tab.border#5DFF33
  • tab.inactiveBackground#000000
  • tab.inactiveBakground#000000
  • tab.inactiveForeground#c9c9c9
  • terminal.ansiBlack#2D3139
  • terminal.ansiBlue#2e8ccf
  • terminal.ansiGreen#00FF9C
  • terminal.ansiRed#ff1865
  • terminal.ansiYellow#B4881D
  • terminal.foreground#C8C8C8
  • terminalCursor.foreground#00FF9C
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#c9c9c9
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#c9c9c9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type.python#2BBAC5
*url*, *link*, *uri*underline
storage.type#D55FDEitalic
constant.other.character-class.regexp#e06c75ff
keyword.operator.quantifier.regexp#d19a66ff
punctuation.definition.string.begin,punctuation.definition.string.end#98c378
variable.parameter.function#A6B2C0
comment, punctuation.definition.comment#5DFF33italic
punctuation.terminator.statement#00FF9C
comment markup.link#6a8d94
markup.changed.diff#e0c285
meta.diff.header.from-file,punctuation.definition.from-file.diff#569cd6
markup.inserted.diff#89CA78
markup.deleted.diff#EF596F
meta.function.c#EF596F
keyword.control.cpp#D55FDE
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#AAB1C0
punctuation.separator.key-value#FFFFFF
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.superitalic
keyword.operator.expression.import#52ADF2
support.constant.math#e5c07b
support.constant.property.math#d19a66
variable.other.constant#e5c07b
storage.type.annotation.java#e5c07bff
source.java#EF596F
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,storage.type.generic.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,meta.method.body.java#AAB1C0
meta.method.java#52ADF2
storage.modifier.import.java,storage.type.java#D55FDE
meta.definition.variable.name.java#EF596F
keyword.operator.logical#0afd01
keyword.operator.bitwise#2BBAC5
support.constant.property-value.scss,support.constant.property-value.css#00FF9c
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#D8985F
punctuation.separator.list.comma.css#b9c0ca
support.constant.color.w3c-standard-color-name.css#D8985F
support.type.vendored.property-name.css#2BBAC5
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#EF596F
support.module.node,support.type.object.module#e5c07b
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#EF596F
comment.line.double-slash,comment.block.documentation#5DFF33normal
support.constant.json#D8985F
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary#D55FDE
support.type.object.console#EF596F
support.variable.property.process#D8985F
entity.name.function,support.function.console#A6E22E
keyword.operator#2BBAC5
support.type.object.dom#2BBAC5
support.variable.dom,support.variable.property.dom#EF596F
keyword.operator.arithmetic,keyword.operator.comparison#2BBAC5
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c#D55FDEff
punctuation.separator.delimiter.c#FFFFFF
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#C178DD
variable.parameter.function.language.python#ffd726
keyword.operator.logical.python#0afd01
meta.function-call.arguments.python#00FF9C
meta.function-call.python#E06C60
variable.parameter.function.python#ffd726
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,meta.function-call.arguments.python#00FF9C
meta.function-call.generic.python#52ADF2
constant.character.format.placeholder.other.python#98c379
none#A6B2C0
keyword.operator#AAB1C0
keyword#66D9EF
variable#EF596F
token.variable.parameter.java#ffd726
import.storage.java#e5c07b
token.package.keyword#D55FDE
token.package#AAB1C0
entity.name.function, meta.require, support.function.any-method#00FF9C
entity.name.type.namespace#e5c07b
support.class, entity.name.type.class#00FF9C
entity.name.class.identifier.namespace.type#e5c07b
entity.name.class#00FF9C
entity.name.type#00FF9C
keyword.control#D55FDE
control.elements, keyword.operator.less#D8985F
keyword.other.special-method#52ADF2
storage#D55FDE
token.storage#D55FDE
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#D55FDE
token.storage.type.java#D55FDE
support.function#52ADF2
support.type.property-name#AAB1C0
support.constant.property-value#AAB1C0
support.constant.font-name#D8985F
meta.tag#AAB1C0
string, entity.other.inherited-class#ca78a5
constant.other.symbol#2BBAC5
constant.numeric#D8985F
none#D8985F
none#D8985F
constant#D8985F
punctuation.definition.constant#D8985F
entity.name.tag#D55FDE
entity.other.attribute-name#00FF9c
entity.other.attribute-name.id#52ADF2normal
entity.other.attribute-name.class.css#D8985Fnormal
meta.selector#D55FDE
none#D2945D
markup.heading#EF596Fbold
markup.heading punctuation.definition.heading, entity.name.section#52ADF2
keyword.other.unit#D8985F
markup.bold,todo.bold#D8985Fbold
punctuation.definition.bold#e5c07b
markup.italic,punctuation.definition.italic,todo.emphasis#D55FDE
emphasis md#D55FDE
entity.name.section.markdown#EF596F
punctuation.definition.heading.markdown#EF596F
markup.heading.setext#AAB1C0
punctuation.definition.bold.markdown#D8985F
markup.inline.raw.markdown#89CA78
markup.inline.raw.string.markdown#98c379
beginning.punctuation.definition.list.markdown#EF596F
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#AAB1C0
punctuation.definition.metadata.markdown#D55FDE
markup.underline.link.markdown,markup.underline.link.image.markdown#D55FDE
string.other.link.title.markdown,string.other.link.description.markdown#52ADF2
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#57B6C2
constant.character.escape#57B6C2
punctuation.section.embedded, variable.interpolation#BE4F44
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#EF596F
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#EF596F
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#89CA78
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#2BBAC5
support.type.property-name.json#EF596F
support.type.property-name.json punctuation#EF596F
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#C679DD
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#C679DD
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php#e5c07b
keyword.operator.error-control.php#D55FDE
keyword.operator.type.php#D55FDE
punctuation.section.array.begin.php#AAB1C0
punctuation.section.array.end.php#AAB1C0
invalid.illegal.non-null-typehinted.php#ff0000
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#D55FDE
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#52ADF2
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php#FFFFFF
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#D8985F
entity.name.goto-label.php,support.other.php#52ADF2
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#0afd01
keyword.operator.regexp.php#D55FDE
keyword.operator.comparison.php#2BBAC5
punctuation.definition.variable.php#EF596F
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#D55FDE
meta.function.decorator.python#52ADF2
support.token.decorator.python,meta.function.decorator.identifier.python#2BBAC5
function.parameter#D8985F
function.parameter#AAB1C0
function.brace#AAB1C0
function.parameter.ruby, function.parameter.cs#AAB1C0
rgb-value#2BBAC5
inline-color-decoration rgb-value#D8985F
less rgb-value#D8985F
selector.sass#EF596F
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#e5c07bitalic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#e5c07b
block.scope.end,block.scope.begin#AAB1C0
entity.name.variable.local.cs#EF596F
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
storage.type.cs#e5c07b