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#070825
  • activityBar.foreground#46BDFF
  • activityBarBadge.background#FF16B0
  • activityBarBadge.foreground#fcfcfc
  • button.background#46BDFF
  • button.foreground#000000
  • button.hoverBackground#00a6ff
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#070825
  • dropdown.border#181A1F
  • editor.background#0d0f31
  • editor.findMatchBackground#FF16B066
  • editor.findMatchBorder#FF16B0
  • editor.findMatchHighlightBackground#46BDFF44
  • editor.findMatchHighlightBorder#46BDFF66
  • editor.foreground#f1f1f1
  • editor.lineHighlightBackground#0f1a3121
  • editor.selectionBackground#ffffff3b
  • editorBracketMatch.border#FF16B0
  • editorCursor.foreground#B3F361
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#070825
  • editorHoverWidget.background#1b1c27
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#2c394c8f
  • editorLineNumber.foreground#3B4D66
  • editorSuggestWidget.background#242533
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2C313A
  • editorWhitespace.foreground#2c394c8f
  • editorWidget.background#202049
  • extensionButton.prominentBackground#FF16B0
  • extensionButton.prominentHoverBackground#ff16b196
  • focusBorder#46BDFF
  • gitDecoration.addedResourceForeground#46BDFF
  • gitDecoration.deletedResourceForeground#FF16B0
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#fcee54
  • gitDecoration.untrackedResourceForeground#B3F361
  • input.background#070825
  • input.border#181A1F
  • list.activeSelectionBackground#2C313A
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#2C313A
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#2C313A
  • list.inactiveSelectionBackground#2C313A
  • list.inactiveSelectionForeground#D7DAE0
  • pickerGroup.border#FF16B0
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#070825
  • sideBarSectionHeader.background#070825
  • statusBar.background#070825
  • statusBar.debuggingBackground#FF16B0
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#070825
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#070930
  • tab.border#070930
  • tab.inactiveBackground#070825
  • terminal.ansiBlue#46BDFF
  • terminal.ansiBrightBlue#46BDFF
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#B3F361
  • terminal.ansiBrightMagenta#F806FA
  • terminal.ansiBrightRed#FF16B0
  • terminal.ansiBrightYellow#FFEA16
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#B3F361
  • terminal.ansiMagenta#F806FA
  • terminal.ansiRed#FF16B0
  • terminal.ansiYellow#FFEA16
  • terminal.foreground#f1f1f1
  • terminal.selectionBackground#ffffff3b
  • terminalCursor.background#070930
  • terminalCursor.foreground#B3F361
  • titleBar.activeBackground#070825
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#070930
  • 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#DF81FC
string.template meta.embedded.line#fcfcfc
variable, entity.name.variable#96A1FF
variable.language, variable.other.object.js#46BDFF
variable.parameter#96A1FFbold
storage.type, storage.modifier#FF16B0bold
constant#96A1FF
string.regexp#96A1FF
meta.jsx.children.js, meta.property-value.css, text.html.derivative#fcfcfc
constant.numeric#FF16B0bold
constant.language#96A1FF
constant.character.escape#FFFFFF
entity.name#46BDFF
entity.name.tag#46BDFFbold
punctuation.definition.tag#FFFFFF
entity.other.attribute-name#96A1FF
entity.name.type#46BDFFbold
entity.other.inherited-class#F2F2F2
entity.name.function, variable.function#fcfcfcbold
keyword#FF16B0bold
keyword.control#FF16B0bold
keyword.operator#FF16B0bold
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#FF16B0bold
keyword.other.unit#96A1FF
support#46BDFFbold
support.function#fcfcfc
support.variable#96A1FF
meta.object-literal.key, support.type.property-name#46BDFF
variable.other.property.js#FF16B0bold
punctuation.separator.key-value#FF16B0bold
punctuation.section.embedded#FF16B0bold
punctuation.section.embedded#FFFFFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF16B0
support.type.property-name.css, support.type.vendored.property-name.css#F2F2F2
constant.other.color#FF16B0bold
support.constant.font-name#96A1FF
entity.other.attribute-name.id#FF16B0bold
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F2F2F2
support.function.misc.css#FF16B0bold
markup.heading, entity.name.section#96A1FF
markup.quote#FF407Bbold
beginning.punctuation.definition.list#96A1FF
markup.underline.link#F2F2F2
string.other.link.description#96A1FF
meta.function-call.generic.python#fcfcfc
storage.type.cs#FF16B0bold
entity.name.variable.local.cs#96A1FF
entity.name.variable.field.cs, entity.name.variable.property.cs#96A1FF
source.cpp keyword.operator#FF16B0bold
punctuation.definition.heading.markdown#96a0ff7c
punctuation.definition.bold.markdown#ff16b17a
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#FF16B0bold
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#46BDFFbold
meta.type.annotation.ts, meta.type.annotation.tsx, meta.return.type.ts, meta.return.type.tsx#46BDFF
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#46BDFF
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#DF81FCitalic
entity.name.function.macro.rust, support.macro.rust#46BDFFbold
variable.language.self.rust, variable.language.super.rust#46BDFFitalic
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#46BDFFbold
support.type.primitive.rust, entity.name.type.primitive.rust#FF16B0bold
meta.attribute.rust, punctuation.definition.attribute.rust#96A1FF
support.class.component.js, support.class.component.jsx, support.class.component.tsx#46BDFFbold
meta.jsx.children, meta.jsx.children.tsx#fcfcfc
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#FF16B0bold
meta.decorator, punctuation.decorator#96A1FFitalic
meta.type.parameters, variable.other.type.ts, variable.other.type.tsx#46BDFF
entity.name.package.go, entity.name.import.go#96A1FF
support.type.property-name.json#46BDFF
entity.name.tag.yaml#46BDFF
support.type.property-name.toml, entity.name.table.toml#46BDFF
1984 by juanmnl - VS Code Theme