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.activeBorder#3088e0
  • activityBar.background#2b2d30
  • activityBar.border#00000030
  • activityBar.dropBorder#FFFFFF00
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#3088e0
  • banner.background#2b2d30
  • banner.iconForeground#c787c7
  • breadcrumb.activeSelectionForeground#DDDDDD
  • breadcrumb.background#2b2d30
  • breadcrumb.focusForeground#DDDDDD
  • breadcrumbPicker.background#2b2d30
  • button.background#1b6bbbdd
  • button.hoverBackground#1b6bbb
  • button.separator#FFFFFF10
  • checkbox.background#2b2d30
  • checkbox.border#FFFFFF20
  • commandCenter.activeBackground#FFFFFF00
  • commandCenter.activeBorder#FFFFFF20
  • commandCenter.background#FFFFFF00
  • commandCenter.border#FFFFFF10
  • commandCenter.inactiveBorder#FFFFFF10
  • debugExceptionWidget.background#2b2d30
  • debugExceptionWidget.border#FFFFFF10
  • debugToolBar.background#2b2d30
  • debugToolBar.border#FFFFFF10
  • diffEditor.border#FFFFFF10
  • diffEditor.diagonalFill#FFFFFF10
  • diffEditor.insertedLineBackground#6AAA7020
  • diffEditor.insertedTextBackground#FFFF0030
  • diffEditor.insertedTextBorder#FFFFFF00
  • diffEditor.removedLineBackground#DA505020
  • diffEditor.removedTextBackground#FFFF0030
  • diffEditor.removedTextBorder#FFFFFF00
  • diffEditorGutter.insertedLineBackground#6AAA7020
  • diffEditorGutter.removedLineBackground#DA505020
  • editor.background#1e1f22
  • editor.findMatchBackground#1b6bbb50
  • editor.findMatchBorder#FFFFFF00
  • editor.findMatchHighlightBackground#CE6f3050
  • editor.findMatchHighlightBorder#FFFFFF00
  • editor.findRangeHighlightBackground#FFFFFF00
  • editor.findRangeHighlightBorder#FFFFFF80
  • editor.foldBackground#FFFFFF00
  • editor.foreground#CCCCCC
  • editor.hoverHighlightBackground#FFFFFF20
  • editor.lineHighlightBackground#FFFFFF10
  • editor.lineHighlightBorder#FFFFFF00
  • editor.selectionBackground#1b6bbb50
  • editor.selectionForeground#FFFFFF00
  • editor.selectionHighlightBackground#FFFFFF00
  • editor.selectionHighlightBorder#FFFFFF50
  • editor.snippetTabstopHighlightBackground#FFFFFF10
  • editor.snippetTabstopHighlightBorder#FFFFFF50
  • editor.wordHighlightBackground#FFFFFF10
  • editor.wordHighlightBorder#FFFFFF00
  • editor.wordHighlightStrongBackground#FFFFFF10
  • editor.wordHighlightStrongBorder#FFFFFF00
  • editor.wordHighlightTextBackground#FFFFFF00
  • editor.wordHighlightTextBorder#FFFFFF00
  • editorBracketHighlight.foreground1#cf9977
  • editorBracketHighlight.foreground2#D7BA7D
  • editorBracketHighlight.foreground3#6AAA70
  • editorBracketHighlight.foreground4#60b7b7
  • editorBracketHighlight.foreground5#55A0D0
  • editorBracketHighlight.foreground6#c787c7
  • editorBracketHighlight.unexpectedBracket.foreground#DA5050
  • editorBracketMatch.background#FFFFFF20
  • editorBracketMatch.border#FFFFFF50
  • editorBracketPairGuide.activeBackground1#cf9977A0
  • editorBracketPairGuide.activeBackground2#D7BA7DA0
  • editorBracketPairGuide.activeBackground3#6AAA70A0
  • editorBracketPairGuide.activeBackground4#60b7b7A0
  • editorBracketPairGuide.activeBackground5#55A0D0A0
  • editorBracketPairGuide.activeBackground6#c787c7A0
  • editorBracketPairGuide.background1#cf997730
  • editorBracketPairGuide.background2#D7BA7D30
  • editorBracketPairGuide.background3#6AAA7030
  • editorBracketPairGuide.background4#60b7b730
  • editorBracketPairGuide.background5#55A0D030
  • editorBracketPairGuide.background6#c787c730
  • editorCodeLens.foreground#FFFFFF30
  • editorCursor.background#A0A0A030
  • editorCursor.foreground#A0A0A0
  • editorError.background#FFFFFF00
  • editorError.border#FFFFFF00
  • editorError.foreground#FF0000
  • editorGhostText.background#FFFFFF00
  • editorGhostText.border#FFFFFF00
  • editorGhostText.foreground#FFFFFF16
  • editorGroup.border#FFFFFF10
  • editorGroup.dropBackground#FFFFFF10
  • editorGroup.dropIntoPromptBackground#FFFFFF00
  • editorGroup.emptyBackground#1e1f22
  • editorGroupHeader.border#FFFFFF10
  • editorGroupHeader.tabsBackground#1e1f22
  • editorGroupHeader.tabsBorder#FFFFFF10
  • editorGutter.addedBackground#6AAA70
  • editorGutter.background#1E1F22
  • editorGutter.deletedBackground#DA5050
  • editorGutter.foldingControlForeground#FFFFFF50
  • editorGutter.modifiedBackground#55A0D0
  • editorHint.border#FFFFFF00
  • editorHint.foreground#FFFFFF
  • editorHoverWidget.background#2b2d30
  • editorHoverWidget.border#FFFFFF10
  • editorHoverWidget.highlightForeground#cf9977
  • editorHoverWidget.statusBarBackground#2b2d30
  • editorInfo.background#FFFFFF00
  • editorInfo.border#FFFFFF00
  • editorInfo.foreground#00FFFF
  • editorLightBulb.foreground#FFFF00
  • editorLightBulbAi.foreground#FFFF00
  • editorLightBulbAutoFix.foreground#FFFF00
  • editorLineNumber.activeForeground#FFFFFF80
  • editorLineNumber.dimmedForeground#FFFFFF00
  • editorLineNumber.foreground#FFFFFF20
  • editorLink.activeForeground#4ebbe4
  • editorMarkerNavigation.background#2b2d30
  • editorOverviewRuler.addedForeground#6AAA70A0
  • editorOverviewRuler.background#FFFFFF00
  • editorOverviewRuler.border#FFFFFF00
  • editorOverviewRuler.errorForeground#FF0000A0
  • editorOverviewRuler.infoForeground#00FFFFA0
  • editorOverviewRuler.warningForeground#FFFF00A0
  • editorOverviewRuler.wordHighlightTextForeground#CE6f30A0
  • editorPane.background#1e1f22
  • editorRuler.foreground#2b2d30
  • editorStickyScrollHover.background#FFFFFF10
  • editorSuggestWidget.background#2b2d30
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.selectedBackground#FFFFFF16
  • editorUnicodeHighlight.background#FFFFFF00
  • editorUnicodeHighlight.border#FFFFFF00
  • editorUnnecessaryCode.border#FFFFFF00
  • editorUnnecessaryCode.opacity#000000A0
  • editorWarning.background#FFFFFF00
  • editorWarning.border#FFFFFF00
  • editorWarning.foreground#FFFF00
  • editorWhitespace.foreground#FFFFFF16
  • editorWidget.background#2b2d30
  • editorWidget.border#FFFFFF00
  • editorWidget.resizeBorder#FFFFFF00
  • extensionButton.separator#FFFFFF10
  • extensionIcon.sponsorForeground#3088e0
  • extensionIcon.verifiedForeground#3088e0
  • focusBorder#FFFFFF00
  • foreground#DDDDDD
  • gitDecoration.addedResourceForeground#6AAA70
  • gitDecoration.deletedResourceForeground#DA5050
  • gitDecoration.ignoredResourceForeground#DDDDDD
  • gitDecoration.modifiedResourceForeground#55A0D0
  • gitDecoration.renamedResourceForeground#D7BA7D
  • gitDecoration.stageDeletedResourceForeground#DA5050
  • gitDecoration.stageModifiedResourceForeground#55A0D0
  • gitDecoration.untrackedResourceForeground#c787c7
  • input.background#1e1f22
  • input.border#FFFFFF10
  • inputOption.activeBackground#2b2d30
  • inputOption.activeBorder#FFFFFF50
  • inputOption.hoverBackground#FFFFFF10
  • inputValidation.errorBackground#2b2d30
  • inputValidation.errorBorder#FFFFFF10
  • inputValidation.errorForeground#DA5050
  • inputValidation.infoBackground#2b2d30
  • inputValidation.infoBorder#FFFFFF10
  • inputValidation.infoForeground#60b7b7
  • inputValidation.warningBackground#2b2d30
  • inputValidation.warningBorder#FFFFFF10
  • inputValidation.warningForeground#D7BA7D
  • keybindingTable.headerBackground#2b2d30
  • keybindingTable.rowsBackground#FFFFFF00
  • list.activeSelectionBackground#FFFFFF20
  • list.activeSelectionForeground#DDDDDD
  • list.dropBackground#FFFFFF10
  • menu.background#2b2d30
  • menu.border#FFFFFF10
  • menu.selectionBackground#1b6bbbcc
  • menu.separatorBackground#FFFFFF10
  • menubar.selectionBackground#FFFFFF00
  • menubar.selectionBorder#FFFFFF30
  • minimap.background#2b2d30
  • minimap.errorHighlight#FF0000
  • minimap.findMatchHighlight#CE6f30
  • minimap.foregroundOpacity#000000FF
  • minimap.infoHighlight#00FFFF
  • minimap.selectionHighlight#FFFFFF50
  • minimap.selectionOccurrenceHighlight#CE6f30
  • minimap.warningHighlight#FFFF00
  • minimapGutter.addedBackground#6AAA70
  • minimapGutter.deletedBackground#DA5050
  • minimapGutter.modifiedBackground#55A0D0
  • minimapSlider.activeBackground#FFFFFF10
  • minimapSlider.background#00000000
  • minimapSlider.hoverBackground#FFFFFF10
  • notificationCenter.border#FFFFFF10
  • notificationCenterHeader.background#2b2d30
  • notifications.border#FFFFFF10
  • notificationsErrorIcon.foreground#DA5050
  • notificationsInfoIcon.foreground#60b7b7
  • notificationsWarningIcon.foreground#D7BA7D
  • notificationToast.border#FFFFFF10
  • panel.background#2b2d30
  • panel.border#00000030
  • panel.dropBorder#FFFFFF00
  • panelInput.border#FFFFFF00
  • panelSection.border#00000030
  • panelSection.dropBackground#FFFFFF10
  • panelSectionHeader.background#2b2d30
  • panelSectionHeader.border#00000030
  • peekView.border#FFFFFF10
  • peekViewEditor.background#FFFFFF00
  • peekViewEditor.matchHighlightBackground#CE6f3050
  • peekViewEditor.matchHighlightBorder#FFFFFF00
  • peekViewEditorGutter.background#FFFFFF00
  • peekViewEditorStickyScroll.background#1e1f22
  • peekViewResult.background#2b2d30
  • peekViewResult.matchHighlightBackground#CE6f3050
  • peekViewResult.selectionBackground#FFFFFF16
  • peekViewTitle.background#2b2d30
  • pickerGroup.border#FFFFFF10
  • problemsErrorIcon.foreground#DA5050
  • problemsInfoIcon.foreground#60b7b7
  • problemsWarningIcon.foreground#D7BA7D
  • quickInput.background#2b2d30
  • quickInputList.focusBackground#FFFFFF16
  • quickInputTitle.background#2b2d30
  • scrollbarSlider.activeBackground#FFFFFF20
  • scrollbarSlider.background#FFFFFF10
  • scrollbarSlider.hoverBackground#FFFFFF20
  • searchEditor.findMatchBackground#CE6f3050
  • searchEditor.findMatchBorder#FFFFFF00
  • searchEditor.textInputBorder#FFFFFF00
  • settings.checkboxBackground#2b2d30
  • settings.checkboxBorder#FFFFFF20
  • settings.dropdownBackground#2b2d30
  • settings.dropdownBorder#FFFFFF10
  • settings.focusedRowBackground#2b2d30A0
  • settings.focusedRowBorder#FFFFFF00
  • settings.headerBorder#FFFFFF10
  • settings.modifiedItemIndicator#1b6bbbdd
  • settings.numberInputBackground#1e1f22
  • settings.numberInputBorder#FFFFFF20
  • settings.rowHoverBackground#FFFFFF00
  • settings.sashBorder#FFFFFF10
  • settings.settingsHeaderHoverForeground#DDDDDD
  • settings.textInputBackground#1e1f22
  • settings.textInputBorder#FFFFFF20
  • sideBar.background#2b2d30
  • sideBar.border#00000030
  • sideBar.dropBackground#FFFFFF10
  • sideBarSectionHeader.background#FFFFFF00
  • sideBySideEditor.verticalBorder#FFFFFF10
  • statusBar.background#2b2d30
  • statusBar.border#00000030
  • statusBar.debuggingBackground#2b2d30
  • statusBar.focusBorder#FFFFFF00
  • statusBar.foreground#DDDDDD
  • statusBar.noFolderBackground#2b2d30
  • statusBarItem.activeBackground#FFFFFF00
  • statusBarItem.compactHoverBackground#FFFFFF00
  • statusBarItem.errorBackground#FFFFFF00
  • statusBarItem.hoverBackground#FFFFFF00
  • statusBarItem.prominentBackground#FFFFFF00
  • statusBarItem.prominentHoverBackground#FFFFFF00
  • statusBarItem.remoteBackground#FFFFFF00
  • statusBarItem.remoteForeground#DDDDDD
  • statusBarItem.remoteHoverBackground#FFFFFF00
  • statusBarItem.warningBackground#FFFFFF00
  • tab.activeBackground#FFFFFF00
  • tab.activeBorder#FFFFFF00
  • tab.activeBorderTop#1b6bbb
  • tab.border#FFFFFF00
  • tab.hoverBorder#FFFFFF00
  • tab.inactiveBackground#FFFFFF00
  • tab.unfocusedActiveBackground#FFFFFF00
  • tab.unfocusedActiveBorder#FFFFFF00
  • tab.unfocusedActiveBorderTop#707070
  • tab.unfocusedHoverBorder#FFFFFF00
  • tab.unfocusedInactiveBackground#FFFFFF00
  • terminal.ansiBlack#2b2d30
  • terminal.ansiBlue#55A0D0
  • terminal.ansiBrightBlack#2b2d30
  • terminal.ansiBrightBlue#55A0D0
  • terminal.ansiBrightCyan#60b7b7
  • terminal.ansiBrightGreen#6AAA70
  • terminal.ansiBrightMagenta#c787c7
  • terminal.ansiBrightRed#DA5050
  • terminal.ansiBrightWhite#CCCCCC
  • terminal.ansiBrightYellow#cf9977
  • terminal.ansiCyan#60b7b7
  • terminal.ansiGreen#6AAA70
  • terminal.ansiMagenta#c787c7
  • terminal.ansiRed#DA5050
  • terminal.ansiWhite#CCCCCC
  • terminal.ansiYellow#cf9977
  • terminal.background#1e1f22
  • terminal.border#FFFFFF10
  • terminal.dropBackground#FFFFFF10
  • terminal.findMatchBackground#CE6f30
  • terminal.findMatchHighlightBackground#FFFFFF00
  • terminal.findMatchHighlightBorder#CE6f30
  • terminal.foreground#6AAA70
  • terminal.selectionBackground#FFFFFF25
  • terminalCommandDecoration.errorBackground#DA5050
  • terminalCommandDecoration.successBackground#6AAA70
  • textLink.activeForeground#4ebbe4
  • textLink.foreground#4e99e4
  • titleBar.activeBackground#2b2d30
  • titleBar.border#00000030
  • toolbar.hoverBackground#222222
  • toolbar.hoverOutline#FFFFFF
  • walkThrough.embeddedEditorBackground#1e1f22
  • welcomePage.background#1e1f22
  • welcomePage.tileBackground#FFFFFF00
  • welcomePage.tileHoverBackground#FFFFFF00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#707070
