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#100a03
  • activityBar.border#2b1f0f
  • activityBar.foreground#ffb454
  • activityBar.inactiveForeground#c2ab8f
  • activityBarBadge.background#ffb454
  • activityBarBadge.foreground#000000
  • badge.background#b3791f
  • breadcrumb.background#150d05
  • button.background#b3791f
  • button.foreground#ffffff
  • button.hoverBackground#ffb454
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#070825
  • dropdown.border#181A1F
  • editor.background#150d05
  • editor.findMatchBackground#b3791f
  • editor.findMatchBorder#FFB454
  • editor.findMatchHighlightBackground#b3791f80
  • editor.findMatchHighlightBorder#F4A26166
  • editor.foreground#f1f1f1
  • editor.lineHighlightBackground#241708
  • editor.lineHighlightBorder#5e4113
  • editor.selectionBackground#5e411380
  • editorBracketMatch.border#FFB454
  • editorCursor.foreground#ffb454
  • editorGroup.border#2b1f0f
  • editorGroupHeader.noTabsBackground#150d05
  • editorGroupHeader.tabsBackground#100a03
  • editorGutter.addedBackground#50fa7b
  • editorGutter.background#150d05
  • editorGutter.modifiedBackground#ffb454
  • editorHoverWidget.background#241708
  • editorHoverWidget.border#5e4113
  • editorHoverWidget.foreground#f5ead5
  • editorIndentGuide.background#2c394c8f
  • editorLineNumber.foreground#3B4D66
  • editorOverviewRuler.addedForeground#50fa7b
  • editorOverviewRuler.modifiedForeground#ffb454
  • editorSuggestWidget.background#241708
  • editorSuggestWidget.border#5e4113
  • editorSuggestWidget.foreground#f5ead5
  • editorSuggestWidget.highlightForeground#ffb454
  • editorSuggestWidget.selectedBackground#5e4113
  • editorWhitespace.foreground#2c394c8f
  • editorWidget.background#241708
  • editorWidget.border#5e4113
  • extensionButton.prominentBackground#FFB454
  • extensionButton.prominentHoverBackground#FFB45496
  • focusBorder#F4A261
  • gitDecoration.addedResourceForeground#50fa7b
  • gitDecoration.deletedResourceForeground#FFB454
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#ffb454
  • gitDecoration.untrackedResourceForeground#B3F361
  • input.background#2b1f0f
  • input.border#5e4113
  • input.foreground#e0e0e0
  • list.activeSelectionBackground#5e4113
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#2C313A
  • list.highlightForeground#ffb454
  • list.hoverBackground#2b1f0f
  • list.inactiveSelectionBackground#2b1f0f
  • list.inactiveSelectionForeground#D7DAE0
  • menu.background#150d05
  • menu.selectionBackground#5e4113
  • minimapGutter.addedBackground#50fa7b
  • minimapGutter.modifiedBackground#ffb454
  • notificationCenter.background#241708
  • notifications.background#241708
  • notifications.border#5e4113
  • output.background#150d05
  • panel.background#150d05
  • pickerGroup.border#FFB454
  • quickInput.background#150d05
  • scrollbarSlider.activeBackground#ffb45466
  • scrollbarSlider.background#ffb45422
  • scrollbarSlider.hoverBackground#ffb45444
  • sideBar.background#100a03
  • sideBar.border#2b1f0f
  • sideBar.foreground#c2ab8f
  • sideBarSectionHeader.background#100a03
  • sideBarSectionHeader.border#2b1f0f
  • statusBar.background#241708
  • statusBar.border#3d2c14
  • statusBar.debuggingBackground#FFB454
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#070825
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#241708
  • tab.activeForeground#ffb454
  • tab.border#3d2c14
  • tab.inactiveBackground#100a03
  • terminal.ansiBlue#F4A261
  • terminal.ansiBrightBlue#F4A261
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#50fa7b
  • terminal.ansiBrightMagenta#F806FA
  • terminal.ansiBrightRed#FFB454
  • terminal.ansiBrightYellow#FFEA16
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#50fa7b
  • terminal.ansiMagenta#F806FA
  • terminal.ansiRed#FFB454
  • terminal.ansiYellow#FFEA16
  • terminal.background#150d05
  • terminal.border#5e4113
  • terminal.foreground#f5ead5
  • terminal.selectionBackground#5e411380
  • terminalCommandDecoration.defaultBackground#ffb454
  • terminalCommandDecoration.errorBackground#ff5555
  • terminalCommandDecoration.successBackground#50fa7b
  • terminalCursor.background#150d05
  • terminalCursor.foreground#ffb454
  • titleBar.activeBackground#100a03
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#100a03
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#232530

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6b5a3fitalic
string.quoted, string.template, punctuation.definition.string#7DD3FC
string.template meta.embedded.line#fff6e8
variable, entity.name.variable#FFCC80
variable.language, variable.other.object.js#F4A261
variable.parameter#FFCC80bold
storage.type, storage.modifier#FFB454bold
constant#FFCC80
string.regexp#FFCC80
meta.jsx.children.js, meta.property-value.css, text.html.derivative#fff6e8
constant.numeric#FFB454bold
constant.language#FFCC80
constant.character.escape#FFFFFF
entity.name#F4A261
entity.name.tag#F4A261bold
punctuation.definition.tag#FFFFFF
entity.other.attribute-name#FFCC80
entity.name.type#F4A261bold
entity.other.inherited-class#F2F2F2
entity.name.function, variable.function#fff6e8bold
keyword#FFB454bold
keyword.control#FFB454bold
keyword.operator#FFB454bold
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#FFB454bold
keyword.other.unit#FFCC80
support#F4A261bold
support.function#fff6e8
support.variable#FFCC80
meta.object-literal.key, support.type.property-name#F4A261
variable.other.property.js#FFB454bold
punctuation.separator.key-value#FFB454bold
punctuation.section.embedded#FFB454bold
punctuation.section.embedded#FFFFFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FFB454
support.type.property-name.css, support.type.vendored.property-name.css#F2F2F2
constant.other.color#FFB454bold
support.constant.font-name#FFCC80
entity.other.attribute-name.id#FFB454bold
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F2F2F2
support.function.misc.css#FFB454bold
markup.heading, entity.name.section#FFCC80
markup.quote#C084FCbold
beginning.punctuation.definition.list#FFCC80
markup.underline.link#F2F2F2
string.other.link.description#FFCC80
meta.function-call.generic.python#fff6e8
storage.type.cs#FFB454bold
entity.name.variable.local.cs#FFCC80
entity.name.variable.field.cs, entity.name.variable.property.cs#FFCC80
source.cpp keyword.operator#FFB454bold
punctuation.definition.heading.markdown#FFCC807c
punctuation.definition.bold.markdown#FFB4547a
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#FFB454bold
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#F4A261bold
meta.type.annotation.ts, meta.type.annotation.tsx, meta.return.type.ts, meta.return.type.tsx#F4A261
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#F4A261
keyword.operator.type.ts, keyword.operator.type.tsx, keyword.operator.type.annotation.ts, keyword.operator.type.annotation.tsx#FFB454
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust#7DD3FCitalic
entity.name.function.macro.rust, support.macro.rust#F4A261bold
variable.language.self.rust, variable.language.super.rust#F4A261italic
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#F4A261bold
support.type.primitive.rust, entity.name.type.primitive.rust#FFB454bold
meta.attribute.rust, punctuation.definition.attribute.rust#FFCC80
support.class.component.js, support.class.component.jsx, support.class.component.tsx#F4A261bold
meta.jsx.children, meta.jsx.children.tsx#fff6e8
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#FFB454bold
meta.decorator, punctuation.decorator#FFCC80italic
meta.type.parameters, variable.other.type.ts, variable.other.type.tsx#F4A261
entity.name.package.go, entity.name.import.go#FFCC80
support.type.property-name.json#F4A261
entity.name.tag.yaml#F4A261
support.type.property-name.toml, entity.name.table.toml#F4A261