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#0A0B0D
  • activityBar.border#1E2228
  • activityBar.foreground#F97316
  • activityBar.inactiveForeground#6B7280
  • badge.background#F97316
  • badge.foreground#0A0B0D
  • button.background#F97316
  • button.border#1E2228
  • button.foreground#0A0B0D
  • button.hoverBackground#EA580C
  • button.secondaryBackground#1E2228
  • button.secondaryForeground#E6E9EF
  • button.secondaryHoverBackground#2A2F38
  • checkbox.background#121417
  • checkbox.border#1E2228
  • checkbox.foreground#F97316
  • dropdown.background#121417
  • dropdown.border#1E2228
  • dropdown.foreground#E6E9EF
  • editor.background#0A0B0D
  • editor.findMatchBackground#2A2F38
  • editor.findMatchHighlightBackground#1E2228
  • editor.foreground#E6E9EF
  • editor.lineHighlightBackground#121417
  • editor.selectionBackground#1A1D22
  • editor.selectionHighlightBackground#121417
  • editorCursor.foreground#F97316
  • editorError.foreground#FF5C5C
  • editorGutter.addedBackground#3ECF8E
  • editorGutter.background#0A0B0D
  • editorGutter.deletedBackground#FF5C5C
  • editorGutter.modifiedBackground#F0B35A
  • editorHoverWidget.background#121417
  • editorHoverWidget.border#1E2228
  • editorIndentGuide.activeBackground1#2A2F38
  • editorIndentGuide.activeBackground2#2A2F38
  • editorIndentGuide.activeBackground3#2A2F38
  • editorIndentGuide.activeBackground4#2A2F38
  • editorIndentGuide.activeBackground5#2A2F38
  • editorIndentGuide.activeBackground6#2A2F38
  • editorIndentGuide.background1#1E2228
  • editorIndentGuide.background2#1E2228
  • editorIndentGuide.background3#1E2228
  • editorIndentGuide.background4#1E2228
  • editorIndentGuide.background5#1E2228
  • editorIndentGuide.background6#1E2228
  • editorInfo.foreground#F97316
  • editorLightBulb.foreground#F0B35A
  • editorMarkerNavigationError.background#FF5C5C
  • editorMarkerNavigationInfo.background#3ECF8E
  • editorMarkerNavigationWarning.background#F0B35A
  • editorWarning.foreground#F0B35A
  • focusBorder#F97316
  • input.background#121417
  • input.border#1E2228
  • input.foreground#E6E9EF
  • input.placeholderForeground#6B7280
  • list.activeSelectionBackground#121417
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#121417
  • list.focusForeground#FFFFFF
  • list.focusOutline#F97316
  • list.hoverBackground#0A0B0D
  • list.inactiveSelectionBackground#0A0B0D
  • list.inactiveSelectionForeground#8B92A1
  • panel.background#0A0B0D
  • panel.border#1E2228
  • quickInput.background#0A0B0D
  • quickInput.foreground#E6E9EF
  • quickInputList.focusBackground#121417
  • quickInputList.focusForeground#FFFFFF
  • scrollbarSlider.background#1E2228
  • scrollbarSlider.hoverBackground#2A2F38
  • sideBar.background#0A0B0D
  • sideBar.border#1E2228
  • sideBar.foreground#8B92A1
  • statusBar.background#F97316
  • statusBar.border#1E2228
  • statusBar.debuggingBackground#c64000
  • statusBar.foreground#0A0B0D
  • statusBar.noFolderBackground#0A0B0D
  • statusBarItem.activeBackground#b72500
  • statusBarItem.hoverBackground#EA580C
  • tab.activeBackground#0A0B0D
  • tab.activeForeground#E6E9EF
  • tab.border#1E2228
  • tab.inactiveBackground#0A0B0D
  • tab.inactiveForeground#6B7280
  • textLink.activeForeground#0A0B0D
  • textLink.foreground#F97316
  • titleBar.activeBackground#0A0B0D
  • titleBar.activeForeground#E6E9EF
  • titleBar.border#1E2228
  • titleBar.inactiveBackground#0A0B0D
  • titleBar.inactiveForeground#E6E9EF
  • tree.indentGuidesStroke#1E2228

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B7280italic
string, string.quoted#A3BE8C
constant.character.escape#F0B35A
constant.numeric#F0B35A
constant.language.boolean#F0B35A
invalid, invalid.illegal#FF5C5C
keyword.operator#F97316
punctuation#8B92A1
variable, meta.definition.variable.name#E6E9EF
meta.object-literal.key, meta.object.member, variable.object.property#E6E9EF
entity.name.tag, entity.name.tag.html#F97316
punctuation.definition.tag.html, punctuation.definition.tag#EA580C
entity.other.attribute-name, entity.other.attribute-name.html#FB923C
string.quoted.single.html, string.quoted.double.html#A3BE8C
entity.name.tag.script.html#F97316italic
entity.name.tag.style.html#F97316italic
constant.character.entity, constant.character.entity.html#FB923C
comment.block.html#6B7280italic
entity.name.tag.css#3B82F6
entity.other.attribute-name.class.css#60A5FAitalic
entity.other.attribute-name.id.css#2563EBbold
entity.other.pseudo-class.css#60A5FA
entity.other.pseudo-element.css#2563EB
support.type.property-name.css#2563EB
support.constant.property-value.css#60A5FA
constant.other.color.rgb-value.css, constant.other.color.hex.css#F0B35A
keyword.other.unit.css#60A5FA
keyword.control.at-rule.css#3B82F6italic
vendor.prefix.css#2563EB
keyword.control.js, keyword.operator.js, storage.type.js#F0B35A
entity.name.function.js, support.function.js, meta.function-call.generic.js#F5C965
meta.method.js, entity.name.function.method.js#F5C965
meta.object-literal.key.js#D4952D
variable.other.object.property.js#D4952D
meta.definition.variable.js#F0B35Aitalic
keyword.control.import.js, keyword.control.export.js#F0B35Abold
string.template.js, string.template.expression.js#A3BE8C
meta.template.expression.js#D4952D
entity.name.type.ts, entity.name.type.interface.ts#00D9FF
keyword.control.type.ts, storage.type.type.ts#00D9FFitalic
meta.type.parameters.ts, meta.generics.ts#22E8FF
meta.interface.ts#00D9FFitalic
meta.interface.body.ts#00A8CC
meta.decorator.ts#00D9FFitalic
keyword.control.ts, storage.type.ts#00D9FF
entity.name.namespace.ts#22E8FFitalic
entity.name.function.ts#00A8CC
entity.name.function.method.ts#00A8CC
entity.name.enum.ts#00D9FFbold
keyword.control.as.ts#00D9FF
entity.name.tag.jsx, support.class.component.jsx#8B5CF6bold
entity.name.tag.open.jsx, entity.name.tag.close.jsx#7C3AED
entity.other.attribute-name.jsx#A78BFA
string.attributed-string.jsx, string.jsx#A3BE8C
keyword.operator.spread.jsx#8B5CF6
variable.other.object.property.jsx#7C3AED
meta.embedded.expression.jsx, meta.jsx.expression.ts#A78BFA
support.function.hook.react.jsx, support.function.hook.react.tsx#8B5CF6italic
entity.name.type.fc.tsx, support.type.primitive.tsx#7C3AED
meta.attribute.style.jsx#A78BFAitalic
keyword.control.python#22C55E
entity.name.decorator.python#16A34Aitalic
entity.name.class.python#22C55Ebold
entity.name.function.python#4ADE80
keyword.control.import.python#22C55Eitalic
support.function.builtin.python#16A34A
support.type.python#4ADE80
string.quoted.single.block.python, string.quoted.double.block.python#A3BE8Citalic
keyword.control.flow.python#22C55E
entity.name.function.dunder.python#16A34Aitalic
meta.structure.dictionary.json, string.quoted.double.json#FF6B6B
support.type.property-name.json#E05A5A
string.quoted.double.json#A3BE8C
constant.numeric.json#FF8E8E
constant.language.json#FF6B6B
constant.language.null.json#E05A5Aitalic
punctuation.separator.dictionary.key-value.json#FF8E8E
punctuation.section.array.json#E05A5A
comment.line.double-slash.json#6B7280italic
comment.block.json#6B7280italic
markup.heading.markdown#E879F9bold
punctuation.definition.heading.markdown#D946EF
markup.bold.markdown#F0A8FFbold
markup.italic.markdown#F0A8FFitalic
markup.underline.link.markdown#D946EFunderline
string.other.link.markdown#E879F9
image.markdown#F0A8FF
markup.inline.raw.string.markdown#F0B35Aitalic
markup.raw.block.markdown#A3BE8C
fenced_code.block.language.markdown#D946EFitalic
markup.list.unnumbered.markdown, markup.list.numbered.markdown#E879F9
markup.quote.markdown#F0A8FFitalic
markup.table.markdown#D946EF
meta.frontmatter.markdown#F0A8FF