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#1C1E27
  • activityBar.foreground#85EEA7
  • activityBarBadge.background#85EEA7
  • activityBarBadge.foreground#1C1E27
  • button.background#85EEA7
  • button.foreground#1C1E27
  • button.hoverBackground#85EEA7
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1C1E27
  • dropdown.border#181A1F
  • editor.background#1C1E27
  • editor.findMatchBackground#85EEA766
  • editor.findMatchBorder#85EEA7
  • editor.findMatchHighlightBackground#78A8D644
  • editor.findMatchHighlightBorder#78A8D666
  • editor.foreground#f5f5f5
  • editor.lineHighlightBackground#0f1a3121
  • editor.selectionBackground#ffffff3b
  • editorBracketMatch.border#85EEA7
  • editorCursor.foreground#85EEA7
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#1C1E27
  • editorHoverWidget.background#181A1F
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#8f97ff28
  • editorLineNumber.foreground#8f97ff4d
  • editorSuggestWidget.background#1C1E27
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2C313A
  • editorWhitespace.foreground#8f97ff28
  • editorWidget.background#181A1F
  • extensionButton.prominentBackground#85EEA7
  • extensionButton.prominentHoverBackground#ff16b196
  • focusBorder#85EEA7
  • gitDecoration.addedResourceForeground#78A8D6
  • gitDecoration.deletedResourceForeground#FF16B0
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#fcee54
  • gitDecoration.untrackedResourceForeground#85EEA7
  • input.background#1C1E27
  • input.border#1C1E27
  • list.activeSelectionBackground#2C313A
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#2C313A
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#2C313A
  • list.inactiveSelectionBackground#2C313A
  • list.inactiveSelectionForeground#D7DAE0
  • pickerGroup.border#85EEA7
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#15171d
  • sideBarSectionHeader.background#1C1E27
  • statusBar.background#1C1E27
  • statusBar.debuggingBackground#85EEA7
  • statusBar.debuggingForeground#1C1E27
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#1C1E27
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#1C1E27
  • tab.border#070930
  • tab.inactiveBackground#15171d
  • terminal.ansiBlue#78A8D6
  • terminal.ansiBrightBlue#78A8D6
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#85EEA7
  • terminal.ansiBrightMagenta#F806FA
  • terminal.ansiBrightRed#FF407B
  • terminal.ansiBrightYellow#FFEA16
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#85EEA7
  • terminal.ansiMagenta#F806FA
  • terminal.ansiRed#FF407B
  • terminal.ansiYellow#FFEA16
  • terminal.foreground#f1f1f1
  • terminal.selectionBackground#ffffff3b
  • terminalCursor.background#070930
  • terminalCursor.foreground#85EEA7
  • titleBar.activeBackground#1C1E27
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#15171d
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#232530

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#525863italic
string.quoted, string.template, punctuation.definition.string, punctuation.definition.block.js#7ADAD1
string.template meta.embedded.line#f3f3f3
variable, entity.name.variable#85EEA7
variable.language, variable.other.object.js#78A8D6
variable.parameter#78A8D6bold
storage.type, storage.modifier#7ADAD1bold
constant#85EEA7
string.regexp#85EEA7
constant.numeric#7ADAD1bold
constant.language#7ADAD1
constant.character.escape#f2f2f2
entity.name#78A8D6
entity.name.tag#78A8D6bold
punctuation.definition.tag#bcd4cf
entity.other.attribute-name#BCD4CF
entity.name.type#78A8D6bold
entity.other.inherited-class#F2F2F2
entity.name.function, variable.function#85EEA7bold
keyword#7ADAD1bold
keyword.control#BCD4CFbold
keyword.operator#7ADAD1bold
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#7ADAD1bold
keyword.other.unit#85EEA7
support#78A8D6bold
support.function#fcfcfc
support.variable#78A8D6
meta.object-literal.key, support.type.property-name#78A8D6
variable.other.property.js#7ADAD1bold
punctuation.separator.key-value#7ADAD1bold
punctuation.section.embedded#f2f2f2
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#7ADAD1
support.type.property-name.css, support.type.vendored.property-name.css#F2F2F2
constant.other.color#7ADAD1bold
support.constant.font-name#85EEA7
entity.other.attribute-name.id#7ADAD1bold
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F2F2F2
support.function.misc.css#7ADAD1bold
markup.heading, entity.name.section#85EEA7
markup.quote#FF407Bbold
beginning.punctuation.definition.list#85EEA7
markup.underline.link#F2F2F2
string.other.link.description#85EEA7
meta.function-call.generic.python#fcfcfc
storage.type.cs#7ADAD1bold
entity.name.variable.local.cs#85EEA7
entity.name.variable.field.cs, entity.name.variable.property.cs#85EEA7
source.cpp keyword.operator#7ADAD1bold
punctuation.definition.heading.markdown#7ADAD1
punctuation.definition.bold.markdown#85EEA7
punctuation.definition.italic.markdown#ffffff7e
markup.bold.markdownbold
markup.italic.markdownitalic
storage.type.interface.ts, storage.type.interface.tsx, storage.type.type.ts, storage.type.type.tsx, storage.type.enum.ts, storage.type.enum.tsx, storage.type.namespace.ts, storage.type.namespace.tsx, storage.type.class.ts, storage.type.class.tsx#7ADAD1bold
entity.name.type.interface.ts, entity.name.type.interface.tsx, entity.name.type.alias.ts, entity.name.type.alias.tsx, entity.name.type.enum.ts, entity.name.type.enum.tsx#78A8D6bold
meta.type.annotation.ts, meta.type.annotation.tsx, meta.return.type.ts, meta.return.type.tsx#78A8D6
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#78A8D6
keyword.operator.type.ts, keyword.operator.type.tsx, keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx#7ADAD1
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust#7ADAD1italic
entity.name.function.macro.rust, support.macro.rust#78A8D6bold
variable.language.self.rust, variable.language.super.rust#78A8D6italic
entity.name.type.rust, entity.name.type.struct.rust, entity.name.type.enum.rust, entity.name.type.trait.rust, entity.name.type.option.rust, entity.name.type.result.rust#78A8D6bold
support.type.primitive.rust, entity.name.type.primitive.rust#7ADAD1bold
meta.attribute.rust, punctuation.definition.attribute.rust#85EEA7
support.class.component.js, support.class.component.jsx, support.class.component.tsx#78A8D6bold
meta.jsx.children, meta.jsx.children.tsx#f3f3f3
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#7ADAD1bold
meta.decorator, punctuation.decorator#85EEA7italic
meta.type.parameters, variable.other.type.ts, variable.other.type.tsx#78A8D6
entity.name.package.go, entity.name.import.go#85EEA7
support.type.property-name.json#78A8D6
entity.name.tag.yaml#78A8D6
support.type.property-name.toml, entity.name.table.toml#78A8D6
1984 by juanmnl - VS Code Theme