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.underlineunderline
markup.strikethrough.markdown#B877DB
markup.quote punctuation.definition.blockquote.markdown#6BDFE6
markup.quoteitalic
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.pythonitalic
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