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#404040
  • activityBar.background#000000
  • activityBar.border#404040
  • activityBar.foreground#f5f5f5
  • activityBar.inactiveForeground#999999
  • activityBarBadge.background#ff8500
  • activityBarBadge.foreground#1a1a1a
  • badge.background#cccccc
  • badge.foreground#1a1a1a
  • breadcrumb.activeSelectionForeground#f5f5f5
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#f5f5f5
  • breadcrumb.foreground#999999
  • button.background#ff8500
  • button.foreground#1a1a1a
  • button.hoverBackground#cc6600
  • button.secondaryBackground#666666
  • button.secondaryForeground#f5f5f5
  • button.secondaryHoverBackground#999999
  • checkbox.background#2d2d2d
  • checkbox.border#00000000
  • checkbox.foreground#f5f5f5
  • debugExceptionWidget.background#2d2d2d
  • debugExceptionWidget.border#f97316
  • debugToolBar.background#000
  • debugToolBar.border#00000000
  • diffEditor.border#00000000
  • diffEditor.insertedTextBackground#ff850024
  • diffEditor.removedTextBackground#dc262624
  • dropdown.background#2d2d2d
  • dropdown.border#00000000
  • dropdown.foreground#f5f5f5
  • editor.background#0d0d0d
  • editor.findMatchBackground#f97316
  • editor.findMatchBorder#ff8500
  • editor.findMatchHighlightBackground#dc262655
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#2d2d2d
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#f9731626
  • editor.foreground#f5f5f5
  • editor.hoverHighlightBackground#dc262640
  • editor.inactiveSelectionBackground#404040
  • editor.lineHighlightBackground#2d2d2d
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#f9731644
  • editor.selectionHighlightBackground#ff850034
  • editor.selectionHighlightBorder#cc6600
  • editor.wordHighlightBackground#666666b8
  • editor.wordHighlightStrongBackground#dc2626b8
  • editorBracketMatch.background#666666
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#cccccc
  • editorCursor.background#1a1a1a
  • editorCursor.foreground#ff8500
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#b91c1c
  • editorGroup.border#404040
  • editorGroup.emptyBackground#1a1a1a
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#111111
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#ff8500
  • editorGutter.background#0d0d0d
  • editorGutter.commentRangeForeground#666666
  • editorGutter.deletedBackground#b91c1c
  • editorGutter.foldingControlForeground#666666
  • editorGutter.modifiedBackground#dc2626
  • editorHoverWidget.background#2d2d2d
  • editorHoverWidget.border#666666
  • editorHoverWidget.foreground#e5e5e5
  • editorIndentGuide.activeBackground#999999
  • editorIndentGuide.background#404040
  • editorInfo.background#dc262600
  • editorInfo.border#dc262600
  • editorInfo.foreground#dc2626
  • editorLineNumber.activeForeground#999999
  • editorLineNumber.foreground#666666
  • editorLink.activeForeground#dc2626
  • editorMarkerNavigation.background#2d2d2d
  • editorMarkerNavigationError.background#b91c1c
  • editorMarkerNavigationInfo.background#dc2626
  • editorMarkerNavigationWarning.background#ff6b35
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#00000000
  • editorRuler.foreground#666666
  • editorSuggestWidget.background#2d2d2d
  • editorSuggestWidget.border#666666
  • editorSuggestWidget.foreground#e5e5e5
  • editorSuggestWidget.highlightForeground#ff8500
  • editorSuggestWidget.selectedBackground#f97316
  • editorWarning.background#ff6b3500
  • editorWarning.border#00000000
  • editorWarning.foreground#ff6b35
  • editorWhitespace.foreground#f9731650
  • editorWidget.background#404040
  • editorWidget.foreground#ffffff
  • editorWidget.resizeBorder#f97316
  • focusBorder#ff8500
  • foreground#e5e5e5
  • gitDecoration.addedResourceForeground#ff8500
  • gitDecoration.conflictingResourceForeground#ff8500
  • gitDecoration.deletedResourceForeground#b91c1c
  • gitDecoration.ignoredResourceForeground#999999
  • gitDecoration.modifiedResourceForeground#ff6b35
  • gitDecoration.stageDeletedResourceForeground#b91c1c
  • gitDecoration.stageModifiedResourceForeground#ff6b35
  • gitDecoration.submoduleResourceForeground#dc2626
  • gitDecoration.untrackedResourceForeground#ff8500
  • icon.foreground#e5e5e5
  • input.background#2d2d2d
  • input.border#cccccc
  • input.foreground#f5f5f5
  • input.placeholderForeground#999999
  • inputOption.activeBackground#dc2626
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#f5f5f5
  • list.activeSelectionBackground#f97316
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#1a1a1a
  • list.focusBackground#dc2626
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#404040
  • list.hoverForeground#f5f5f5
  • list.inactiveSelectionBackground#1a1a1a
  • list.inactiveSelectionForeground#f5f5f5
  • listFilterWidget.background#f97316
  • listFilterWidget.noMatchesOutline#b91c1c
  • listFilterWidget.outline#dc2626
  • menu.background#2d2d2d
  • menu.border#00000085
  • menu.foreground#e5e5e5
  • menu.selectionBackground#dc2626
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ff8500
  • menu.separatorBackground#cccccc
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#e5e5e5
  • merge.commonContentBackground#404040
  • merge.commonHeaderBackground#666666
  • merge.currentContentBackground#ff850033
  • merge.currentHeaderBackground#ff8500
  • merge.incomingContentBackground#dc262633
  • merge.incomingHeaderBackground#dc2626
  • minimap.background#0d0d0d
  • minimap.errorHighlight#b91c1c
  • minimap.findMatchHighlight#f97316
  • minimap.selectionHighlight#f9731642
  • minimap.warningHighlight#ff6b35
  • minimapGutter.addedBackground#ff8500
  • minimapGutter.deletedBackground#b91c1c
  • minimapGutter.modifiedBackground#dc2626
  • notificationCenter.border#00000000
  • notificationCenterHeader.background#404040
  • notificationCenterHeader.foreground#1a1a1a
  • notifications.background#404040
  • notifications.border#cccccc
  • notifications.foreground#ffffff
  • notificationsErrorIcon.foreground#b91c1c
  • notificationsInfoIcon.foreground#dc2626
  • notificationsWarningIcon.foreground#ff6b35
  • notificationToast.border#00000000
  • panel.background#111111
  • panel.border#1a1a1a
  • panelSection.border#1a1a1a
  • panelTitle.activeBorder#f5f5f5
  • panelTitle.activeForeground#f5f5f5
  • panelTitle.inactiveForeground#cccccc
  • peekView.border#ff8500
  • peekViewEditor.background#331a00
  • peekViewEditor.matchHighlightBackground#ff6b3599
  • peekViewEditor.matchHighlightBorder#ff6b35
  • peekViewEditorGutter.background#331a00
  • peekViewResult.background#2d2d2d
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#cccccc
  • peekViewResult.matchHighlightBackground#b91c1c
  • peekViewResult.selectionBackground#f9731633
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1a1a1a
  • peekViewTitleDescription.foreground#e5e5e5b3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#00000000
  • pickerGroup.foreground#f5f5f5
  • progressBar.background#ff8500
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#dc262666
  • scrollbarSlider.background#66666666
  • scrollbarSlider.hoverBackground#666666B3
  • selection.background#ff850056
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#e5e5e5
  • sideBar.background#111111
  • sideBar.border#1a1a1a
  • sideBar.dropBackground#1a1a1a
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#404040
  • sideBarSectionHeader.border#1a1a1a
  • sideBarSectionHeader.foreground#f5f5f5
  • sideBarTitle.foreground#f5f5f5
  • statusBar.background#1a0800
  • statusBar.debuggingBackground#f97316
  • statusBar.debuggingForeground#f5f5f5
  • statusBar.foreground#f5f5f5
  • statusBar.noFolderBackground#4d1f00
  • statusBar.noFolderForeground#f5f5f5
  • statusBarItem.activeBackground#ffffff25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#ff8500
  • statusBarItem.remoteForeground#1a1a1a
  • tab.activeBackground#0d0d0d
  • tab.activeBorder#00000000
  • tab.activeBorderTop#f5f5f5
  • tab.activeForeground#f5f5f5
  • tab.border#1a1a1a
  • tab.hoverBackground#404040
  • tab.hoverForeground#f5f5f5
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#999999
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#0000cd
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#4169e1
  • terminal.ansiBrightCyan#00bfff
  • terminal.ansiBrightGreen#32cd32
  • terminal.ansiBrightMagenta#9370db
  • terminal.ansiBrightRed#dc2626
  • terminal.ansiBrightWhite#f5f5f5
  • terminal.ansiBrightYellow#ff8500
  • terminal.ansiCyan#008b8b
  • terminal.ansiGreen#228b22
  • terminal.ansiMagenta#8b008b
  • terminal.ansiRed#b91c1c
  • terminal.ansiWhite#f5f5f5
  • terminal.ansiYellow#ff6b35
  • terminal.border#80808059
  • terminal.foreground#e5e5e5
  • terminal.selectionBackground#ffffff40
  • terminalCursor.background#ff8500
  • terminalCursor.foreground#ffffff
  • textLink.foreground#dc2626
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#e5e5e5
  • titleBar.border#00000000
  • titleBar.inactiveBackground#404040
  • titleBar.inactiveForeground#e5e5e599
  • tree.indentGuidesStroke#666666
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#00000000

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#ff8500
variable.other.generic-type.haskell#dc2626
storage.type.haskell#ff6b35
support.variable.magic.python#ff8500
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#f5f5f5
variable.parameter.function.language.special.self.python#f97316
storage.modifier.lifetime.rust#f5f5f5
support.function.std.rust#ff8500
entity.name.lifetime.rust#f97316
variable.language.rust#ff8500
support.constant.edge#dc2626
constant.other.character-class.regexp#ff8500
keyword.operator.quantifier.regexp#ff6b35
punctuation.definition.string.begin,punctuation.definition.string.end#ff6b35
variable.parameter.function#f5f5f5
comment markup.link#666666
markup.changed.diff#f97316
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#ff8500
markup.inserted.diff#ff6b35
markup.deleted.diff#ff8500
meta.function.c,meta.function.cpp#ff8500
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#f5f5f5
punctuation.separator.key-value#f5f5f5
keyword.operator.expression.import#ff8500
support.constant.math#f97316
support.constant.property.math#ff6b35
variable.other.constant#f97316
storage.type.annotation.java, storage.type.object.array.java#f97316
source.java#ff8500
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#f5f5f5
meta.method.java#ff8500
storage.modifier.import.java,storage.type.java,storage.type.generic.java#f97316
keyword.operator.instanceof.java#dc2626
meta.definition.variable.name.java#ff8500
keyword.operator.logical#f5f5f5
keyword.operator.bitwise#f5f5f5
keyword.operator.channel#f5f5f5
support.constant.property-value.scss,support.constant.property-value.css#ff6b35
keyword.operator.css,keyword.operator.scss,keyword.operator.less#f5f5f5
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#ff6b35
punctuation.separator.list.comma.css#f5f5f5
support.constant.color.w3c-standard-color-name.css#ff6b35
support.type.vendored.property-name.css#f5f5f5
support.module.node,support.type.object.module,support.module.node#f97316
entity.name.type.module#ff6b35
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#ff8500
support.constant.json#ff6b35
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#dc2626
support.type.object.console#ff8500
support.variable.property.process#ff6b35
entity.name.function,support.function.console#ff8500
keyword.operator.misc.rust#f5f5f5
keyword.operator.sigil.rust#dc2626
keyword.operator.delete#dc2626
support.type.object.dom#f5f5f5
support.variable.dom,support.variable.property.dom#ff8500
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#f5f5f5
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#f5f5f5
punctuation.separator.c,punctuation.separator.cpp#dc2626
support.type.posix-reserved.c,support.type.posix-reserved.cpp#f5f5f5
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#dc2626
variable.parameter.function.language.python#ff6b35
support.type.python#f5f5f5
keyword.operator.logical.python#dc2626
variable.parameter.function.python#ff6b35
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#f5f5f5
meta.function-call.generic.python#ff8500
constant.character.format.placeholder.other.python#ff6b35
keyword.operator#f5f5f5
keyword.operator.assignment.compound#dc2626
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#f5f5f5
keyword#dc2626
entity.name.namespace#f97316
variable#ff8500
variable.c#f5f5f5
variable.language#f97316
token.variable.parameter.java#f5f5f5
import.storage.java#f97316
token.package.keyword#dc2626
token.package#f5f5f5
entity.name.function, meta.require, support.function.any-method, variable.function#ff8500
entity.name.type.namespace#f97316
support.class, entity.name.type.class#f97316
entity.name.class.identifier.namespace.type#f97316
entity.name.class, variable.other.class.js, variable.other.class.ts#f97316
variable.other.class.php#ff8500
entity.name.type#f97316
keyword.control#dc2626
control.elements, keyword.operator.less#ff6b35
keyword.other.special-method#ff8500
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#f97316
support.function#f5f5f5
support.type.property-name#f5f5f5
support.constant.property-value#f5f5f5
support.constant.font-name#ff6b35
meta.tag#f5f5f5
string#ff6b35
entity.other.inherited-class#f97316
constant.other.symbol#f5f5f5
constant.numeric#ff6b35
constant#ff6b35
punctuation.definition.constant#ff6b35
entity.name.tag#dc2626
entity.other.attribute-name#ff8500
entity.other.attribute-name.html#f97316
string.quoted.double.html,string.quoted.single.html,string.template.html,punctuation.definition.string.begin.html,punctuation.definition.string.end.html#ff8500
entity.other.attribute-name.id#ff8500normal
entity.other.attribute-name.class.css#ff8500normal
meta.selector#dc2626
markup.heading#ff8500
markup.heading punctuation.definition.heading, entity.name.section#ff8500
keyword.other.unit#ff8500
markup.bold,todo.bold#ff6b35
punctuation.definition.bold#f97316
markup.italic, punctuation.definition.italic,todo.emphasis#dc2626
emphasis md#dc2626
entity.name.section.markdown#ff8500
punctuation.definition.heading.markdown#ff8500
punctuation.definition.list.begin.markdown#ff8500
markup.heading.setext#f5f5f5
punctuation.definition.bold.markdown#ff6b35
markup.inline.raw.markdown#ff6b35
markup.inline.raw.string.markdown#ff6b35
punctuation.definition.list.markdown#ff8500
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ff8500
beginning.punctuation.definition.list.markdown#ff8500
punctuation.definition.metadata.markdown#ff8500
markup.underline.link.markdown,markup.underline.link.image.markdown#dc2626
string.other.link.title.markdown,string.other.link.description.markdown#ff8500
string.regexp#f5f5f5
constant.character.escape#f5f5f5
punctuation.section.embedded, variable.interpolation#ff8500
punctuation.section.embedded.begin,punctuation.section.embedded.end#dc2626
invalid.illegal#b91c1c
invalid.illegal.bad-ampersand.html#f5f5f5
invalid.broken#b91c1c
invalid.deprecated#b91c1c
invalid.unimplemented#b91c1c
support.type.property-name.json#ff8500
support.type.property-name.json punctuation#ff8500
comment, punctuation.definition.comment#8b000080italic
markup.quote.markdown#8b000080