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.background#0b1718
  • activityBar.foreground#b1c7cc
  • activityBar.inactiveForeground#6149ff
  • activityBarBadge.background#ff105e
  • activityBarBadge.foreground#ffffff
  • badge.background#ff105e
  • badge.foreground#ffffff
  • button.background#6149ff
  • button.foreground#ffffff
  • button.hoverBackground#3621bd
  • dropdown.background#05090a
  • dropdown.border#05090a
  • dropdown.foreground#b1c7cc
  • editor.background#020b0c
  • editor.foreground#b1c7cc
  • editor.hoverHighlightBackground#43bdb222
  • editor.lineHighlightBackground#0d1a1b
  • editor.selectionBackground#43bdb255
  • editor.wordHighlightBackground#a6e22e22
  • editor.wordHighlightStrongBackground#bbd4be22
  • editorBracketMatch.background#43bdb244
  • editorBracketMatch.border#bbd4be
  • editorCursor.foreground#ff0000
  • editorGroupHeader.tabsBackground#0d1a1b
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#05090a
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.background#183134
  • editorIndentGuide.background1#183134
  • editorLineNumber.foreground#295156
  • editorLink.activeForeground#43bdb2
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#bbd4be55
  • editorOverviewRuler.infoForeground#9d37fc
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#183134
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.foreground#b1c7cc
  • editorSuggestWidget.highlightForeground#4dd67b
  • editorSuggestWidget.selectedBackground#091921
  • editorSuggestWidget.selectedForeground#e0fd4d
  • editorWhitespace.foreground#204145
  • editorWidget.background#183134
  • editorWidget.border#295156
  • extensionButton.prominentBackground#43bdb2
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#69cac1
  • focusBorder#43bdb2
  • foreground#b1c7cc
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#397279
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#a7da1e
  • input.background#000000
  • input.border#204145
  • input.foreground#b1c7cc
  • input.placeholderForeground#254b4f
  • inputOption.activeBorder#bbd4be
  • list.activeSelectionBackground#064f6e
  • list.activeSelectionForeground#e0fd4d
  • list.focusBackground#204145
  • list.focusHighlightForeground#e0fd4d
  • list.highlightForeground#ff105e
  • list.hoverBackground#0d1a1b
  • list.hoverForeground#6149ff
  • list.inactiveSelectionBackground#0b1718
  • list.inactiveSelectionForeground#00e8c6
  • panel.background#183134
  • panel.border#295156
  • panelTitle.activeBorder#43bdb2
  • panelTitle.inactiveForeground#41828a
  • peekView.border#43bdb2
  • peekViewEditor.background#010303
  • peekViewEditor.matchHighlightBackground#bbd4be55
  • peekViewEditorGutter.background#05090a
  • peekViewResult.background#102022
  • peekViewResult.fileForeground#a5bec4
  • peekViewResult.lineForeground#92b1b8
  • peekViewResult.matchHighlightBackground#bbd4be55
  • peekViewResult.selectionBackground#0b1718
  • peekViewResult.selectionForeground#b1c7cc
  • peekViewTitle.background#05090a
  • peekViewTitleDescription.foreground#a8c0c6
  • peekViewTitleLabel.foreground#b1c7cc
  • progressBar.background#a6e22e
  • quickInput.background#000000
  • quickInputList.focusBackground#091921
  • quickInputList.focusForeground#6149ff
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#43bdb2aa
  • scrollbarSlider.background#295156aa
  • scrollbarSlider.hoverBackground#4cdcd055
  • settings.checkboxBackground#0f111a
  • settings.checkboxForeground#4dd67b
  • settings.dropdownBackground#000000
  • settings.dropdownForeground#4dd67b
  • settings.dropdownListBorder#000000
  • settings.headerForeground#80cbc4
  • settings.modifiedItemIndicator#a6e22e
  • settings.numberInputBackground#000000
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#AE81FF
  • settings.textInputBackground#000000
  • settings.textInputBorder#000000
  • settings.textInputForeground#C5D671
  • sideBar.background#020b0c
  • sideBar.border#295156
  • sideBar.foreground#b1c7cc
  • sideBarSectionHeader.background#152a2d
  • sideBarSectionHeader.foreground#b1c7cc
  • statusBar.background#2f2381
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#bbd4be
  • tab.activeBackground#007aae8e
  • tab.inactiveBackground#0f1d1f
  • tab.inactiveForeground#49939c
  • terminal.ansiBlack#1d2021
  • terminal.ansiBlue#00a1f9
  • terminal.ansiBrightBlack#182ce4
  • terminal.ansiBrightBlue#0d6678
  • terminal.ansiBrightCyan#8ba59b
  • terminal.ansiBrightGreen#237e02
  • terminal.ansiBrightMagenta#8f4673
  • terminal.ansiBrightRed#ff105e
  • terminal.ansiBrightWhite#fdf4c1
  • terminal.ansiBrightYellow#d52fff
  • terminal.ansiCyan#459770
  • terminal.ansiGreen#43bdb2
  • terminal.ansiMagenta#8f4673
  • terminal.ansiRed#fb543f
  • terminal.ansiWhite#a89984
  • terminal.ansiYellow#fac03b
  • terminal.background#000000
  • terminal.foreground#b1c7cc
  • terminalCursor.foreground#34febb
  • titleBar.activeBackground#010303
  • widget.shadow#133d52

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
*#B1C7CC
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#6E9AF8
comment#6A9955
string#C5D671
constant.numeric#AE81FF
constant.language#AE81FFitalic bold
constant.character, constant.other#BBD4BE
variable#CF882C
storage#BBD4BE
storage.type#43BDB2
storage.type, storage.modifier#47CCB1
entity.other.inherited-class#BBD4BE
entity.name.function#A6E22E
variable.parameter#7A83FCitalic
entity.name.tag#43BDB2
entity.other.attribute-name#BBD4BE
support.function#A6E22E
support.constant#BBD4BE
punctuation.definition.string.template#CC66FF
support.type, support.class#6BA9B6italic
support.other.variable
invalid#CF433E
invalid.deprecated#CF433E
meta.structure.dictionary.json string.quoted.double.json#C5D671
meta.diff, meta.diff.header#223A39
markup.deleted#E61F44
markup.inserted#A6E22E
markup.changed#F7B83D
constant.numeric.line-number.find-in-files - match#8FBE00A0
entity.name.filename.find-in-files#E6DB74
keyword.other#3E6A68
meta.property-value, support.constant.property-value, constant.other.color#C5D671
meta.structure.dictionary.json string.quoted.double.json#BBD4BE
meta.structure.dictionary.value.json string.quoted.double.json#C5D671
meta.property-name support.type.property-name
meta.property-value punctuation.separator.key-value#B1C7CC
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#43BDB2
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#43BDB2
variable.other#FFFFFF
variable.other.readwrite.ts#0C7B44italic bold
variable.parameter.function.coffee#E4F279
entity.name.section.markdown#BBD4BE
punctuation.definition.heading.markdown#F7A8A5
markup.raw.inline.markdown#C5D671
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#F7A8A5
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#F7A8A5
punctuation.definition.metadata.markdown#F7A8A5
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#43BDB2
markup.bold.markdown, markup.italic.markdown#43BDB2
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#664E4D
markup.deleted.git_gutter#E61F44
markup.inserted.git_gutter#A7DA1E
markup.changed.git_gutter#F7B83D
meta.template.expression#B1C7CC
support.type.property-name.css#67B04B
storage.type, support.type.property-name.cssitalic
variable.language.thisitalic underline
constant.language.boolean.true#159C0E
constant.language.boolean.true, constant.language.boolean.falseitalic bold
constant.language.boolean.false#9c0e6f
punctuation.definition.template-expression, punctuation.section.embedded.coffee#414950
entity.other.inherited-class#FFFFFFitalic underline
support.type.property-name.json, string.quoted.single, keyword.operator.logical, keyword.operator.expression
storage.type.function.arrow, constant.language.null, constant.language.undefined, constant.numeric.decimal, variable.language.superbold
keyword.control, keyword.operator#F92672italic
punctuation.terminator.statement.cs#B1C7CC
keyword.operator
constant.language.null, constant.language.undefined#8A5A44italic bold
constant.language.nanitalic bold
keyword.operator.logical, keyword.operator.ternary, punctuation.accessor.optional#47CCB1
constant.language.jsonbold
support.class.component#6E9AF8underline
keyword.control.trycatch#155A7Cbold
storage.modifier.async#4DD67B
punctuation.definition.tag.begin, punctuation.definition.tag.end#22272B
punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#414950
entity.other.attribute-name.html, entity.other.attribute-name.tsx, entity.other.attribute-name.js.jsx#CC66FF
storage.type#13997E
entity.name.type.interface#8FB3C3bold
storage.modifier.ts, storage.modifier.tsx, storage.modifier.cs, source.cs#394d49
meta.type.parameters.ts, meta.type.parameters.tsx#70D673bold
support.type.primitive.ts, support.type.primitive.tsx, keyword.type.cs#62b5a4bold
storage.type.type, storage.type.namespace, storage.type.interface, keyword.control.type#80b0c4
keyword.control.import, keyword.control.from#394D49
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
ThemeDatabase All Themes by enes ozturk - VS Code Theme