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.underline—underline
markup.strikethrough.markdown#AE81FF—
markup.quote punctuation.definition.blockquote.markdown#66D9EF—
markup.quote—italic
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.python—italic
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—
Soda Monokai by Alejandro-44 - VS Code Theme