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#141414
  • activityBar.foreground#E4E4E48D
  • activityBarBadge.background#88C0D0
  • activityBarBadge.foreground#141414
  • badge.background#88C0D0
  • badge.foreground#141414
  • breadcrumb.activeSelectionForeground#E4E4E4EB
  • breadcrumb.background#181818
  • breadcrumb.foreground#E4E4E48D
  • breadcrumbPicker.background#141414
  • button.background#81A1C1
  • button.foreground#191c22
  • button.hoverBackground#87A6C4
  • button.secondaryBackground#626262
  • button.secondaryForeground#E4E4E4EB
  • button.secondaryHoverBackground#818181
  • charts.green#3FA266
  • charts.red#E34671
  • charts.yellow#F1B467
  • debugExceptionWidget.background#181818
  • debugExceptionWidget.border#141414
  • debugToolBar.background#141414
  • diffEditor.diagonalFill#E4E4E413
  • diffEditor.insertedLineBackground#3FA26633
  • diffEditor.insertedTextBackground#3FA26622
  • diffEditor.removedLineBackground#B8004933
  • diffEditor.removedTextBackground#B8004922
  • dropdown.background#181818
  • dropdown.border#E4E4E413
  • dropdown.foreground#E4E4E4EB
  • editor.background#181818
  • editor.findMatchBackground#88C0D066
  • editor.findMatchHighlightBackground#88C0D044
  • editor.findRangeHighlightBackground#E4E4E411
  • editor.foreground#E4E4E4EB
  • editor.hoverHighlightBackground#E4E4E41E
  • editor.inactiveSelectionBackground#40404077
  • editor.lineHighlightBackground#262626
  • editor.lineHighlightBorder#262626
  • editor.rangeHighlightBackground#40404052
  • editor.selectionBackground#40404099
  • editor.selectionHighlightBackground#404040CC
  • editor.snippetFinalTabstopHighlightBorder#CCCCCC
  • editor.snippetTabstopHighlightBackground#CCCCCC55
  • editor.wordHighlightBackground#E4E4E41E
  • editor.wordHighlightStrongBackground#E4E4E430
  • editorBracketMatch.background#E4E4E41E
  • editorBracketMatch.border#14141400
  • editorCodeLens.foreground#E4E4E442
  • editorCursor.foreground#E4E4E4EB
  • editorError.border#E3467100
  • editorError.foreground#E34671
  • editorGroup.border#E4E4E413
  • editorGroup.dropBackground#E4E4E411
  • editorGroup.emptyBackground#141414
  • editorGroupHeader.noTabsBackground#141414
  • editorGroupHeader.tabsBackground#141414
  • editorGroupHeader.tabsBorder#E4E4E413
  • editorGutter.addedBackground#3FA266
  • editorGutter.background#181818
  • editorGutter.deletedBackground#E34671
  • editorGutter.modifiedBackground#D2943E
  • editorHoverWidget.background#181818
  • editorHoverWidget.border#E4E4E413
  • editorHoverWidget.foreground#E4E4E4EB
  • editorIndentGuide.activeBackground1#E4E4E430
  • editorIndentGuide.background1#E4E4E413
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#E4E4E442
  • editorInlayHint.parameterBackground#00000000
  • editorInlayHint.parameterForeground#E4E4E442
  • editorInlayHint.typeBackground#00000000
  • editorInlayHint.typeForeground#E4E4E442
  • editorLineNumber.activeForeground#E4E4E4EB
  • editorLineNumber.foreground#E4E4E442
  • editorLink.activeForeground#E4E4E4EB
  • editorMarkerNavigation.background#ffffff70
  • editorMarkerNavigationError.background#E34671C0
  • editorMarkerNavigationWarning.background#CCCCCC
  • editorOverviewRuler.addedForeground#3FA26684
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#E3467184
  • editorOverviewRuler.errorForeground#B80049
  • editorOverviewRuler.findMatchForeground#E4E4E411
  • editorOverviewRuler.modifiedForeground#B9790084
  • editorRuler.foreground#E4E4E442
  • editorSuggestWidget.background#141414
  • editorSuggestWidget.border#E4E4E413
  • editorSuggestWidget.foreground#E4E4E4EB
  • editorSuggestWidget.highlightForeground#E4E4E4EB
  • editorSuggestWidget.selectedBackground#343434
  • editorWarning.border#E4E4E400
  • editorWarning.foreground#F1B467
  • editorWhitespace.foreground#505050B3
  • editorWidget.background#141414
  • editorWidget.resizeBorder#E4E4E426
  • errorForeground#E34671
  • extensionButton.prominentBackground#626262
  • extensionButton.prominentForeground#E4E4E4EB
  • extensionButton.prominentHoverBackground#818181
  • focusBorder#E4E4E426
  • foreground#E4E4E4EB
  • gitDecoration.addedResourceForeground#70B489
  • gitDecoration.deletedResourceForeground#FC6B83
  • gitDecoration.ignoredResourceForeground#E4E4E45E
  • gitDecoration.modifiedResourceForeground#F1B467
  • gitDecoration.untrackedResourceForeground#88C0D0
  • gitlens.trailingLineForegroundColor#E4E4E48D
  • input.background#E4E4E40A
  • input.border#E4E4E413
  • input.foreground#E4E4E4EB
  • input.placeholderForeground#E4E4E45E
  • inputOption.activeBackground#E4E4E41E
  • inputOption.activeBorder#E4E4E400
  • inputValidation.errorBackground#141414
  • inputValidation.errorBorder#E34671
  • inputValidation.errorForeground#FC6B83
  • inputValidation.infoBackground#141414
  • inputValidation.infoBorder#88C0D0
  • inputValidation.infoForeground#88C0D0
  • inputValidation.warningBackground#141414
  • inputValidation.warningBorder#D2943E
  • inputValidation.warningForeground#F1B467
  • list.activeSelectionBackground#E4E4E41E
  • list.activeSelectionForeground#E4E4E4EB
  • list.deemphasizedForeground#E4E4E48D
  • list.dropBackground#E4E4E411
  • list.errorForeground#FC6B83
  • list.focusBackground#E4E4E41E
  • list.focusForeground#E4E4E4EB
  • list.highlightForeground#88C0D0
  • list.hoverBackground#E4E4E411
  • list.hoverForeground#E4E4E4EB
  • list.inactiveSelectionBackground#E4E4E411
  • list.inactiveSelectionForeground#E4E4E4EB
  • list.invalidItemForeground#E4E4E45E
  • list.warningForeground#F1B467
  • menu.background#141414
  • menu.border#E4E4E413
  • menu.foreground#E4E4E4EB
  • menu.separatorBackground#E4E4E413
  • menubar.selectionBackground#E4E4E411
  • merge.border#2A2A2A00
  • merge.currentContentBackground#88C0D04D
  • merge.currentHeaderBackground#88C0D066
  • merge.incomingContentBackground#3FA2664D
  • merge.incomingHeaderBackground#3FA26666
  • minimap.background#181818
  • minimap.errorHighlight#CD2A4F
  • minimap.findMatchHighlight#88C0D044
  • minimap.selectionHighlight#E4E4E411
  • minimap.warningHighlight#ea7620
  • minimapGutter.addedBackground#3FA266
  • minimapGutter.deletedBackground#E34671
  • minimapGutter.modifiedBackground#D2943E
  • notificationLink.foreground#88C0D0
  • notifications.background#141414
  • notifications.foreground#E4E4E4EB
  • panel.background#141414
  • panel.border#E4E4E413
  • panelTitle.activeBorder#E4E4E400
  • panelTitle.activeForeground#E4E4E4EB
  • panelTitle.inactiveForeground#E4E4E48D
  • peekView.border#E4E4E442
  • peekViewEditor.background#141414
  • peekViewEditor.matchHighlightBackground#88C0D044
  • peekViewEditorGutter.background#141414
  • peekViewResult.background#141414
  • peekViewResult.fileForeground#E4E4E4EB
  • peekViewResult.lineForeground#E4E4E48D
  • peekViewResult.matchHighlightBackground#88C0D044
  • peekViewResult.selectionBackground#343434
  • peekViewResult.selectionForeground#E4E4E4EB
  • peekViewTitle.background#242424
  • peekViewTitleDescription.foreground#E4E4E4EB
  • peekViewTitleLabel.foreground#E4E4E4EB
  • pickerGroup.border#E4E4E41C
  • pickerGroup.foreground#E4E4E4EB
  • progressBar.background#3FA266
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#E4E4E41E
  • scrollbarSlider.background#E4E4E411
  • scrollbarSlider.hoverBackground#E4E4E41E
  • selection.background#E4E4E430
  • sideBar.background#141414
  • sideBar.border#E4E4E413
  • sideBar.foreground#E4E4E48D
  • sideBarSectionHeader.background#141414
  • sideBarSectionHeader.foreground#E4E4E442
  • sideBarTitle.foreground#E4E4E48D
  • statusBar.background#141414
  • statusBar.border#E4E4E413
  • statusBar.debuggingBackground#E4E4E41C
  • statusBar.debuggingForeground#E4E4E4EB
  • statusBar.foreground#E4E4E45E
  • statusBar.noFolderBackground#141414
  • statusBar.noFolderForeground#E4E4E4EB
  • statusBarItem.activeBackground#E4E4E41E
  • statusBarItem.hoverBackground#E4E4E411
  • statusBarItem.prominentBackground#E4E4E411
  • statusBarItem.prominentHoverBackground#E4E4E41E
  • statusBarItem.remoteBackground#141414
  • statusBarItem.remoteForeground#E4E4E48D
  • tab.activeBackground#181818
  • tab.activeBorder#181818
  • tab.activeBorderTop#E4E4E400
  • tab.activeForeground#E4E4E4EB
  • tab.border#E4E4E413
  • tab.hoverBackground#E4E4E400
  • tab.inactiveBackground#141414
  • tab.inactiveForeground#E4E4E442
  • tab.unfocusedActiveBorder#181818
  • tab.unfocusedActiveForeground#E4E4E48D
  • tab.unfocusedHoverBackground#2A2A2AB3
  • tab.unfocusedHoverBorder#88C0D000
  • tab.unfocusedInactiveForeground#E4E4E48D
  • terminal.ansiBlack#242424
  • terminal.ansiBlue#81A1C1
  • terminal.ansiBrightBlack#E4E4E442
  • terminal.ansiBrightBlue#87A6C4
  • terminal.ansiBrightCyan#88C0D0
  • terminal.ansiBrightGreen#70B489
  • terminal.ansiBrightMagenta#B48EAD
  • terminal.ansiBrightRed#FC6B83
  • terminal.ansiBrightWhite#E4E4E4
  • terminal.ansiBrightYellow#F1B467
  • terminal.ansiCyan#88C0D0
  • terminal.ansiGreen#3FA266
  • terminal.ansiMagenta#B48EAD
  • terminal.ansiRed#FC6B83
  • terminal.ansiWhite#E4E4E4
  • terminal.ansiYellow#D2943E
  • terminal.background#141414
  • terminal.foreground#E4E4E4EB
  • terminal.selectionBackground#E4E4E41E
  • terminalCursor.background#141414
  • terminalCursor.foreground#E4E4E4EB
  • textLink.activeForeground#87A6C4
  • textLink.foreground#81A1C1
  • textPreformat.foreground#88C0D0
  • textSeparator.foreground#88C0D0
  • titleBar.activeBackground#141414
  • titleBar.activeForeground#E4E4E484
  • titleBar.border#E4E4E413
  • titleBar.inactiveBackground#141414
  • titleBar.inactiveForeground#E4E4E45E
  • tree.inactiveIndentGuidesStroke#E4E4E413
  • tree.indentGuidesStroke#E4E4E430
  • walkThrough.embeddedEditorBackground#141414
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string.quoted.binary.single.python#a8cc7c
constant.language.false.cpp, constant.language.true.cpp#82d2ce
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#d6d6dd
keyword.control.directive#a8cc7c
constant.other.ellipsis.python#CCCCCC
variable.other.generic-type.haskell#82D2CE
punctuation.definition.tag#A4A4A4
storage.type.haskell#f8c762
support.variable.magic.python#d6d6dd
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#d6d6dd
variable.parameter.function.language.special.self.python#efb080
variable.language.this.cpp#82d2ce
storage.modifier.lifetime.rust#d6d6dd
support.function.std.rust#aaa0fa
entity.name.lifetime.rust#efb080
variable.language.rust#d6d6dd
support.constant.edge#82D2CE
keyword.operator.quantifier.regexp#f8c762
string.regexp constant.character.escape#d6d6dd
keyword.operator.negation.regexp, keyword.operator.alternation.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#f8c762
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, support.other.parenthesis.regexp#efb080
constant.other.placeholder, constant.character#B3003F
constant, entity.name.constant, variable.other.constant, variable.language#206595
constant.numeric#ebc88d
support.constant#f8c762
variable.language#CC7C8A
support.variable#206595
variable.other.readwrite#87C3FF
variable#d6d6dd
keyword#82D2CE
entity.name.namespace#CCCCCC
entity.name.function, meta.require, support.function, variable.function#efb080
entity.name.type.namespace#efb080
support.class, entity.name.type.class#87c3ff
entity.name.class, variable.other.class.js, variable.other.class.ts, entity.name.class.identifier.namespace.type#efb080
variable.other.class.php#d6d6dd
entity.name.type#efb080
keyword.control.directive.include.cpp#a8cc7c
control.elements, keyword.operator.less#f8c762
keyword.other.special-method#aaa0fa
storage, token.storage#82d2ce
storage.modifier.reference, storage.modifier.pointer#CCCCCC
token.storage.type.java#efb080
support.function#efb080
meta.property-name.css#87c3ff
meta.tag#fad075
entity.other.inherited-class#efb080
constant.other.symbol#d6d6dd
constant.other.color#ebc88d
punctuation.definition.constant#f8c762
entity.name.tag.template, entity.name.tag.script, entity.name.tag.style#AF9CFF
entity.name.tag.html#87c3ff
meta.property-value.css#e394dc
entity.other.attribute-name#aaa0fa
entity.other.attribute-name.id#aaa0fa
entity.other.attribute-name.class.css#f8c762
meta.selector#82D2CE
markup.heading#d6d6dd
markup.heading punctuation.definition.heading, entity.name.section#aaa0fa
keyword.other.unit#ebc88d
markup.bold,todo.bold#f8c762
punctuation.definition.bold#efb080
markup.italic, punctuation.definition.italic,todo.emphasis#82D2CE
emphasis md#82D2CE
entity.name.section.markdown#d6d6dd
punctuation.definition.heading.markdown#d6d6dd
markup.heading.setext#d6d6dd
punctuation.definition.bold.markdown#f8c762
markup.inline.raw.markdown, markup.inline.raw.string.markdown#e394dc
punctuation.definition.list.begin.markdown, punctuation.definition.list.markdown, beginning.punctuation.definition.list.markdown#d6d6dd
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#d6d6dd
punctuation.definition.metadata.markdown#d6d6dd
markup.underline.link.markdown,markup.underline.link.image.markdown#82D2CE
string.other.link.title.markdown,string.other.link.description.markdown#aaa0fa
string.regexp#d6d6dd
constant.character.escape#d6d6dd
variable.interpolation#d6d6dd
punctuation.section.embedded.begin,punctuation.section.embedded.end#82D2CE
invalid.illegal, invalid.illegal.bad-ampersand.html, invalid.broken, invalid.deprecated, invalid.unimplemented#d6d6dd
source.json meta.structure.dictionary.json > string.quoted.json#d6d6dd
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#d6d6dd
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#e394dc
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#d6d6dd
support.type.property-name.json#82d2ce
entity.name.tag.laravel-blade, support.constant.laravel-blade#82D2CE
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#efb080
keyword.operator.error-control.php#82D2CE
keyword.operator.type.php#82D2CE
punctuation.section.array.begin.php#d6d6dd
punctuation.section.array.end.php#d6d6dd
invalid.illegal.non-null-typehinted.php#F14C4C
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#efb080
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#aaa0fa
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php#d6d6dd
support.constant.core.rust#f8c762
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#f8c762
entity.name.goto-label.php,support.other.php#aaa0fa
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#d6d6dd
keyword.operator.regexp.php#82D2CE
keyword.operator.comparison.php#d6d6dd
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#82D2CE
meta.function.decorator.python, punctuation.definition.decorator.python, entity.name.function.decorator.python#a8cc7c
support.token.decorator.python,meta.function.decorator.identifier.python#d6d6dd
function.brace#d6d6dd
function.parameter, function.parameter.ruby, function.parameter.cs#d6d6dd
constant.language.symbol.ruby#d6d6dd
rgb-value#d6d6dd
inline-color-decoration rgb-value#f8c762
less rgb-value#f8c762
selector.sass#d6d6dd
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#82D2CE
block.scope.end,block.scope.begin#d6d6dd
storage.type.cs#efb080
entity.name.variable.local.cs#d6d6dd
token.info-token#aaa0fa
token.warn-token#f8c762
token.error-token#F14C4C
token.debug-token#82D2CE
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#82D2CE
meta.template.expression#d6d6dd
keyword.operator.module#82D2CE
support.type.type.flowtype#aaa0fa
support.type.primitive#efb080
meta.property.object#d6d6dd
variable.parameter.function.js#d6d6dd
keyword.other.template.begin, keyword.other.template.end, keyword.other.substitution.begin, keyword.other.substitution.end#e394dc
keyword.operator.assignment#d6d6dd
keyword.operator.assignment.go#efb080
keyword.operator.arithmetic.go, keyword.operator.address.go#82D2CE
entity.name.package.go#efb080
support.type.prelude.elm#d6d6dd
support.constant.elm#f8c762
punctuation.quasi.element#82D2CE
constant.character.entity#d6d6dd
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#d6d6dd
entity.global.clojure#efb080
meta.symbol.clojure#d6d6dd
constant.keyword.clojure#d6d6dd
meta.arguments.coffee, variable.parameter.function.coffee#d6d6dd
source.ini#e394dc
meta.scope.prerequisites.makefile#d6d6dd
source.makefile#efb080
storage.modifier.import.groovy#efb080
meta.method.groovy#aaa0fa
meta.definition.variable.name.groovy#d6d6dd
meta.definition.class.inherited.classes.groovy#e394dc
support.variable.semantic.hlsl#efb080
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl#82D2CE
text.variable, text.bracketed#d6d6dd
support.type.swift, support.type.vb.asp#efb080
entity.name.function.xi#efb080
entity.name.class.xi#d6d6dd
constant.character.character-class.regexp.xi#d6d6dd
constant.regexp.xi#82D2CE
keyword.control.xi#d6d6dd
invalid.xi#d6d6dd
beginning.punctuation.definition.quote.markdown.xi#e394dc
beginning.punctuation.definition.list.markdown.xi#E4E4E45E
constant.character.xi#aaa0fa
accent.xi#aaa0fa
wikiword.xi#f8c762
constant.other.color.rgb-value.xi#d6d6dd
punctuation.definition.tag.xi#E4E4E45E
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#efb080
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#d6d6dd
meta.brace.square#d6d6dd
comment, punctuation.definition.comment, comment.line.double-slash, comment.block.documentation#E4E4E45Eitalic
markup.quote.markdown#E4E4E45E
punctuation.definition.block.sequence.item.yaml#d6d6dd
constant.language.symbol.elixir#d6d6dd
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.superitalic
keyword.control.import.python,keyword.control.flow.pythonitalic
markup.italic.markdownitalic
Kursor Theme by Brandon Palmeros - VS Code Theme