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#e4e5f5
  • activityBar.foreground#19152c
  • activityBarBadge.background#FF16B0
  • activityBarBadge.foreground#fcfcfc
  • button.background#FF16B0
  • button.foreground#19152c
  • button.hoverBackground#0098fd
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#e4e5f5ff
  • dropdown.border#19152c
  • editor.background#e4e5f5
  • editor.findMatchBackground#FF16B066
  • editor.findMatchBorder#FF16B0
  • editor.findMatchHighlightBackground#0098fd44
  • editor.findMatchHighlightBorder#0098fd66
  • editor.foreground#19152c
  • editor.lineHighlightBackground#dcddec
  • editor.selectionBackground#ffffff
  • editorBracketMatch.border#B3F361
  • editorCursor.foreground#FF16B0
  • editorGroup.border#dcddec
  • editorGroupHeader.tabsBackground#dfe0f0
  • editorHoverWidget.background#d9dbf0
  • editorHoverWidget.border#19152c
  • editorIndentGuide.background#f1f1f1
  • editorLineNumber.foreground#7f8a99
  • editorSuggestWidget.background#d9dbf0
  • editorSuggestWidget.border#19152c
  • editorSuggestWidget.selectedBackground#46beff6b
  • editorWhitespace.foreground#f1f1f1
  • editorWidget.background#d9dbf0
  • extensionButton.prominentBackground#FF16B0
  • extensionButton.prominentHoverBackground#ff16b196
  • focusBorder#46BDFF
  • gitDecoration.addedResourceForeground#0098fd
  • gitDecoration.deletedResourceForeground#FF16B0
  • gitDecoration.ignoredResourceForeground#adadad
  • gitDecoration.modifiedResourceForeground#FF8D01
  • gitDecoration.untrackedResourceForeground#00af4f
  • input.background#d4d5e9
  • input.border#a8b6ca
  • list.activeSelectionBackground#46beff6b
  • list.activeSelectionForeground#19152c
  • list.focusBackground#46beff3f
  • list.highlightForeground#19152c
  • list.hoverBackground#46beff3f
  • list.inactiveSelectionBackground#d4d5e9
  • list.inactiveSelectionForeground#19152c
  • pickerGroup.border#FF16B0
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#dfe0f0
  • sideBar.foreground#585d74
  • sideBarSectionHeader.background#d4d5e6
  • statusBar.background#070825
  • statusBar.debuggingBackground#FF16B0
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#19152c
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#e4e5f5
  • tab.border#dfe0f0
  • tab.inactiveBackground#d4d6e7
  • terminal.ansiBlue#0098fd
  • terminal.ansiBrightBlue#0098fd
  • terminal.ansiBrightCyan#00b2be
  • terminal.ansiBrightGreen#00af4f
  • terminal.ansiBrightMagenta#F806FA
  • terminal.ansiBrightRed#FF16B0
  • terminal.ansiBrightYellow#FF8D01
  • terminal.ansiCyan#00b2be
  • terminal.ansiGreen#00af4f
  • terminal.ansiMagenta#F806FA
  • terminal.ansiRed#FF16B0
  • terminal.ansiYellow#FF8D01
  • terminal.foreground#19152c
  • terminal.selectionBackground#fff
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#FF16B0
  • titleBar.activeBackground#070825
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#07082579
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#d5d9f1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9793b9italic
string.quoted, string.template, punctuation.definition.string#c300ff—
string.template meta.embedded.line#19152c—
variable, entity.name.variable#4d5eff—
variable.language, variable.other.object.js#4d5eff—
variable.parameter#1930fd—
storage.type, storage.modifier#FF16B0—
constant#4d5eff—
string.regexp#4d5eff—
meta.jsx.children.js, meta.property-value.css, text.html.derivative#3f374b—
constant.numeric#FF16B0—
constant.language#4d5eff—
constant.character.escape#1f398f—
entity.name#0098fd—
entity.name.tag#0098fd—
punctuation.definition.tag#665388—
entity.other.attribute-name#4d5eff—
entity.name.type#0098fd—
entity.other.inherited-class#636262—
entity.name.function, variable.function#251b50—
keyword#FF16B0—
keyword.control#FF16B0—
keyword.operator#FF16B0—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#FF16B0—
keyword.other.unit#4d5eff—
support#0098fd—
support.function#251b50—
support.variable#4d5eff—
meta.object-literal.key, support.type.property-name#0098fd—
variable.other.property.js#FF16B0—
punctuation.separator.key-value#FF16B0—
punctuation.section.embedded#FF16B0—
punctuation.section.embedded#080218—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF16B0—
support.type.property-name.css, support.type.vendored.property-name.css#39344e
constant.other.color#FF16B0—
support.constant.font-name#4d5eff—
entity.other.attribute-name.id#FF16B0—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#080218—
support.function.misc.css#FF16B0—
markup.heading, entity.name.section#4d5eff—
markup.quote#FF407B—
beginning.punctuation.definition.list#4d5eff—
markup.underline.link#080218—
string.other.link.description#4d5eff—
meta.function-call.generic.python#080218—
storage.type.cs#FF16B0—
entity.name.variable.local.cs#4d5eff—
entity.name.variable.field.cs, entity.name.variable.property.cs#4d5eff—
source.cpp keyword.operator#FF16B0—
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#FF16B0—
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#0098fd—
meta.type.annotation.ts, meta.type.annotation.tsx, meta.return.type.ts, meta.return.type.tsx#0098fd—
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#0098fd—
keyword.operator.type.ts, keyword.operator.type.tsx, keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx#FF16B0—
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust#c300ffitalic
entity.name.function.macro.rust, support.macro.rust#0098fd—
variable.language.self.rust, variable.language.super.rust#4d5effitalic
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#0098fd—
support.type.primitive.rust, entity.name.type.primitive.rust#FF16B0—
meta.attribute.rust, punctuation.definition.attribute.rust#4d5eff—
support.class.component.js, support.class.component.jsx, support.class.component.tsx#0098fd—
meta.jsx.children, meta.jsx.children.tsx#3f374b—
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#FF16B0—
meta.decorator, punctuation.decorator#4d5effitalic
meta.type.parameters, variable.other.type.ts, variable.other.type.tsx#0098fd—
entity.name.package.go, entity.name.import.go#4d5eff—
support.type.property-name.json#0098fd—
entity.name.tag.yaml#0098fd—
support.type.property-name.toml, entity.name.table.toml#0098fd—

Shiki preview

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

Loading...