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.activeBackground#191B23
  • activityBar.background#1C1E26
  • activityBar.border#1C1E26
  • activityBar.foreground#D2D4DE
  • activityBar.inactiveForeground#717898
  • activityBarBadge.background#E95678
  • activityBarBadge.foreground#D2D4DE
  • badge.background#FAB795
  • badge.foreground#111317
  • button.background#E95678
  • button.foreground#D2D4DE
  • button.hoverBackground#E95678
  • button.secondaryBackground#1A1C23
  • button.secondaryForeground#D2D4DE
  • button.secondaryHoverBackground#4E546A
  • debugToolBar.background#191B23
  • diffEditor.border#4E546A
  • diffEditor.insertedTextBackground#25E4A820
  • diffEditor.removedTextBackground#D91C4820
  • dropdown.background#3D4152
  • editor.background#1C1E26
  • editor.findMatchBackground#ffffff26
  • editor.findMatchHighlightBackground#6BDFE626
  • editor.findRangeHighlightBackground#ffffff18
  • editor.foldBackground#ffffff0A
  • editor.foreground#D2D4DE
  • editor.hoverHighlightBackground#6BDFE618
  • editor.inactiveSelectionBackground#ffffff20
  • editor.lineHighlightBackground#FFFFFF05
  • editor.selectionBackground#ffffff10
  • editor.selectionHighlightBackground#ffffff30
  • editor.wordHighlightBackground#57575760
  • editor.wordHighlightStrongBackground#6BDFE626
  • editorBracketHighlight.foreground1#FFC819
  • editorBracketHighlight.foreground2#E95678
  • editorBracketHighlight.foreground3#F09483
  • editorBracketHighlight.foreground4#25E4A8
  • editorBracketHighlight.foreground5#B877DB
  • editorBracketHighlight.foreground6#6BDFE6
  • editorBracketMatch.background#ffffff10
  • editorBracketMatch.border#ffffff24
  • editorCodeLens.foreground#B9BCCB
  • editorCursor.background#1C1E26
  • editorCursor.foreground#B9BCCB
  • editorError.foreground#D91C48
  • editorGroup.border#4E546A
  • editorGroupHeader.tabsBackground#111317
  • editorGutter.addedBackground#25E4A8
  • editorGutter.background#1C1E26
  • editorGutter.deletedBackground#D91C48
  • editorGutter.foldingControlForeground#B9BCCB
  • editorGutter.modifiedBackground#FAB795
  • editorHoverWidget.background#191B23
  • editorHoverWidget.border#4E546A
  • editorHoverWidget.foreground#D2D4DE
  • editorIndentGuide.activeBackground1#A1A5BA
  • editorIndentGuide.background1#4E546A
  • editorInfo.foreground#25B0BC
  • editorLineNumber.activeForeground#B9BCCB
  • editorLineNumber.foreground#575D75
  • editorLink.activeForeground#25B0BC
  • editorOverviewRuler.border#0000
  • editorRuler.foreground#404040
  • editorSuggestWidget.background#191B23
  • editorSuggestWidget.border#4E546A
  • editorSuggestWidget.foreground#D2D4DE
  • editorSuggestWidget.highlightForeground#25B0BC
  • editorSuggestWidget.selectedBackground#ffffff12
  • editorWarning.foreground#FFC60A
  • editorWhitespace.foreground#565656
  • editorWidget.background#1A1C23
  • editorWidget.foreground#B9BCCB
  • editorWidget.resizeBorder#191B23
  • focusBorder#fafafa15
  • foreground#B9BCCB
  • gitDecoration.addedResourceForeground#25E4A8
  • gitDecoration.conflictingResourceForeground#F09483
  • gitDecoration.deletedResourceForeground#E95678
  • gitDecoration.ignoredResourceForeground#57584f
  • gitDecoration.modifiedResourceForeground#FAB795
  • gitDecoration.stageDeletedResourceForeground#E95678
  • gitDecoration.stageModifiedResourceForeground#FAB795
  • gitDecoration.submoduleResourceForeground#1fd3fd
  • gitDecoration.untrackedResourceForeground#F09483
  • input.background#3D4152
  • input.foreground#B9BCCB
  • inputOption.activeBackground#ffffff1f
  • list.activeSelectionBackground#FFFFFF0C
  • list.activeSelectionForeground#D2D4DE
  • list.dropBackground#FFFFFF08
  • list.errorForeground#D91C48
  • list.focusBackground#FFFFFF08
  • list.focusForeground#D2D4DE
  • list.highlightForeground#FAB795
  • list.hoverBackground#FFFFFF0C
  • list.hoverForeground#D2D4DE
  • list.inactiveSelectionBackground#FFFFFF08
  • list.inactiveSelectionForeground#D2D4DE
  • list.warningForeground#FFC60A
  • listFilterWidget.background#181915
  • listFilterWidget.noMatchesOutline#D91C48
  • menu.background#1C1E26
  • menu.foreground#B9BCCB
  • menu.selectionBackground#FFFFFF05
  • menu.selectionForeground#D2D4DE
  • menu.separatorBackground#4E546A
  • menubar.selectionBackground#FFFFFF08
  • menubar.selectionForeground#D2D4DE
  • merge.commonContentBackground#1C1E26
  • merge.commonHeaderBackground#191B23
  • merge.currentContentBackground#048B59
  • merge.currentHeaderBackground#06C680
  • merge.incomingContentBackground#114F55
  • merge.incomingHeaderBackground#1B7F88
  • notebook.cellBorderColor#1A1C23
  • notebook.cellEditorBackground#1C1E26
  • notebook.cellHoverBackground#1A1C23
  • notebook.cellInsertionIndicator#B9BCCB
  • notebook.cellStatusBarItemHoverBackground#ffffff20
  • notebook.cellToolbarSeparator#191B23
  • notebook.focusedCellBackground#1A1C23
  • notebook.focusedCellBorder#25B0BC
  • notebook.focusedEditorBorder#191B23
  • notebook.inactiveFocusedCellBorder#ffffff20
  • notebook.outputContainerBackgroundColor#1A1C23
  • notebook.selectedCellBackground#ffffff20
  • notebook.selectedCellBorder#ffffff20
  • notebook.symbolHighlightBackground#ffffff0b
  • notebookScrollbarSlider.activeBackground#ffffff45
  • notebookScrollbarSlider.background#ffffff12
  • notebookScrollbarSlider.hoverBackground#ffffff45
  • notebookStatusErrorIcon.foreground#D91C48
  • notebookStatusRunningIcon.foreground#4E546A
  • notebookStatusSuccessIcon.foreground#25E4A8
  • notificationCenterHeader.background#1A1C23
  • notificationCenterHeader.foreground#B9BCCB
  • notifications.background#1A1C23
  • notifications.border#1A1C23
  • notifications.foreground#B9BCCB
  • notificationsErrorIcon.foreground#D91C48
  • notificationsInfoIcon.foreground#25B0BC
  • notificationsWarningIcon.foreground#FFC819
  • panel.background#1C1E26
  • panel.border#3D4152
  • panelTitle.activeBorder#FAB795
  • panelTitle.activeForeground#FAB795
  • panelTitle.inactiveForeground#717898
  • peekView.border#4E546A
  • peekViewEditor.background#191B23
  • peekViewEditor.matchHighlightBackground#191B23
  • peekViewEditorGutter.background#191B23
  • peekViewResult.background#191B23
  • peekViewResult.fileForeground#D2D4DE
  • peekViewResult.lineForeground#B9BCCB
  • peekViewResult.matchHighlightBackground#6BDFE62c
  • peekViewResult.selectionBackground#6BDFE640
  • peekViewResult.selectionForeground#D2D4DE
  • peekViewTitle.background#191B23
  • peekViewTitleDescription.foreground#B9BCCB
  • peekViewTitleLabel.foreground#D2D4DE
  • pickerGroup.border#191B23
  • pickerGroup.foreground#25B0BC
  • progressBar.background#E95678
  • scrollbar.shadow#1919197c
  • scrollbarSlider.activeBackground#ffffff45
  • scrollbarSlider.background#ffffff12
  • scrollbarSlider.hoverBackground#ffffff45
  • selection.background#fafafa15
  • sideBar.background#191B23
  • sideBar.border#1C1E26
  • sideBar.foreground#717898
  • sideBarSectionHeader.background#2B2E3B
  • sideBarSectionHeader.foreground#D2D4DE
  • sideBarTitle.foreground#B9BCCB
  • statusBar.background#1C1E26
  • statusBar.border#1C1E26
  • statusBar.debuggingBackground#07C57F
  • statusBar.debuggingBorder#111317
  • statusBar.debuggingForeground#D2D4DE
  • statusBar.foreground#B9BCCB
  • statusBar.noFolderBackground#F09483
  • statusBar.noFolderBorder#111317
  • statusBar.noFolderForeground#D2D4DE
  • statusBarItem.hoverBackground#FFFFFF0F
  • statusBarItem.remoteBackground#E95678
  • statusBarItem.remoteForeground#D2D4DE
  • tab.activeBackground#1C1E26
  • tab.activeBorderTop#E95678
  • tab.activeForeground#D2D4DE
  • tab.border#00000000
  • tab.hoverForeground#D2D4DE
  • tab.inactiveBackground#111317
  • tab.inactiveForeground#959AB1
  • terminal.ansiBlack#1C1E26
  • terminal.ansiBlue#25B0BC
  • terminal.ansiBrightBlack#343846
  • terminal.ansiBrightBlue#3AA6BB
  • terminal.ansiBrightCyan#6BDFE6
  • terminal.ansiBrightGreen#25E4A8
  • terminal.ansiBrightMagenta#FF99A8
  • terminal.ansiBrightRed#D91C48
  • terminal.ansiBrightWhite#D2D4DE
  • terminal.ansiBrightYellow#FFC819
  • terminal.ansiCyan#3FD6DE
  • terminal.ansiGreen#06C680
  • terminal.ansiMagenta#FFC2CB
  • terminal.ansiRed#E53861
  • terminal.ansiWhite#D2D4DE
  • terminal.ansiYellow#FFC60A
  • terminal.border#FFFFFF0F
  • terminal.selectionBackground#ffffff21
  • terminalCursor.foreground#D2D4DE
  • textLink.activeForeground#44CDDA
  • textLink.foreground#25B0BC
  • titleBar.activeBackground#1C1E26
  • titleBar.activeForeground#B9BCCB
  • titleBar.inactiveBackground#1C1E26
  • titleBar.inactiveForeground#B9BCCB
  • tree.indentGuidesStroke#4E546A
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#959AB1italic
source.python, meta.function-call.arguments, source.js, variable.other.object.js, meta.template.expression.js, source.java, variable.other.object.java, meta.method.body.java, source.cpp, meta.body.function.definition.cpp#D2D4DE—
constant.other.color#B877DB—
invalid, invalid.illegal#D91C48—
keyword, storage.modifier, storage.modifier.java, meta.tag, keyword.operator, keyword.other.unit, keyword.other.new.php#E95678
keyword.control, keyword.other.template, keyword.other.substitution, keyword.other.import.java, keyword.other.package.java, variable.language.this#E95678italic
punctuation.definition, punctuation.accessor, punctuation.separator, punctuation.seperator, punctuation.section, punctuation.parenthesis, punctuation.terminator, punctuation.semi, punctuation.comma, punctuation.other, punctuation.bracket, punctuation.brackets, punctuation.curly, meta.brace.round, meta.brace.square#959AB1
punctuation.section.embedded#F09483—
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#D2D4DE—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#E95678—
meta.function.python, meta.definition.function, meta.function.definition, meta.method.declaration.js, meta.method.java, entity.name.namespace.cpp, entity.name.namespace.rust, meta.function.php, entity.name.function.go, entity.name.function.kotlin#25E4A8—
storage.type.function.arrow, storage.type.function.lambda.python, punctuation.definition.arrow.php#E95678—
storage.type.function.arrow—
meta.function-call, variable.function, support.function.go, meta.function.call.rust, meta.block.kotlin#6BDFE6
storage.type#E95678
storage.type.class#E95678italic
support.other.variable, string.other.link#25E4A8—
support.constant, constant.character, constant.language, variable.other.constant, constant.escape, constant.numeric, variable.other.global.php, constant.other#B877DB—
support.function.builtin, support.function.construct.output.php, support.function.construct.php, entity.name.function.macro.rust, support.function.kotlin#25E4A8—
meta.block variable.other#D2D4DE—
variable.parameter, meta.function.parameters.php#F89563italic
string, constant.other.symbol, constant.other.key, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#FAB795—
support.class, entity.name.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#6BDFE6—
entity.other.inherited-class#6BDFE6—
support.type#6BDFE6—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#D2D4DE—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#E95678—
variable.language#E95678italic
entity.name.method.js#6BDFE6italic
meta.class-method.js entity.name.function.js, variable.function.constructor#6BDFE6—
entity.other.attribute-name#6BDFE6—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FAB795italic
entity.other.attribute-name.class#25E4A8
entity.other.attribute-name.pseudo-element.css, variable.css#E95678—
entity.other.attribute-name.pseudo-class.css#F09483—
entity.other.attribute-name.id.css, entity.name.function.namespace-prefix.css, entity.other.namespace-prefix.css, support.function.misc.css, support.constant.media.css, support.function.calc.css, support.function.transform.css, support.function.gradient.css, support.function.url.css, support.function.shape.css#6BDFE6—
entity.other.keyframe-offset.css#25E4A8—
entity.other.keyframe-offset.percentage.css#B877DB—
variable.argument.css#B877DB—
source.sass keyword.control#6BDFE6—
markup.inserted#25E4A8—
markup.deleted#FF5370—
markup.changed#B877DB—
string.regexp#FAB795—
constant.character.escape#B877DB—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6BDFE6italic
source.js constant.other.object.key.js string.unquoted.label.js#E95678italic
variable.other.object.property.js, variable.other.constant.property.js#25E4A8—
source.json meta.structure.dictionary.json support.type.property-name.json#D2D4DE—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6BDFE6—
source.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#25E4A8—
source.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#F09483—
source.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#E95678—
source.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#B877DB—
source.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#D2D4DE—
text.html.markdown, punctuation.definition.list_item.markdown#D2D4DE—
text.html.markdown markup.inline.raw.markdown#B877DB—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6BDFE6—
heading.1.markdown#FAB795bold
heading.2.markdown#E95678bold
heading.3.markdown#F09483bold
heading.4.markdown#25E4A8bold
heading.5.markdown#B877DBbold
heading.6.markdown#6BDFE6bold
markup.italic#6BDFE6italic
markup.bold, markup.bold string#E95678bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#E95678bold
markup.underline—underline
markup.strikethrough.markdown#B877DB—
markup.quote punctuation.definition.blockquote.markdown#6BDFE6—
markup.quote—italic
punctuation.definition.list.begin.markdown#E95678—
string.other.link.title.markdown#6BDFE6—
markup.underline.link#FAB795italic
string.other.link.description.title.markdown#B877DB—
constant.other.reference.link.markdown#FAB795—
markup.raw.block#B877DB—
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#D2D4DE—
variable.language.fenced.markdown#CCC8B4—
meta.separator#CCC8B4bold
markup.table#D2D4DE—
meta.function.decorator#959AB1italic
storage.type.function.python—italic
meta.function.parameters.python#959AB1—
string.quoted.docstring.multi.python#959AB1—
support.variable.magic.python, support.function.magic.python#B877DB—
variable.parameter.function.language.special.self.python, variable.language.special.self.python#B9BCCB—
storage.type.string.python, constant.character.format.placeholder.other.python, punctuation.definition.template-expression#E95678—
storage.type.format.python#AE81FF—
storage.modifier.import, storage.modifier.package, storage.type.java#D2D4DE—
meta.method-call.java, meta.function-call.java#25E4A8—
punctuation.bracket.angle#E95678—
source.rust, variable.other.rust#D2D4DE
entity.name.type.annotation.kotlin#B9BCCB—
keyword.operator.assignment.rust#E95678—
punctuation.definition.annotation.java, storage.type.annotation.java#B9BCCB—
storage.type.primitive.java, storage.type.built-in.primitive.c#E95678—
storage.type.kotlin#E95678—
entity.other.jinja.delimiter.tag, entity.other.jinja.delimiter.variable#F09483—