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#1d1d1d
  • activityBar.background#000000
  • activityBar.border#00000000
  • activityBar.foreground#ff9d00
  • activityBar.inactiveForeground#ffffffbb
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#ff9d00
  • badge.background#ffffff
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#1d1d1d
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#4c8bb6
  • button.background#0f0f0f
  • button.foreground#ffffff
  • button.hoverBackground#004e82
  • button.secondaryBackground#323232
  • button.secondaryForeground#e8e8e8
  • button.secondaryHoverBackground#4988d7
  • checkbox.background#191919
  • checkbox.border#e4616100
  • checkbox.foreground#b0b0b0
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#47474700
  • debugToolBar.background#0f0f0f
  • debugToolBar.border#47474700
  • diffEditor.border#565656
  • diffEditor.insertedTextBackground#3ba5002e
  • diffEditor.insertedTextBorder#964a4a00
  • diffEditor.removedTextBackground#d1070733
  • diffEditor.removedTextBorder#38383800
  • dropdown.background#191919
  • dropdown.border#e4616100
  • dropdown.foreground#b0b0b0
  • editor.background#0f0f0f
  • editor.findMatchBackground#30588a
  • editor.findMatchBorder#74879f00
  • editor.findMatchHighlightBackground#ffffff52
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#c7c7c726
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#11152a8b
  • editor.foreground#ababab
  • editor.hoverHighlightBackground#ffffff40
  • editor.inactiveSelectionBackground#0f0f0f
  • editor.lineHighlightBackground#ffffff0c
  • editor.lineHighlightBorder#28282800
  • editor.rangeHighlightBackground#0070ff24
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#323232
  • editor.selectionHighlightBackground#cfd9ff16
  • editor.selectionHighlightBorder#495f7700
  • editor.wordHighlightBackground#4d4d4db8
  • editor.wordHighlightBorder#ff000000
  • editor.wordHighlightStrongBackground#515151b8
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketHighlight.foreground1#aeaeae
  • editorBracketHighlight.foreground2#c057c6
  • editorBracketHighlight.foreground3#ffdd00
  • editorBracketHighlight.foreground4#00c0c0
  • editorBracketHighlight.foreground5#ff8c00
  • editorBracketHighlight.foreground6#00e1ff
  • editorBracketHighlight.unexpectedBracket.foreground#f00
  • editorBracketMatch.background#ff48003a
  • editorBracketMatch.border#57ad5491
  • editorCodeLens.foreground#32de1a
  • editorCursor.background#ffffff
  • editorCursor.foreground#797979
  • editorError.background#ff010128
  • editorError.border#00000000
  • editorError.foreground#ff0000
  • editorGroup.border#5c5c5c24
  • editorGroup.dropBackground#ffff0022
  • editorGroup.emptyBackground#151515
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#007107
  • editorGutter.background#0f0f0f
  • editorGutter.commentRangeForeground#ff8f00
  • editorGutter.deletedBackground#d54701
  • editorGutter.foldingControlForeground#ff8f00
  • editorGutter.modifiedBackground#995d00
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#000000
  • editorHoverWidget.foreground#bababa
  • editorIndentGuide.activeBackground1#996515
  • editorIndentGuide.background1#1a4d8485
  • editorInfo.background#a97b4030
  • editorInfo.border#669ec000
  • editorInfo.foreground#197dff
  • editorLineNumber.activeForeground#ffb300
  • editorLineNumber.foreground#4b4b4b
  • editorLink.activeForeground#b034e8
  • editorMarkerNavigation.background#000000
  • editorMarkerNavigationError.background#666666
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.background#000000
  • editorOverviewRuler.border#7f7f7f00
  • editorRuler.foreground#494949
  • editorSuggestWidget.background#252526
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#0097fb
  • editorSuggestWidget.selectedBackground#062f4a
  • editorUnnecessaryCode.opacity#000000c0
  • editorWarning.background#a97b4030
  • editorWarning.border#ffffff00
  • editorWarning.foreground#a95d0c
  • editorWhitespace.foreground#005782b9
  • editorWidget.background#000000
  • editorWidget.foreground#bababa
  • editorWidget.resizeBorder#666666
  • focusBorder#2384c4
  • foreground#d5d5d5
  • gitDecoration.addedResourceForeground#8fea82
  • gitDecoration.conflictingResourceForeground#ff7523
  • gitDecoration.deletedResourceForeground#861501
  • gitDecoration.ignoredResourceForeground#4d4d4d
  • gitDecoration.modifiedResourceForeground#ffe2bd
  • gitDecoration.stageDeletedResourceForeground#b41b00
  • gitDecoration.stageModifiedResourceForeground#ffe6c1
  • gitDecoration.submoduleResourceForeground#3599f7
  • gitDecoration.untrackedResourceForeground#0da300
  • icon.foreground#d5d5d5
  • input.background#0f0f0f
  • input.border#6b6b6b
  • input.foreground#b0b0b0
  • input.placeholderForeground#666666
  • inputOption.activeBackground#404f9800
  • inputOption.activeBorder#425e7100
  • inputOption.activeForeground#00ff10
  • list.activeSelectionBackground#094771
  • list.activeSelectionForeground#8ecfff
  • list.dropBackground#3b3b3b4a
  • list.focusBackground#3f3f3f
  • list.focusForeground#ffffff
  • list.highlightForeground#39aefb
  • list.hoverBackground#414141
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#323232
  • list.inactiveSelectionForeground#ffffff
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#7d0b00
  • listFilterWidget.outline#00000000
  • menu.background#242424
  • menu.border#00000000
  • menu.foreground#c9c9c9
  • menu.selectionBackground#ffb30050
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#3d3d3d7a
  • menubar.selectionBackground#0f0f0f
  • menubar.selectionBorder#8e5a5a00
  • menubar.selectionForeground#ffffff
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#383838
  • merge.currentContentBackground#27403B
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#28384B
  • merge.incomingHeaderBackground#395F8F
  • minimap.background#151515
  • minimap.errorHighlight#ff0000
  • minimap.findMatchHighlight#30588a
  • minimap.selectionHighlight#323232
  • minimap.warningHighlight#a95d0c
  • minimapGutter.addedBackground#007107
  • minimapGutter.deletedBackground#d54701
  • minimapGutter.modifiedBackground#995d00
  • notificationCenter.border#47474700
  • notificationCenterHeader.background#151515
  • notificationCenterHeader.foreground#c7c7c7
  • notifications.background#2e2e2e
  • notifications.border#00000000
  • notifications.foreground#ffffff
  • notificationsErrorIcon.foreground#ff2b00
  • notificationsInfoIcon.foreground#40a5ff
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#47474700
  • panel.background#000000
  • panel.border#00000000
  • panelSection.border#b2b2b259
  • panelTitle.activeBorder#00abff
  • panelTitle.activeForeground#00abff
  • panelTitle.inactiveForeground#ffffffd7
  • peekView.border#007acc
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditor.matchHighlightBorder#ee931e
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#252526
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#00000000
  • pickerGroup.foreground#3794ff
  • progressBar.background#ffbf00
  • scrollbar.shadow#1d1d1d
  • scrollbarSlider.activeBackground#666666
  • scrollbarSlider.background#383838
  • scrollbarSlider.hoverBackground#434343
  • selection.background#1579d1
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#d5d5d5
  • sideBar.background#1d1d1d
  • sideBar.border#00000000
  • sideBar.dropBackground#3b3b3b4a
  • sideBar.foreground#bcbcbc
  • sideBarSectionHeader.background#ff060600
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#d7d7d7
  • sideBarTitle.foreground#8e8e8e
  • statusBar.background#303030
  • statusBar.border#0800ff00
  • statusBar.debuggingBackground#b24109
  • statusBar.debuggingForeground#ffcb00
  • statusBar.foreground#848484
  • statusBar.noFolderBackground#521c60
  • statusBar.noFolderForeground#a3a3a3
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.errorBackground#840000
  • statusBarItem.errorForeground#ff4a4a
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#94008b
  • statusBarItem.remoteForeground#ffef00
  • statusBarItem.warningBackground#be7500
  • statusBarItem.warningForeground#ffd752
  • tab.activeBackground#1d1d1d
  • tab.activeBorder#00000000
  • tab.activeBorderTop#ff9900
  • tab.activeForeground#fbfbfb
  • tab.border#25252600
  • tab.hoverBackground#212121
  • tab.hoverBorder#ffffff
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#2a2a2a
  • terminal.ansiBlue#0057b8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#6ad123
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#e42319
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#ffff68
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#317718
  • terminal.ansiMagenta#e42ee4
  • terminal.ansiRed#cd5631
  • terminal.ansiWhite#a3a3a3
  • terminal.ansiYellow#f7dc01
  • terminal.border#b2b2b259
  • terminal.foreground#b0b0b0
  • terminal.selectionBackground#ffffff28
  • terminalCursor.background#5c5c5c
  • terminalCursor.foreground#ffffff
  • textLink.foreground#be7dff
  • titleBar.activeBackground#0d0d0d
  • titleBar.activeForeground#ff9d00
  • titleBar.border#fd7a7a00
  • titleBar.inactiveBackground#1d1d1d
  • titleBar.inactiveForeground#7a7a7a
  • tree.indentGuidesStroke#303030
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.python#989898
keyword.control.conditional.python, keyword.control.repeat.python#fad749italic
keyword.control.exception.python#ffd000italic
keyword.operator.logical.python#ffffff
keyword.control.import.python, keyword.control.context.python#71c4c0italic
, keyword.operator.unpacking.parameter.python#fff200
keyword.control.flowcont.python#ff0000
keyword.other.python#ff0000
keyword.control.secondary.python#a4a4a4italic
constant.language.false.python#ff6e6eitalic bold
constant.language.true.python#8cde82italic bold
constant.language.none.python#4b4b4bitalic bold
support.type.exception.python#ff3300italic bold
storage.modifier.python#00ffeaitalic bold
constant.other.caps.python#ffffffitalic bold
variable.parameter.function.language.python variable.parameter.function.language.special.cls.python, variable.parameter.function.language.python variable.parameter.function.language.special.self.python, support.function.magic.python, support.variable.magic.python, variable.language.special.cls.python, variable.language.special.self.python#58bcffitalic bold
meta.attribute.python#f5f5f5
storage.type.function.python, punctuation.section.function.begin.python, storage.type.class.python, punctuation.section.class.begin.python, keyword.control.out.python, punctuation.definition.parameters.begin.python, punctuation.definition.parameters.end.python, punctuation.separator.parameters.python#ff7214italic
meta.function.python entity.name.function.python, entity.name.type.class.python#ffffff
punctuation.separator.annotation.python, punctuation.separator.annotation.result.python#89ff76
meta.function-call.python#dcdcdc
support.function.builtin.python#eeca94
keyword.operator.arithmetic.python#00c8ff
keyword.operator.comparison.python#e9e9e9
keyword.operator.assignment.python#ffffff
string.quoted.docstring.multi.python#d1d1d1
comment.line.number-sign.python#24a936
keyword.codetag.notation.python#ffe600
punctuation.definition.comment.python#225500
punctuation.definition.docstring.begin.python, punctuation.definition.docstring.end.python#444444
string.quoted.single.python, string.quoted.multi.python, support.type.str.python, punctuation.definition.string.begin.python, punctuation.definition.string.end.python#3e9a58
support.type.num.python, constant.numeric.float.python, constant.numeric.hex.python, constant.numeric.oct.python#aee0ff
support.type.list.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python#49a6a0
support.type.dict.python, punctuation.definition.dict.begin.python, punctuation.definition.dict.end.python, punctuation.separator.dict.python#b383f2
support.type.tup.python, punctuation.parenthesis.end.python, punctuation.parenthesis.begin.python#fff712
support.type.bytes.python, support.type.obj.python#ffffff
support.type.alt.python, constant.numeric.dec.python, constant.numeric.python, constant.numeric.bin.python#cccccc
constant.character.format.placeholder.other.python, meta.fstring.python,meta.format.brace.python, string.interpolated.python#ffffff
meta.function.python meta.function.parameters.python variable.parameter.function.language.python, variable.parameter.function-call.python#bcdcf5
text.html.markdown#818181
punctuation.definition.heading.markdown, markup.heading.markdown#ffffff
heading.3.markdown, heading.2.markdown, heading.1.markdownbold underline
markup.bold.markdownbold
markup.strikethrough.markdownstrikethrough
markup.italic.markdownitalic
meta.separator.markdown#5c5c5c
markup.quote.markdown#969696
punctuation.definition.quote.begin.markdown#fcbb07fc
markup.list.unnumbered.markdown punctuation.definition.list.begin.markdown#ffbf00
markup.list.unnumbered.markdown markup.list.unnumbered.markdown punctuation.definition.list.begin.markdown#00aeff
markup.list.numbered.markdown punctuation.definition.list.begin.markdown#ffbf00
fenced_code.block.language.markdown#ffae00
markup.raw.block.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown, markup.inline.raw.string.markdown#464646
punctuation.separator.table.markdown#323232
punctuation.definition.table.markdown#323232
meta.link.inline.markdown#8f48da
string.other.link.title.markdown#ce9bfd
meta.image.inline.markdown#502473
string.other.link.description.markdown#ce9bfd
emphasisitalic
strongbold
header#1010f9
comment#a48a52
constant.language#45ae37bold underline
constant.numeric#ffffff
constant.regexp#bfbfbf
constant.other.color.rgb-value.css, constant.numeric.color.rgb-value.scss, constant.other.rgb-value.css#ff0000
entity.name.tag, entity.name.tag.css#ffae00italic
meta.preprocessor.string#ff4800
meta.preprocessor.numeric#ff0000
meta.structure.dictionary.key.python#814747
meta.diff.header#ff0000
storage#ff0000
storage.type#ffaa00
storage.modifier#ff0000
string#6ecff5
string.tag#ff0000
string.value#c92b2b
string.regexp#d4d4d4
punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts#ff1313
support.type.property-name#20c4ffitalic
keyword#ff0000
keyword.control#d6c8c4
keyword.operator#ffffff
keyword.operator.new, keyword.operator.expression#ff0000
keyword.other.unit#ababab
punctuation.section.embedded.metatag.begin.php, punctuation.section.embedded.metatag.end.php#fc0000
support.function.git-rebase#a4a4a4
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, storage.modifier.package.java#d4d4d4
variable.language#008cff
entity.name.function, support.function#49c8ff
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#008f1d
meta.return.type, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json#e3aa00
keyword.control#ff5affitalic
variable, meta.definition.variable.name, support.variable#aeaeae
meta.object-literal.key, meta.object-literal.key entity.name.function#00a6ff
constant.other.color.rgb-value.css, constant.other.rgb-value.css, meta.property-value.css support.function, meta.property-value.css support, constant.numeric.color.rgb-value.scss, constant.rgb-value.scss, meta.property-value.scss support.function, meta.property-value.scss support#23b73c