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#2e2923
  • activityBar.foreground#fcd395
  • activityBarBadge.background#e74946
  • activityBarBadge.foreground#F2F2F2
  • button.background#fcd395
  • button.foreground#2e2923
  • button.hoverBackground#e74946
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#2e2923
  • dropdown.border#292521
  • editor.background#2e2923
  • editor.findMatchBackground#fcd39566
  • editor.findMatchBorder#fcd395
  • editor.findMatchHighlightBackground#e7494644
  • editor.findMatchHighlightBorder#e7494666
  • editor.foreground#f1f1f1
  • editor.lineHighlightBackground#b490660a
  • editor.selectionBackground#F2F2F23b
  • editorBracketMatch.border#fcd395
  • editorCursor.foreground#fff
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#292521
  • editorHoverWidget.background#292623
  • editorHoverWidget.border#fcd395
  • editorIndentGuide.background#fcda9523
  • editorLineNumber.foreground#fcda9575
  • editorSuggestWidget.background#292521
  • editorSuggestWidget.border#0f0e0c
  • editorSuggestWidget.selectedBackground#fcd39552
  • editorWhitespace.foreground#fcda9523
  • editorWidget.background#202049
  • extensionButton.prominentBackground#e74946
  • extensionButton.prominentHoverBackground#de3d3a59
  • focusBorder#fcd395
  • gitDecoration.addedResourceForeground#bcc8e0
  • gitDecoration.deletedResourceForeground#e74946
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#fcd395
  • gitDecoration.untrackedResourceForeground#4cb605
  • input.background#2e2923
  • input.border#fcd395
  • list.activeSelectionBackground#fcd39552
  • list.activeSelectionForeground#292521
  • list.focusBackground#fcd39552
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#fcd3954f
  • list.hoverForeground#D7DAE0
  • list.inactiveSelectionBackground#fcda9523
  • list.inactiveSelectionForeground#D7DAE0
  • pickerGroup.border#fcda9560
  • scrollbarSlider.activeBackground#fcda9523
  • scrollbarSlider.background#fcda9523
  • scrollbarSlider.hoverBackground#fcda9523
  • sideBar.background#292521
  • sideBarSectionHeader.background#24201d
  • statusBar.background#2e2923
  • statusBar.debuggingBackground#fcd395
  • statusBar.debuggingForeground#2e2923
  • statusBar.foreground#fcd395
  • statusBar.noFolderBackground#2e2923
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#2e2923
  • tab.border#fcda951c
  • tab.inactiveBackground#292521
  • terminal.ansiBlue#356fe4
  • terminal.ansiBrightBlue#356fe4
  • terminal.ansiBrightCyan#3fc4ce
  • terminal.ansiBrightGreen#4cb605
  • terminal.ansiBrightMagenta#fcbe95
  • terminal.ansiBrightRed#e74946
  • terminal.ansiBrightYellow#fcd395
  • terminal.ansiCyan#3fc4ce
  • terminal.ansiGreen#4cb605
  • terminal.ansiMagenta#fcbe95
  • terminal.ansiRed#e74946
  • terminal.ansiYellow#fcd395
  • terminal.foreground#fff
  • terminal.selectionBackground#F2F2F23b
  • terminalCursor.background#070930
  • terminalCursor.foreground#fcd395
  • titleBar.activeBackground#2e2923
  • titleBar.activeForeground#fcd395
  • titleBar.inactiveBackground#2e29239c
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#1C1E26

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#fcbe954fitalic
string.quoted, string.template, punctuation.definition.string#fcbe95
string.template meta.embedded.line#F2F2F2
variable, entity.name.variable#fcd395
variable.language, variable.other.object.js#fcd395
variable.parameter#F7D88B
storage.type, storage.modifier#e74946
constant#fcbe95
string.regexp#fcbe95
meta.jsx.children.js, meta.property-value.css, text.html.derivative#fcd395
constant.numeric#fcd395
constant.language#fcbe95
constant.character.escape#F2F2F2
entity.name#F2F2F2
entity.name.tag#bcc8e0
punctuation.definition.tag#F2F2f2
entity.other.attribute-name#F2F2F2
entity.name.type#F2F2F2
entity.other.inherited-class#F2F2F2
entity.name.function, variable.function#F2F2F2
keyword#e74946
keyword.control#e74946
keyword.operator#e74946
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#e74946
keyword.other.unit#fcbe95
support#e74946
support.function#F2F2F2
support.variable#fcbe95
meta.object-literal.key, support.type.property-name#e74946
variable.other.property.js#e74946
punctuation.separator.key-value#e74946
punctuation.section.embedded#e74946
punctuation.section.embedded#F2F2F2
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#e74946
support.type.property-name.css, support.type.vendored.property-name.css#F2F2F2
constant.other.color#e74946
support.constant.font-name#fcbe95
entity.other.attribute-name.id#e74946
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F2F2F2
support.function.misc.css#e74946
markup.heading, entity.name.section#fcbe95
markup.quote#e74946
beginning.punctuation.definition.list#fcbe95
markup.underline.link#F2F2F2
string.other.link.description#fcbe95
meta.function-call.generic.python#F2F2F2
storage.type.cs#e74946
entity.name.variable.local.cs#fcbe95
entity.name.variable.field.cs, entity.name.variable.property.cs#fcbe95
source.cpp keyword.operator#e74946
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#e74946
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#F2F2F2
meta.type.annotation.ts, meta.type.annotation.tsx, meta.return.type.ts, meta.return.type.tsx#bcc8e0
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#bcc8e0
keyword.operator.type.ts, keyword.operator.type.tsx, keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx#e74946
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust#fcbe95italic
entity.name.function.macro.rust, support.macro.rust#bcc8e0
variable.language.self.rust, variable.language.super.rust#fcd395italic
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#F2F2F2
support.type.primitive.rust, entity.name.type.primitive.rust#e74946
meta.attribute.rust, punctuation.definition.attribute.rust#fcbe95
support.class.component.js, support.class.component.jsx, support.class.component.tsx#bcc8e0
meta.jsx.children, meta.jsx.children.tsx#fcd395
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#e74946
meta.decorator, punctuation.decorator#fcbe95italic
meta.type.parameters, variable.other.type.ts, variable.other.type.tsx#bcc8e0
entity.name.package.go, entity.name.import.go#fcbe95
support.type.property-name.json#e74946
entity.name.tag.yaml#e74946
support.type.property-name.toml, entity.name.table.toml#e74946
1984 by juanmnl - VS Code Theme