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.activeBackground#f1f1f1
  • activityBar.background#fefefe
  • activityBar.border#e5e5e5
  • activityBar.foreground#1a1a1a
  • activityBar.inactiveForeground#6b7280
  • activityBarBadge.background#ea580c
  • activityBarBadge.foreground#ffffff
  • badge.background#6b7280
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#1a1a1a
  • breadcrumb.background#fefefe
  • breadcrumb.focusForeground#1a1a1a
  • breadcrumb.foreground#6b7280
  • button.background#ea580c
  • button.foreground#ffffff
  • button.hoverBackground#dc2626
  • button.secondaryBackground#6b7280
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#4b5563
  • checkbox.background#fefefe
  • checkbox.border#d1d5db
  • checkbox.foreground#1a1a1a
  • debugExceptionWidget.background#f5f5f5
  • debugExceptionWidget.border#b91c1c
  • debugToolBar.background#ffffff
  • debugToolBar.border#e5e5e5
  • diffEditor.border#e5e5e5
  • diffEditor.insertedTextBackground#dcfce7
  • diffEditor.removedTextBackground#fef2f2
  • dropdown.background#fefefe
  • dropdown.border#d1d5db
  • dropdown.foreground#1a1a1a
  • editor.background#ffffff
  • editor.findMatchBackground#fed7aa
  • editor.findMatchBorder#ea580c
  • editor.findMatchHighlightBackground#fef2f2
  • editor.findMatchHighlightBorder#dc2626
  • editor.findRangeHighlightBackground#f5f5f5
  • editor.findRangeHighlightBorder#e5e5e5
  • editor.foldBackground#fef2f2
  • editor.foreground#1a1a1a
  • editor.hoverHighlightBackground#fef2f2
  • editor.inactiveSelectionBackground#f1f1f1
  • editor.lineHighlightBackground#f5f5f5
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#f5f5f5
  • editor.rangeHighlightBorder#e5e5e5
  • editor.selectionBackground#fed7aa
  • editor.selectionHighlightBackground#fef2f2
  • editor.selectionHighlightBorder#b91c1c
  • editor.wordHighlightBackground#f1f1f1
  • editor.wordHighlightStrongBackground#fed7aa
  • editorBracketMatch.background#f5f5f5
  • editorBracketMatch.border#6b7280
  • editorCodeLens.foreground#6b7280
  • editorCursor.background#ffffff
  • editorCursor.foreground#ea580c
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#b91c1c
  • editorGroup.border#e5e5e5
  • editorGroup.emptyBackground#fefefe
  • editorGroupHeader.border#e5e5e5
  • editorGroupHeader.tabsBackground#f5f5f5
  • editorGroupHeader.tabsBorder#e5e5e5
  • editorGutter.addedBackground#16a34a
  • editorGutter.background#ffffff
  • editorGutter.commentRangeForeground#6b7280
  • editorGutter.deletedBackground#dc2626
  • editorGutter.foldingControlForeground#6b7280
  • editorGutter.modifiedBackground#f59e0b
  • editorHoverWidget.background#fefefe
  • editorHoverWidget.border#d1d5db
  • editorHoverWidget.foreground#1a1a1a
  • editorIndentGuide.activeBackground#374151
  • editorIndentGuide.background#f1f1f1
  • editorInfo.background#dbeafe00
  • editorInfo.border#dbeafe00
  • editorInfo.foreground#1d4ed8
  • editorLineNumber.activeForeground#374151
  • editorLineNumber.foreground#6b7280
  • editorLink.activeForeground#ea580c
  • editorMarkerNavigation.background#f5f5f5
  • editorMarkerNavigationError.background#b91c1c
  • editorMarkerNavigationInfo.background#06b6d4
  • editorMarkerNavigationWarning.background#f59e0b
  • editorOverviewRuler.background#f5f5f5
  • editorOverviewRuler.border#e5e5e5
  • editorRuler.foreground#f1f1f1
  • editorSuggestWidget.background#fefefe
  • editorSuggestWidget.border#d1d5db
  • editorSuggestWidget.foreground#1a1a1a
  • editorSuggestWidget.highlightForeground#ea580c
  • editorSuggestWidget.selectedBackground#fef2f2
  • editorWarning.background#fef3c700
  • editorWarning.border#fef3c700
  • editorWarning.foreground#92400e
  • editorWhitespace.foreground#e5e5e5
  • editorWidget.background#f5f5f5
  • editorWidget.foreground#1a1a1a
  • editorWidget.resizeBorder#ea580c
  • focusBorder#ea580c
  • foreground#1a1a1a
  • gitDecoration.addedResourceForeground#16a34a
  • gitDecoration.conflictingResourceForeground#f59e0b
  • gitDecoration.deletedResourceForeground#b91c1c
  • gitDecoration.ignoredResourceForeground#6b7280
  • gitDecoration.modifiedResourceForeground#ea580c
  • gitDecoration.stageDeletedResourceForeground#b91c1c
  • gitDecoration.stageModifiedResourceForeground#ea580c
  • gitDecoration.submoduleResourceForeground#7c2d12
  • gitDecoration.untrackedResourceForeground#16a34a
  • icon.foreground#1a1a1a
  • input.background#fefefe
  • input.border#d1d5db
  • input.foreground#1a1a1a
  • input.placeholderForeground#6b7280
  • inputOption.activeBackground#ea580c
  • inputOption.activeBorder#ea580c
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#ea580c
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#fef2f2
  • list.focusBackground#fed7aa
  • list.focusForeground#1a1a1a
  • list.highlightForeground#ea580c
  • list.hoverBackground#f5f5f5
  • list.hoverForeground#1a1a1a
  • list.inactiveSelectionBackground#f1f1f1
  • list.inactiveSelectionForeground#1a1a1a
  • listFilterWidget.background#f5f5f5
  • listFilterWidget.noMatchesOutline#b91c1c
  • listFilterWidget.outline#ea580c
  • menu.background#fefefe
  • menu.border#d1d5db
  • menu.foreground#1a1a1a
  • menu.selectionBackground#fef2f2
  • menu.selectionBorder#ea580c
  • menu.selectionForeground#1a1a1a
  • menu.separatorBackground#e5e5e5
  • menubar.selectionBackground#fef2f2
  • menubar.selectionForeground#1a1a1a
  • merge.commonContentBackground#f5f5f5
  • merge.commonHeaderBackground#f1f1f1
  • merge.currentContentBackground#dcfce7
  • merge.currentHeaderBackground#16a34a
  • merge.incomingContentBackground#ddd6fe
  • merge.incomingHeaderBackground#7c3aed
  • minimap.background#ffffff
  • minimap.errorHighlight#b91c1c
  • minimap.findMatchHighlight#fed7aa
  • minimap.selectionHighlight#fef2f2
  • minimap.warningHighlight#f59e0b
  • minimapGutter.addedBackground#16a34a
  • minimapGutter.deletedBackground#b91c1c
  • minimapGutter.modifiedBackground#f59e0b
  • notificationCenter.border#e5e5e5
  • notificationCenterHeader.background#f5f5f5
  • notificationCenterHeader.foreground#1a1a1a
  • notifications.background#fefefe
  • notifications.border#d1d5db
  • notifications.foreground#1a1a1a
  • notificationsErrorIcon.foreground#b91c1c
  • notificationsInfoIcon.foreground#06b6d4
  • notificationsWarningIcon.foreground#f59e0b
  • notificationToast.border#d1d5db
  • panel.background#fefefe
  • panel.border#e5e5e5
  • panelSection.border#e5e5e5
  • panelTitle.activeBorder#ea580c
  • panelTitle.activeForeground#1a1a1a
  • panelTitle.inactiveForeground#6b7280
  • peekView.border#ea580c
  • peekViewEditor.background#f5f5f5
  • peekViewEditor.matchHighlightBackground#fed7aa
  • peekViewEditor.matchHighlightBorder#ea580c
  • peekViewEditorGutter.background#f5f5f5
  • peekViewResult.background#fefefe
  • peekViewResult.fileForeground#1a1a1a
  • peekViewResult.lineForeground#374151
  • peekViewResult.matchHighlightBackground#fed7aa
  • peekViewResult.selectionBackground#fef2f2
  • peekViewResult.selectionForeground#1a1a1a
  • peekViewTitle.background#f1f1f1
  • peekViewTitleDescription.foreground#6b7280
  • peekViewTitleLabel.foreground#1a1a1a
  • pickerGroup.border#e5e5e5
  • pickerGroup.foreground#374151
  • progressBar.background#ea580c
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#374151aa
  • scrollbarSlider.background#6b728080
  • scrollbarSlider.hoverBackground#374151aa
  • selection.background#fed7aa
  • settings.focusedRowBackground#f5f5f5
  • settings.headerForeground#1a1a1a
  • sideBar.background#f5f5f5
  • sideBar.border#e5e5e5
  • sideBar.dropBackground#fef2f2
  • sideBar.foreground#374151
  • sideBarSectionHeader.background#f1f1f1
  • sideBarSectionHeader.border#e5e5e5
  • sideBarSectionHeader.foreground#1a1a1a
  • sideBarTitle.foreground#1a1a1a
  • statusBar.background#ea580c
  • statusBar.debuggingBackground#b91c1c
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#6b7280
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#ffffff20
  • statusBarItem.hoverBackground#ffffff15
  • statusBarItem.remoteBackground#16a34a
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#00000000
  • tab.activeBorderTop#ea580c
  • tab.activeForeground#1a1a1a
  • tab.border#e5e5e5
  • tab.hoverBackground#f1f1f1
  • tab.hoverForeground#1a1a1a
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#6b7280
  • terminal.ansiBlack#1f2937
  • terminal.ansiBlue#1d4ed8
  • terminal.ansiBrightBlack#6b7280
  • terminal.ansiBrightBlue#3b82f6
  • terminal.ansiBrightCyan#06b6d4
  • terminal.ansiBrightGreen#16a34a
  • terminal.ansiBrightMagenta#c026d3
  • terminal.ansiBrightRed#dc2626
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f59e0b
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#059669
  • terminal.ansiMagenta#9333ea
  • terminal.ansiRed#b91c1c
  • terminal.ansiWhite#f5f5f5
  • terminal.ansiYellow#d97706
  • terminal.border#e5e5e5
  • terminal.foreground#1a1a1a
  • terminal.selectionBackground#ea580c40
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#ea580c
  • textLink.foreground#ea580c
  • titleBar.activeBackground#fefefe
  • titleBar.activeForeground#1a1a1a
  • titleBar.border#e5e5e5
  • titleBar.inactiveBackground#f5f5f5
  • titleBar.inactiveForeground#6b7280
  • tree.indentGuidesStroke#f1f1f1
  • walkThrough.embeddedEditorBackground#f5f5f5
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison#ea580c
variable.other.generic-type.haskell#dc2626
storage.type.haskell#d97706
support.variable.magic.python#ea580c
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#1a1a1a
variable.parameter.function.language.special.self.python#b91c1c
storage.modifier.lifetime.rust#1a1a1a
support.function.std.rust#ea580c
entity.name.lifetime.rust#b91c1c
variable.language.rust#ea580c
support.constant.edge#dc2626
constant.other.character-class.regexp#ea580c
keyword.operator.quantifier.regexp#d97706
punctuation.definition.string.begin,punctuation.definition.string.end#d97706
variable.parameter.function#1a1a1a
comment markup.link#6b7280
markup.changed.diff#b91c1c
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#ea580c
markup.inserted.diff#d97706
markup.deleted.diff#ea580c
meta.function.c,meta.function.cpp#ea580c
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#1a1a1a
punctuation.separator.key-value#1a1a1a
keyword.operator.expression.import#ea580c
support.constant.math#b91c1c
support.constant.property.math#d97706
variable.other.constant#b91c1c
storage.type.annotation.java, storage.type.object.array.java#b91c1c
source.java#ea580c
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java#1a1a1a
meta.method.java#ea580c
storage.modifier.import.java,storage.type.java,storage.type.generic.java#b91c1c
keyword.operator.instanceof.java#dc2626
meta.definition.variable.name.java#ea580c
keyword.operator.logical#1a1a1a
keyword.operator.bitwise#1a1a1a
keyword.operator.channel#1a1a1a
support.constant.property-value.scss,support.constant.property-value.css#d97706
keyword.operator.css,keyword.operator.scss,keyword.operator.less#1a1a1a
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#d97706
punctuation.separator.list.comma.css#1a1a1a
support.constant.color.w3c-standard-color-name.css#d97706
support.type.vendored.property-name.css#1a1a1a
support.module.node,support.type.object.module,support.module.node#b91c1c
entity.name.type.module#d97706
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#ea580c
support.constant.json#d97706
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#dc2626
support.type.object.console#ea580c
support.variable.property.process#d97706
entity.name.function,support.function.console#ea580c
keyword.operator.misc.rust#1a1a1a
keyword.operator.sigil.rust#dc2626
keyword.operator.delete#dc2626
support.type.object.dom#1a1a1a
support.variable.dom,support.variable.property.dom#ea580c
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#1a1a1a
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp#dc2626
punctuation.separator.delimiter#1a1a1a
punctuation.separator.c,punctuation.separator.cpp#dc2626
support.type.posix-reserved.c,support.type.posix-reserved.cpp#1a1a1a
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#dc2626
variable.parameter.function.language.python#d97706
support.type.python#1a1a1a
keyword.operator.logical.python#dc2626
variable.parameter.function.python#d97706
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#1a1a1a
meta.function-call.generic.python#ea580c
constant.character.format.placeholder.other.python#d97706
keyword.operator#1a1a1a
keyword.operator.assignment.compound#dc2626
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#1a1a1a
keyword#dc2626
entity.name.namespace#b91c1c
variable#ea580c
variable.c#1a1a1a
variable.language#b91c1c
token.variable.parameter.java#1a1a1a
import.storage.java#b91c1c
token.package.keyword#dc2626
token.package#1a1a1a
entity.name.function, meta.require, support.function.any-method, variable.function#ea580c
entity.name.type.namespace#b91c1c
support.class, entity.name.type.class#b91c1c
entity.name.class.identifier.namespace.type#b91c1c
entity.name.class, variable.other.class.js, variable.other.class.ts#b91c1c
variable.other.class.php#ea580c
entity.name.type#b91c1c
keyword.control#dc2626
control.elements, keyword.operator.less#d97706
keyword.other.special-method#ea580c
storage#dc2626
token.storage#dc2626
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#dc2626
token.storage.type.java#b91c1c
support.function#1a1a1a
support.type.property-name#1a1a1a
support.constant.property-value#1a1a1a
support.constant.font-name#d97706
meta.tag#1a1a1a
string#d97706
entity.other.inherited-class#b91c1c
constant.other.symbol#1a1a1a
constant.numeric#d97706
constant#d97706
punctuation.definition.constant#d97706
entity.name.tag#dc2626
entity.other.attribute-name#ea580c
entity.other.attribute-name.html#b91c1c
string.quoted.double.html,string.quoted.single.html,string.template.html,punctuation.definition.string.begin.html,punctuation.definition.string.end.html#ea580c
entity.other.attribute-name.id#ea580cnormal
entity.other.attribute-name.class.css#ea580cnormal
meta.selector#dc2626
markup.heading#ea580c
markup.heading punctuation.definition.heading, entity.name.section#ea580c
keyword.other.unit#ea580c
markup.bold,todo.bold#d97706
punctuation.definition.bold#b91c1c
markup.italic, punctuation.definition.italic,todo.emphasis#dc2626
emphasis md#dc2626
entity.name.section.markdown#ea580c
punctuation.definition.heading.markdown#ea580c
punctuation.definition.list.begin.markdown#ea580c
markup.heading.setext#1a1a1a
punctuation.definition.bold.markdown#d97706
markup.inline.raw.markdown#d97706
markup.inline.raw.string.markdown#d97706
punctuation.definition.list.markdown#ea580c
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ea580c
beginning.punctuation.definition.list.markdown#ea580c
punctuation.definition.metadata.markdown#ea580c
markup.underline.link.markdown,markup.underline.link.image.markdown#dc2626
string.other.link.title.markdown,string.other.link.description.markdown#ea580c
string.regexp#1a1a1a
constant.character.escape#1a1a1a
punctuation.section.embedded, variable.interpolation#ea580c
punctuation.section.embedded.begin,punctuation.section.embedded.end#dc2626
invalid.illegal#b91c1c
invalid.illegal.bad-ampersand.html#1a1a1a
invalid.broken#b91c1c
invalid.deprecated#b91c1c
invalid.unimplemented#b91c1c
support.type.property-name.json#ea580c
support.type.property-name.json punctuation#ea580c
comment, punctuation.definition.comment#6b7280italic
markup.quote.markdown#6b7280
Orbital Frame Themes by Meastblue - VS Code Theme