constant#60b7b7
keyword#cf9977
invalid#DA5050
markupunderline
meta#CCCCCC
storage#cf9977
string#6AAA70
support#cf9977
keyword.operator, variable.parameter.keyframe-list, punctuation.definition.entity#CCCCCC
source support.function, entity.other.keyframe-offset, keyword.operator.logical.css#CCCCCCitalic
meta.function-call entity.name.function, meta.function.definition entity.name.function, meta.definition.function, meta.definition.method, keyword.control.at-rule, support.constant#c787c7
entity.name.tag, meta.import variable.other.readwrite.alias, meta.definition.variable, meta.definition.variable variable.other.constant, variable.other.property, variable.object.property, variable.parameter, meta.selector entity.other.attribute-name, meta.selector entity.name.tag#55A0D0
variable.other.constant.property, variable.other.enummember, support.variable.property#55A0D0italic
constant.character.escape, constant.other.character-class.regexp, keyword.control.anchor.regexp, constant.other.color, support.constant.color, meta.template.expression, expression.embedded.vue, constant.character.entity, constant.character.entity punctuation.definition.entity, variable.parameter.url#D7BA7D
keyword.operator.new, variable.language.this, variable.language.super, keyword.operator.expression, entity.other.attribute-name, keyword.operator.quantifier.regexp, entity.other.attribute-name.css#cf9977
variable.argument.css, variable.css#cf9977italic
punctuation.definition.tag.begin, punctuation.definition.tag.end#A0A0A0
keyword.other.unit, punctuation.definition.group.regexp, meta.group.regexp, keyword.operator.or.regexp#60b7b7
entity.name.type.instance.jsdoc, support.constant.property-value, support.constant.font-name.css#6AAA70
constant.language, constant.language.null, constant.language.boolean.true, constant.language.boolean.false, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, meta.assertion, meta.group.assertion.regexp punctuation.definition.group.regexp, meta.group.assertion.regexp keyword.operator.or.regexp, meta.group.assertion.regexp, string.regexp punctuation.definition.string, string.regexp keyword.other#cf7777
text.html.markdown, text.html.markdown meta, text.html.markdown markup.heading, markup.quote.markdown, markup.list.unnumbered.markdown, markup.list.numbered.markdown, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc#CCCCCC
text.html.markdown punctuation.definition.markdown, text.html.markdown fenced_code.block.language.markdown, text.html.markdown punctuation.definition.heading.markdown, text.html.markdown punctuation.definition.list.begin.markdown, text.html.markdown punctuation.definition.quote.begin.markdown, text.html.markdown punctuation.definition.italic.markdown, text.html.markdown punctuation.definition.bold.markdown, text.html.markdown punctuation.definition.strikethrough.markdown, text.html.markdown markup.heading.setext, text.html.markdown meta.separator, text.html.markdown punctuation.definition.math.begin.markdown, text.html.markdown punctuation.definition.math.end.markdown, text.html.markdown punctuation.definition.table.markdown, text.html.markdown punctuation.separator.table.markdown#55A0D0
text.html.markdown string.other.link.description.title.markdown, text.html.markdown string.other.link.title.markdown, text.html.markdown markup.table.markdown, text.html.markdown string.other.link.description.markdown, text.html.markdown meta.embedded.math.markdown#D7BA7D
text.html.markdown markup.bold.markdown#D7BA7Dbold
text.html.markdown markup.italic.markdown#D7BA7Ditalic
text.html.markdown markup.strikethrough.markdown#D7BA7Dstrikethrough
text.html.markdown markup.bold.markdown markup.italic.markdown#D7BA7Ditalic bold
text.html.markdown meta.paragraph, text.html.markdown entity.name.section, text.html.markdown markup.raw.block, text.html.markdown markup#6AAA70underline
text.html.markdown constant.other.reference.link.markdown, text.html.markdown punctuation.line.separator.math.tex#cf9977
text.html.markdown markup.underline.link.markdown, text.html.markdown markup.underline.link.image.markdown#60b7b7
source.log meta.block#A0A0A0
source.log meta.block.object.symbol, source.log meta.block.node.symbol, source.log meta.block.list.symbol, source.log meta.block.array.symbol#A0A0A0C0
source.log text.date, source.log text.time#707070
source.log text.url#55A0D0E0
source.log#cf9977C0
source.log constant.number, source.log string, source.log log.constant, source.log meta.import.path#6AAA70D0
source.log markup.info, source.log markup.debug#60b7b7F0
source.log markup.warning#D7BA7DF0
source.log markup.error, source.log log.exceptiontype#DA5050F0
source.log log.exception#cf7777F0
entity.name.tag.yaml#cf9977
support.type.property-name.table.toml, support.type.property-name.array.toml#55A0D0
support.constant.java-properties#cf9977
source.cfg meta.object.name#c787c7
source.cfg meta.type, source.cfg meta.property.name#cf9977
source.cfg meta.attribute.name#55A0D0
source.cfg meta.attribute.value, source.cfg meta.property.value#6AAA70
source.ini meta.object.name#c787c7
source.ini meta.type#cf9977
source.ini meta.attribute.name#55A0D0
text, source, punctuation.bracket.angle, punctuation.separator.delimiter, storage.type.java, storage.type.generic.java, storage.modifier.import.java, variable.other.php, punctuation.section.array.begin.php, punctuation.section.array.end.php, punctuation.definition.variable.php, meta.enum.object#CCCCCC
meta.create-struct.name#CCCCCCitalic
support.function.builtin, entity.name.function.php, entity.name.function.cs, entity.name.function.go, meta.enum.tuple, entity.name.function.lua#c787c7
meta.function.call entity.name.function, entity.name.function.call, meta.method-call entity.name.function, meta.function-call support.function.builtin, meta.function-call.generic, meta.function-call.php entity.name.function.php, mata.new-class.name, meta.function-call.name.cs, entity.name.function.support, support.function.any-method.lua, support.function.lua#c787c7
entity.name.type.numeric, entity.name.type.primitive#cf9977
entity.name.function.macro, support.function.construct, entity.name.type.result.rust, entity.name.type.option.rust#cf9977
punctuation.definition.interpolation, meta.interpolation#D7BA7D
entity.name.variable.field.cs, entity.name.variable.parameter.cs, entity.name.variable.local.cs, variable.other.object.property.cs, variable.other.assignment.go, meta.variable.defined, meta.object.property, meta.enum.variable, constant.other.caps.rust#55A0D0
meta.variable.const.defined, meta.object.const.property, meta.const#55A0D0italic
Xecoy Theme by xecoy-studio - VS Code Theme