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.activeBorder#84FFFF
  • activityBar.background#0A0520
  • activityBar.foreground#7984D1
  • activityBarBadge.background#42C6FF
  • activityBarBadge.foreground#ffffff
  • button.background#1a1e35
  • button.foreground#f2f3f7
  • button.hoverBackground#1e2342
  • debugToolBar.background#1c2a47
  • descriptionForeground#f2f3f7
  • editor.background#100b29
  • editor.findMatchBackground#484f7d
  • editor.findMatchHighlightBackground#484f7d80
  • editor.foreground#f2f3f7
  • editor.hoverHighlightBackground#42c6ff2a
  • editor.lineHighlightBorder#62dafb3a
  • editor.selectionBackground#1c2a47
  • editor.selectionHighlightBackground#484f7d8e
  • editor.wordHighlightBackground#ffffff22
  • editor.wordHighlightStrongBackground#42c6ff63
  • editorCursor.foreground#ff2e97
  • editorError.foreground#ff2e97
  • editorGroup.dropBackground#7984D1
  • editorGroupHeader.noTabsBackground#0A0520
  • editorGroupHeader.tabsBackground#0A0520
  • editorHoverWidget.background#3b4167
  • editorHoverWidget.border#3b4167
  • editorIndentGuide.activeBackground#62DAFB
  • editorIndentGuide.background#2d2844
  • editorInfo.foreground#7984D1
  • editorLineNumber.activeForeground#62DAFB
  • editorLineNumber.foreground#62dafb3a
  • editorRuler.foreground#484f7d
  • editorWarning.foreground#ff9b50
  • editorWidget.background#3b4167
  • editorWidget.border#3b4167
  • foreground#f2f3f7
  • gitDecoration.conflictingResourceForeground#df85ff
  • gitDecoration.deletedResourceForeground#f06292ff
  • gitDecoration.ignoredResourceForeground#7984D1
  • gitDecoration.modifiedResourceForeground#739efaff
  • gitDecoration.untrackedResourceForeground#42c6ff
  • input.background#0A0520
  • input.border#7983d1a5
  • input.placeholderForeground#7984D1
  • inputOption.activeBorder#84FFFF
  • inputValidation.errorBackground#f06292ff
  • inputValidation.errorBorder#f06292ff
  • list.activeSelectionBackground#d86bff
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#7984D1
  • list.errorForeground#f06292ff
  • list.filterMatchBackground#0d0b22
  • list.filterMatchBorder#84FFFF
  • list.focusBackground#8a45a3
  • list.hoverBackground#8a45a3
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#131033
  • list.warningForeground#f06292ff
  • listFilterWidget.background#0d0b22
  • listFilterWidget.noMatchesOutline#f06292ff
  • minimap.background#0A0520
  • minimap.findMatchHighlight#42C6FF86
  • minimap.selectionHighlight#3398c43f
  • notifications.background#3b4167
  • panel.background#0A0520
  • panel.border#090819
  • panelTitle.activeBorder#1ea8fc
  • panelTitle.activeForeground#f2f3f7
  • panelTitle.inactiveForeground#7984D1
  • peekView.border#42C6FF
  • peekViewEditor.background#11012F
  • peekViewEditor.matchHighlightBackground#ff2e97
  • peekViewEditor.matchHighlightBorder#ff2e97
  • peekViewResult.background#0c0724
  • peekViewResult.selectionBackground#42C6FF
  • peekViewTitle.background#0c0724
  • peekViewTitleDescription.foreground#7984D1
  • progressBar.background#84FFFF
  • scrollbar.shadow#090819
  • scrollbarSlider.activeBackground#919ad9
  • scrollbarSlider.background#9199d94f
  • scrollbarSlider.hoverBackground#9199d9b4
  • sideBar.background#0b0522
  • sideBar.border#0A0520
  • sideBarSectionHeader.background#0b0522
  • sideBarSectionHeader.foreground#7984D1
  • statusBar.background#090819
  • statusBar.debuggingBackground#62DAFB
  • statusBar.foreground#7984D1
  • statusBar.noFolderBackground#0d0b22
  • statusBar.noFolderForeground#7984D1
  • tab.activeBackground#0A0520
  • tab.activeForeground#f2f3f7
  • tab.border#0d0b22
  • tab.inactiveBackground#0c0b21
  • tab.inactiveForeground#7984D1
  • tab.unfocusedHoverBorder#84FFFF
  • terminal.ansiBlack#283034
  • terminal.ansiBlue#42c6ff
  • terminal.ansiBrightBlack#435056
  • terminal.ansiBrightBlue#42c6ff
  • terminal.ansiBrightCyan#42c6ff
  • terminal.ansiBrightGreen#add0e5
  • terminal.ansiBrightMagenta#ff2afc
  • terminal.ansiBrightRed#ff2e97
  • terminal.ansiBrightWhite#f4f6f9
  • terminal.ansiBrightYellow#FDE74E
  • terminal.ansiCyan#42c6ff
  • terminal.ansiGreen#3ada5d
  • terminal.ansiMagenta#ff2afc
  • terminal.ansiRed#ff2e97
  • terminal.ansiWhite#d9e0e9
  • terminal.ansiYellow#FDE74E
  • terminal.background#0A0520
  • terminal.border#175974
  • terminal.foreground#e4eeff
  • terminalCursor.background#0f111aff
  • terminalCursor.foreground#62DAFB
  • titleBar.activeBackground#090819

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.quoted.docstring.multi.python#7984D1italic
string, string.quoted.single.js.jsx, meta.structure.dictionary.value.json string.quoted.double.json#7984D1
constant.numeric#FDE74E
meta.object-literal.key, meta.object.member#aab7ec
constant.language, entity.other.attribute-name.class.pug#df85ffitalic
variable.scss, variable.css#58afd4italic
constant.character, constant.other, support.constant.property-value.css, entity.other.attribute-name.pseudo-class.css, keyword.other.important.scss#df85ff
variable
keyword#fe36fb
storage#42c6ff
storage.type, keyword.declaration.dart#ff2e97bold
entity.name.class, entity.name.type#42C6FFitalic
entity.other.inherited-class, meta.other.inherited-class.php#FDE74Eitalic
variable.parameter#FFFFFF
entity.name.tag#42c6ff
meta.entity.name.function.tsx, meta.entity.name.function.js, meta.entity.name.function.ts, meta.definition.function.tsx#42c6ff
entity.other.attribute-name, source.dart, variable.parameter.js, meta.jsx.children.js.jsx, meta.jsx.children.tsx, constant.other.color.rgb-value.hex.css#bdbdbd
support.function, keyword.operator#FF2AFC
support.constant#A3D6E0
support.type, support.class#42c6ffitalic
support.other.variable
variable.language.this, variable.language.this, variable.language.super, variable.language.this#42c6ffitalic
invalid#cf433e
invalid.deprecated#cf433e
meta.diff, meta.diff.header#456b7c
markup.deleted#e61f44
markup.inserted#A6E22E
markup.changed#f7b83d
constant.numeric.line-number.find-in-files - match#f7b83d
entity.name.filename.find-in-files#E6DB74
keyword.other#4ca2c7
meta.property-value, support.constant.property-value, constant.other.color#cccccc
meta.structure.dictionary.json string.quoted.double.json#FF0081
support.type.property-name.json#D86BFF
meta.property-name support.type.property-name
meta.property-value punctuation.separator.key-value#b6ced8
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as, keyword.other.import#ff2afc
support.other.namespace.php#F8F8F2
meta.use#1ea8fc
meta.function-call, entity.name.function.dart#42c6ffitalic
support.class.component.js.jsxbold
variable.parameter#aaaaaa
variable.other#f0f2ff
variable.other.property.js, support.variable.property.jsitalic
variable.other.readwrite, variable.other.constant, variable.other.property.js, support.variable.property.js#cecece
entity.name.section.markdown#5dcdfd
punctuation.definition.block, meta.brace.round, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.binding-pattern.object, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.section.function.begin.bracket.round, punctuation.section.function.end.bracket.round, constant.name.attribute.tag.pug#545C79bold
punctuation.definition.heading.markdown#1ea8fc
markup.raw.inline.markdown#cccccc
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#1ea8fc
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#1ea8fc
punctuation.definition.metadata.markdown#1ea8fc
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#1ea8fc
markup.bold.markdown, markup.italic.markdown#1ea8fc
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#b6ced8
Bits by Manu Codes - VS Code Theme