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—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...