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#21221C
  • activityBar.background#272822
  • activityBar.border#272822
  • activityBar.foreground#F8F8F2
  • activityBar.inactiveForeground#959886
  • activityBarBadge.background#15ADCB
  • activityBarBadge.foreground#F8F8F2
  • badge.background#E6DB74
  • badge.foreground#21221C
  • button.background#15ADCB
  • button.foreground#F8F8F2
  • button.hoverBackground#34CBEA
  • button.secondaryBackground#404238
  • button.secondaryForeground#F8F8F2
  • button.secondaryHoverBackground#56584B
  • debugToolBar.background#404238
  • diffEditor.border#4B4D42
  • diffEditor.insertedTextBackground#a6e22e20
  • diffEditor.removedTextBackground#FA003F20
  • dropdown.background#4B4D42
  • editor.background#272822
  • editor.findMatchBackground#ffffff26
  • editor.findMatchHighlightBackground#66d9ef26
  • editor.findRangeHighlightBackground#ffffff18
  • editor.foldBackground#ffffff0A
  • editor.foreground#F8F8F2
  • editor.hoverHighlightBackground#66d9ef18
  • editor.inactiveSelectionBackground#ffffff20
  • editor.lineHighlightBackground#ffffff0A
  • editor.selectionBackground#ffffff10
  • editor.selectionHighlightBackground#ffffff30
  • editor.wordHighlightBackground#FFFFFF10
  • editor.wordHighlightStrongBackground#66d9ef26
  • editorBracketHighlight.foreground1#F5CC00
  • editorBracketHighlight.foreground2#F92672
  • editorBracketHighlight.foreground3#FD971F
  • editorBracketHighlight.foreground4#AE81FF
  • editorBracketHighlight.foreground5#A6E22E
  • editorBracketHighlight.foreground6#66D9EF
  • editorBracketMatch.background#ffffff10
  • editorBracketMatch.border#ffffff24
  • editorCodeLens.foreground#BBBDB2
  • editorCursor.background#272822
  • editorCursor.foreground#BBBDB2
  • editorError.foreground#FA003F
  • editorGroup.border#4B4D42
  • editorGroupHeader.tabsBackground#171612
  • editorGutter.addedBackground#A6E22E
  • editorGutter.background#272822
  • editorGutter.deletedBackground#FA003F
  • editorGutter.foldingControlForeground#BBBDB2
  • editorGutter.modifiedBackground#E6DB74
  • editorHoverWidget.background#21221C
  • editorHoverWidget.border#444236
  • editorHoverWidget.foreground#F8F8F2
  • editorIndentGuide.activeBackground1#BBBDB2
  • editorIndentGuide.background1#4B4D42
  • editorInfo.foreground#66d9ef
  • editorLineNumber.activeForeground#CFD0C8
  • editorLineNumber.foreground#88846F
  • editorLink.activeForeground#15ADCB
  • editorOverviewRuler.border#0000
  • editorRuler.foreground#4B4D42
  • editorSuggestWidget.background#21221C
  • editorSuggestWidget.border#4B4D42
  • editorSuggestWidget.foreground#F8F8F2
  • editorSuggestWidget.highlightForeground#15ADCB
  • editorSuggestWidget.selectedBackground#ffffff12
  • editorWarning.foreground#FD971F
  • editorWhitespace.foreground#88846F
  • editorWidget.background#21221C
  • editorWidget.foreground#BBBDB2
  • editorWidget.resizeBorder#3f3f46
  • focusBorder#FFFFFF15
  • foreground#BBBDB2
  • gitDecoration.addedResourceForeground#a6e22e
  • gitDecoration.conflictingResourceForeground#fd971f
  • gitDecoration.deletedResourceForeground#f92672
  • gitDecoration.ignoredResourceForeground#57584f
  • gitDecoration.modifiedResourceForeground#e6db74
  • gitDecoration.stageDeletedResourceForeground#f92672
  • gitDecoration.stageModifiedResourceForeground#e6db74
  • gitDecoration.submoduleResourceForeground#1fd3fd
  • gitDecoration.untrackedResourceForeground#fd971f
  • input.background#4B4D42
  • input.foreground#BBBDB2
  • inputOption.activeBackground#ffffff1f
  • list.activeSelectionBackground#FFFFFF15
  • list.activeSelectionForeground#F8F8F2
  • list.dropBackground#FFFFFF08
  • list.errorForeground#FA003F
  • list.focusBackground#FFFFFF08
  • list.focusForeground#F8F8F2
  • list.highlightForeground#E6DB74
  • list.hoverBackground#FFFFFF0F
  • list.hoverForeground#F8F8F2
  • list.inactiveSelectionBackground#FFFFFF0A
  • list.inactiveSelectionForeground#F8F8F2
  • list.warningForeground#FD971F
  • listFilterWidget.background#181915
  • listFilterWidget.noMatchesOutline#FA003F
  • menu.background#272822
  • menu.foreground#BBBDB2
  • menu.selectionBackground#FFFFFF0F
  • menu.selectionForeground#F8F8F2
  • menu.separatorBackground#404238
  • menubar.selectionBackground#F8F8F218
  • menubar.selectionForeground#BBBDB2
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#21221C
  • merge.currentContentBackground#405a0c
  • merge.currentHeaderBackground#669014
  • merge.incomingContentBackground#083f49
  • merge.incomingHeaderBackground#0e6e81
  • notebook.cellBorderColor#21221C
  • notebook.cellEditorBackground#272822
  • notebook.cellHoverBackground#1F211C
  • notebook.cellInsertionIndicator#BBBDB2
  • notebook.cellStatusBarItemHoverBackground#ffffff20
  • notebook.cellToolbarSeparator#36372f
  • notebook.focusedCellBackground#21221C
  • notebook.focusedCellBorder#15ADCB
  • notebook.focusedEditorBorder#36372f
  • notebook.inactiveFocusedCellBorder#ffffff20
  • notebook.outputContainerBackgroundColor#21221C
  • notebook.selectedCellBackground#ffffff20
  • notebook.selectedCellBorder#ffffff20
  • notebook.symbolHighlightBackground#ffffff0b
  • notebookScrollbarSlider.activeBackground#ffffff45
  • notebookScrollbarSlider.background#ffffff12
  • notebookScrollbarSlider.hoverBackground#ffffff45
  • notebookStatusErrorIcon.foreground#FA003F
  • notebookStatusRunningIcon.foreground#BBBDB2
  • notebookStatusSuccessIcon.foreground#A6E22E
  • notificationCenterHeader.background#36372f
  • notificationCenterHeader.foreground#BBBDB2
  • notifications.background#21221C
  • notifications.border#36372f
  • notifications.foreground#BBBDB2
  • notificationsErrorIcon.foreground#FA003F
  • notificationsInfoIcon.foreground#52adff
  • notificationsWarningIcon.foreground#F9E426
  • panel.background#272822
  • panel.border#404238
  • panelTitle.activeBorder#E6DB74
  • panelTitle.activeForeground#E6DB74
  • panelTitle.inactiveForeground#BBBDB2
  • peekView.border#444236
  • peekViewEditor.background#21221C
  • peekViewEditor.matchHighlightBackground#fd971f4e
  • peekViewEditorGutter.background#21221C
  • peekViewResult.background#21221C
  • peekViewResult.fileForeground#F8F8F2
  • peekViewResult.lineForeground#BBBDB2
  • peekViewResult.matchHighlightBackground#21221C
  • peekViewResult.selectionBackground#21221C
  • peekViewResult.selectionForeground#F8F8F2
  • peekViewTitle.background#21221C
  • peekViewTitleDescription.foreground#BBBDB2
  • peekViewTitleLabel.foreground#F8F8F2
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#15ADCB
  • progressBar.background#15ADCB
  • scrollbar.shadow#1919197C
  • scrollbarSlider.activeBackground#ffffff45
  • scrollbarSlider.background#ffffff12
  • scrollbarSlider.hoverBackground#ffffff45
  • selection.background#fafafa15
  • sideBar.background#21221C
  • sideBar.border#272822
  • sideBar.foreground#959886
  • sideBarSectionHeader.background#33332d
  • sideBarSectionHeader.foreground#F8F8F2
  • sideBarTitle.foreground#BBBDB2
  • statusBar.background#272822
  • statusBar.border#272822
  • statusBar.debuggingBackground#588203
  • statusBar.debuggingBorder#272822
  • statusBar.debuggingForeground#F8F8F2
  • statusBar.foreground#BBBDB2
  • statusBar.noFolderBackground#FF2672
  • statusBar.noFolderBorder#272822
  • statusBar.noFolderForeground#F8F8F2
  • statusBarItem.hoverBackground#FFFFFF0F
  • statusBarItem.remoteBackground#15ADCB
  • statusBarItem.remoteForeground#F8F8F2
  • tab.activeBackground#272822
  • tab.activeBorderTop#15ADCB
  • tab.activeForeground#F8F8F2
  • tab.border#00000000
  • tab.hoverForeground#F8F8F2
  • tab.inactiveBackground#171612
  • tab.inactiveForeground#BBBDB2
  • terminal.ansiBlack#272822
  • terminal.ansiBlue#2C8091
  • terminal.ansiBrightBlack#404238
  • terminal.ansiBrightBlue#3AA6BB
  • terminal.ansiBrightCyan#66D9EF
  • terminal.ansiBrightGreen#A6E22E
  • terminal.ansiBrightMagenta#FD5FF0
  • terminal.ansiBrightRed#f92626
  • terminal.ansiBrightWhite#F8F8F2
  • terminal.ansiBrightYellow#e6db74
  • terminal.ansiCyan#46D0EC
  • terminal.ansiGreen#86C705
  • terminal.ansiMagenta#FF2672
  • terminal.ansiRed#F92649
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#FD971F
  • terminal.border#80808059
  • terminal.selectionBackground#ffffff21
  • terminalCursor.foreground#F8F8F2
  • textLink.activeForeground#34CBEA
  • textLink.foreground#15ADCB
  • titleBar.activeBackground#272822
  • titleBar.activeForeground#BBBDB2
  • titleBar.inactiveBackground#272822
  • titleBar.inactiveForeground#BBBDB2
  • tree.indentGuidesStroke#BBBDB2
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#88846Fitalic
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#F8F8F2
constant.other.color#AE81FF
invalid, invalid.illegal#FA003F
keyword, storage.modifier, storage.modifier.java, meta.tag, keyword.operator, keyword.other.unit, keyword.other.new.php#F92672
keyword.control, keyword.other.template, keyword.other.substitution, keyword.other.import.java, keyword.other.package.java, variable.language.this#F92672italic
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#A4A08E
punctuation.section.embedded#FD971F
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#F8F8F2
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#F92672
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#A6E22E
storage.type.function.arrow, storage.type.function.lambda.python, punctuation.definition.arrow.php#F92672
storage.type.function.arrow
meta.function-call, variable.function, support.function.go, meta.function.call.rust, meta.block.kotlin#66D9EF
storage.type#66D9EF
storage.type.class#F92672italic
support.other.variable, string.other.link#A6E22E
support.constant, constant.character, constant.language, variable.other.constant, constant.escape, constant.numeric, variable.other.global.php, constant.other#AE81FF
support.function.builtin, support.function.construct.output.php, support.function.construct.php, entity.name.function.macro.rust, support.function.kotlin#A6E22E
meta.block variable.other#F8F8F2
variable.parameter, meta.function.parameters.php#FD971Fitalic
string, constant.other.symbol, constant.other.key, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#E6DB74
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#66D9EF
entity.other.inherited-class#66D9EF
support.type#66D9EF
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#F8F8F2
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#F92672
variable.language#F92672italic
entity.name.method.js#66D9EFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#66D9EF
entity.other.attribute-name#66D9EF
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#E6DB74italic
entity.other.attribute-name.class#A6E22E
entity.other.attribute-name.pseudo-element.css, variable.css#F92672
entity.other.attribute-name.pseudo-class.css#FD971F
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#66D9EF
entity.other.keyframe-offset.css#A6E22E
entity.other.keyframe-offset.percentage.css#AE81FF
variable.argument.css#AE81FF
source.sass keyword.control#66D9EF
markup.inserted#A6E22E
markup.deleted#FF5370
markup.changed#AE81FF
string.regexp#E6DB74
constant.character.escape#AE81FF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#66D9EFitalic
source.js constant.other.object.key.js string.unquoted.label.js#F92672italic
variable.other.object.property.js, variable.other.constant.property.js#A6E22E
source.json meta.structure.dictionary.json support.type.property-name.json#F8F8F2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#66D9EF
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#A6E22E
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#FD971F
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#F92672
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#AE81FF
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#F8F8F2
text.html.markdown, punctuation.definition.list_item.markdown#F8F8F2
text.html.markdown markup.inline.raw.markdown#AE81FF
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#66D9EF
heading.1.markdown#E6DB74bold
heading.2.markdown#F92672bold
heading.3.markdown#FD971Fbold
heading.4.markdown#A6E22Ebold
heading.5.markdown#AE81FFbold
heading.6.markdown#66D9EFbold
markup.italic#66D9EFitalic
markup.bold, markup.bold string#F92672bold
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#F92672bold
markup.underlineunderline
markup.strikethrough.markdown#AE81FF
markup.quote punctuation.definition.blockquote.markdown#66D9EF
markup.quoteitalic
punctuation.definition.list.begin.markdown#F92672
string.other.link.title.markdown#66D9EF
markup.underline.link#E6DB74italic
string.other.link.description.title.markdown#AE81FF
constant.other.reference.link.markdown#E6DB74
markup.raw.block#AE81FF
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#F8F8F2
variable.language.fenced.markdown#CCC8B4
meta.separator#CCC8B4bold
markup.table#F8F8F2
meta.function.decorator#A4A08Eitalic
string.quoted.docstring.multi.python#88846F
support.variable.magic.python, support.function.magic.python#AE81FF
variable.parameter.function.language.special.self.python, variable.language.special.self.python#D2D0C6
storage.type.function.pythonitalic
meta.function.parameters.python#A4A08E
storage.type.string.python, constant.character.format.placeholder.other.python, punctuation.definition.template-expression#F92672
storage.type.format.python#AE81FF
storage.modifier.import, storage.modifier.package, storage.type.java#F8F8F2
meta.method-call.java, meta.function-call.java#A6E22E
punctuation.bracket.angle, punctuation.brackets.angle.rust#F92672
source.rust, variable.other.rust#F8F8F2
entity.name.type.annotation.kotlin#BFBCB0
keyword.operator.assignment.rust#F92672
storage.type.primitive.java, storage.type.built-in.primitive.c#F92672
storage.type.kotlin#F92672
punctuation.definition.annotation.java, storage.type.annotation.java#BFBCB0
storage.type.function.js#F92672
entity.other.jinja.delimiter.tag, entity.other.jinja.delimiter.variable#FD971F