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#1e6dc2
  • activityBar.background#f7f8fa
  • activityBar.border#00000010
  • activityBar.dropBorder#00000000
  • activityBar.foreground#000000
  • activityBarBadge.background#1e6dc2
  • banner.background#f7f8fa
  • banner.iconForeground#954595
  • breadcrumb.activeSelectionForeground#222222
  • breadcrumb.background#f7f8fa
  • breadcrumb.focusForeground#222222
  • breadcrumbPicker.background#f7f8fa
  • button.background#285cb2CC
  • button.hoverBackground#285cb2
  • button.separator#00000010
  • checkbox.background#f7f8fa
  • checkbox.border#00000036
  • commandCenter.activeBackground#00000000
  • commandCenter.activeBorder#00000036
  • commandCenter.background#00000000
  • commandCenter.border#00000010
  • commandCenter.inactiveBorder#00000010
  • debugExceptionWidget.background#f7f8fa
  • debugExceptionWidget.border#00000010
  • debugToolBar.background#f7f8fa
  • debugToolBar.border#00000010
  • diffEditor.border#00000010
  • diffEditor.diagonalFill#00000010
  • diffEditor.insertedLineBackground#007d1920
  • diffEditor.insertedTextBackground#eece0030
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedLineBackground#a1192220
  • diffEditor.removedTextBackground#eece0030
  • diffEditor.removedTextBorder#00000000
  • diffEditorGutter.insertedLineBackground#007d1920
  • diffEditorGutter.removedLineBackground#a1192220
  • editor.background#FFFFFF
  • editor.findMatchBackground#268fff50
  • editor.findMatchBorder#00000000
  • editor.findMatchHighlightBackground#c9652050
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#00000000
  • editor.findRangeHighlightBorder#00000080
  • editor.foldBackground#00000000
  • editor.foreground#333333
  • editor.hoverHighlightBackground#00000036
  • editor.lineHighlightBackground#00000010
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#268fff50
  • editor.selectionForeground#00000000
  • editor.selectionHighlightBackground#00000000
  • editor.selectionHighlightBorder#00000050
  • editor.snippetTabstopHighlightBackground#00000010
  • editor.snippetTabstopHighlightBorder#00000050
  • editor.wordHighlightBackground#00000010
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#00000010
  • editor.wordHighlightStrongBorder#00000000
  • editor.wordHighlightTextBackground#00000000
  • editor.wordHighlightTextBorder#00000000
  • editorBracketHighlight.foreground1#c96520
  • editorBracketHighlight.foreground2#ac8700
  • editorBracketHighlight.foreground3#007d19
  • editorBracketHighlight.foreground4#077aab
  • editorBracketHighlight.foreground5#0033b3
  • editorBracketHighlight.foreground6#954595
  • editorBracketHighlight.unexpectedBracket.foreground#a11922
  • editorBracketMatch.background#00000036
  • editorBracketMatch.border#00000050
  • editorBracketPairGuide.activeBackground1#c96520A0
  • editorBracketPairGuide.activeBackground2#ac8700A0
  • editorBracketPairGuide.activeBackground3#007d19A0
  • editorBracketPairGuide.activeBackground4#077aabA0
  • editorBracketPairGuide.activeBackground5#0033b3A0
  • editorBracketPairGuide.activeBackground6#954595A0
  • editorBracketPairGuide.background1#c9652030
  • editorBracketPairGuide.background2#ac870030
  • editorBracketPairGuide.background3#007d1930
  • editorBracketPairGuide.background4#077aab30
  • editorBracketPairGuide.background5#0033b330
  • editorBracketPairGuide.background6#95459530
  • editorCodeLens.foreground#00000030
  • editorCursor.background#5F5F5F30
  • editorCursor.foreground#5F5F5F
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#FF0000
  • editorGhostText.background#00000000
  • editorGhostText.border#00000000
  • editorGhostText.foreground#00000016
  • editorGroup.border#00000010
  • editorGroup.dropBackground#00000010
  • editorGroup.dropIntoPromptBackground#00000000
  • editorGroup.emptyBackground#FFFFFF
  • editorGroupHeader.border#00000010
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorGroupHeader.tabsBorder#00000010
  • editorGutter.addedBackground#007d19
  • editorGutter.background#FFFFFF
  • editorGutter.deletedBackground#a11922
  • editorGutter.foldingControlForeground#00000050
  • editorGutter.modifiedBackground#0033b3
  • editorHint.border#00000000
  • editorHint.foreground#000000
  • editorHoverWidget.background#f7f8fa
  • editorHoverWidget.border#00000010
  • editorHoverWidget.highlightForeground#c96520
  • editorHoverWidget.statusBarBackground#f7f8fa
  • editorInfo.background#00000000
  • editorInfo.border#00000000
  • editorInfo.foreground#00cfcf
  • editorLightBulb.foreground#eece00
  • editorLightBulbAi.foreground#eece00
  • editorLightBulbAutoFix.foreground#eece00
  • editorLineNumber.activeForeground#00000080
  • editorLineNumber.dimmedForeground#00000000
  • editorLineNumber.foreground#00000036
  • editorLink.activeForeground#239ec5
  • editorMarkerNavigation.background#f7f8fa
  • editorOverviewRuler.addedForeground#007d19A0
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#FF0000A0
  • editorOverviewRuler.infoForeground#00cfcfA0
  • editorOverviewRuler.warningForeground#eece00A0
  • editorOverviewRuler.wordHighlightTextForeground#c96520A0
  • editorPane.background#FFFFFF
  • editorRuler.foreground#f7f8fa
  • editorStickyScrollHover.background#00000010
  • editorSuggestWidget.background#f7f8fa
  • editorSuggestWidget.border#00000010
  • editorSuggestWidget.selectedBackground#00000016
  • editorUnicodeHighlight.background#00000000
  • editorUnicodeHighlight.border#00000000
  • editorUnnecessaryCode.border#00000000
  • editorUnnecessaryCode.opacity#FFFFFFA0
  • editorWarning.background#00000000
  • editorWarning.border#00000000
  • editorWarning.foreground#eece00
  • editorWhitespace.foreground#00000016
  • editorWidget.background#f7f8fa
  • editorWidget.border#00000000
  • editorWidget.resizeBorder#00000000
  • extensionButton.separator#00000010
  • extensionIcon.sponsorForeground#1e6dc2
  • extensionIcon.verifiedForeground#1e6dc2
  • focusBorder#00000000
  • foreground#222222
  • gitDecoration.addedResourceForeground#007d19
  • gitDecoration.deletedResourceForeground#a11922
  • gitDecoration.ignoredResourceForeground#222222
  • gitDecoration.modifiedResourceForeground#0033b3
  • gitDecoration.renamedResourceForeground#ac8700
  • gitDecoration.stageDeletedResourceForeground#a11922
  • gitDecoration.stageModifiedResourceForeground#0033b3
  • gitDecoration.untrackedResourceForeground#954595
  • input.background#FFFFFF
  • input.border#00000010
  • inputOption.activeBackground#f7f8fa
  • inputOption.activeBorder#00000050
  • inputOption.hoverBackground#00000010
  • inputValidation.errorBackground#f7f8fa
  • inputValidation.errorBorder#00000010
  • inputValidation.errorForeground#a11922
  • inputValidation.infoBackground#f7f8fa
  • inputValidation.infoBorder#00000010
  • inputValidation.infoForeground#077aab
  • inputValidation.warningBackground#f7f8fa
  • inputValidation.warningBorder#00000010
  • inputValidation.warningForeground#ac8700
  • keybindingTable.headerBackground#f7f8fa
  • keybindingTable.rowsBackground#00000000
  • list.activeSelectionBackground#00000020
  • list.activeSelectionForeground#222222
  • list.dropBackground#00000010
  • list.warningForeground#ac8700
  • menu.background#f7f8fa
  • menu.border#00000010
  • menu.selectionBackground#268fffAA
  • menu.separatorBackground#00000010
  • menubar.selectionBackground#00000000
  • menubar.selectionBorder#00000030
  • minimap.background#f7f8fa
  • minimap.errorHighlight#FF0000
  • minimap.findMatchHighlight#c96520
  • minimap.foregroundOpacity#FFFFFFFF
  • minimap.infoHighlight#00cfcf
  • minimap.selectionHighlight#00000050
  • minimap.selectionOccurrenceHighlight#c96520
  • minimap.warningHighlight#eece00
  • minimapGutter.addedBackground#007d19
  • minimapGutter.deletedBackground#a11922
  • minimapGutter.modifiedBackground#0033b3
  • minimapSlider.activeBackground#00000010
  • minimapSlider.background#FFFFFF00
  • minimapSlider.hoverBackground#00000010
  • notificationCenter.border#00000010
  • notificationCenterHeader.background#f7f8fa
  • notifications.border#00000010
  • notificationsErrorIcon.foreground#a11922
  • notificationsInfoIcon.foreground#077aab
  • notificationsWarningIcon.foreground#ac8700
  • notificationToast.border#00000010
  • panel.background#f7f8fa
  • panel.border#00000010
  • panel.dropBorder#00000000
  • panelInput.border#00000000
  • panelSection.border#00000010
  • panelSection.dropBackground#00000010
  • panelSectionHeader.background#f7f8fa
  • panelSectionHeader.border#00000010
  • peekView.border#00000010
  • peekViewEditor.background#00000000
  • peekViewEditor.matchHighlightBackground#c9652050
  • peekViewEditor.matchHighlightBorder#00000000
  • peekViewEditorGutter.background#00000000
  • peekViewEditorStickyScroll.background#FFFFFF
  • peekViewResult.background#f7f8fa
  • peekViewResult.matchHighlightBackground#c9652050
  • peekViewResult.selectionBackground#00000016
  • peekViewTitle.background#f7f8fa
  • pickerGroup.border#00000010
  • problemsErrorIcon.foreground#a11922
  • problemsInfoIcon.foreground#077aab
  • problemsWarningIcon.foreground#ac8700
  • quickInput.background#f7f8fa
  • quickInputList.focusBackground#00000016
  • quickInputTitle.background#f7f8fa
  • scrollbarSlider.activeBackground#00000036
  • scrollbarSlider.background#00000016
  • scrollbarSlider.hoverBackground#00000036
  • searchEditor.findMatchBackground#c9652050
  • searchEditor.findMatchBorder#00000000
  • searchEditor.textInputBorder#00000000
  • settings.checkboxBackground#f7f8fa
  • settings.checkboxBorder#00000036
  • settings.dropdownBackground#f7f8fa
  • settings.dropdownBorder#00000010
  • settings.focusedRowBackground#f7f8fa
  • settings.focusedRowBorder#00000000
  • settings.headerBorder#00000010
  • settings.modifiedItemIndicator#285cb2CC
  • settings.numberInputBackground#FFFFFF
  • settings.numberInputBorder#00000036
  • settings.rowHoverBackground#00000000
  • settings.sashBorder#00000010
  • settings.settingsHeaderHoverForeground#222222
  • settings.textInputBackground#FFFFFF
  • settings.textInputBorder#00000036
  • sideBar.background#f7f8fa
  • sideBar.border#00000010
  • sideBar.dropBackground#00000010
  • sideBarSectionHeader.background#00000000
  • sideBySideEditor.verticalBorder#00000010
  • statusBar.background#f7f8fa
  • statusBar.border#00000010
  • statusBar.debuggingBackground#f7f8fa
  • statusBar.focusBorder#00000000
  • statusBar.foreground#222222
  • statusBar.noFolderBackground#f7f8fa
  • statusBarItem.activeBackground#00000000
  • statusBarItem.compactHoverBackground#00000000
  • statusBarItem.errorBackground#00000000
  • statusBarItem.hoverBackground#00000000
  • statusBarItem.prominentBackground#00000000
  • statusBarItem.prominentHoverBackground#00000000
  • statusBarItem.remoteBackground#00000000
  • statusBarItem.remoteForeground#222222
  • statusBarItem.remoteHoverBackground#00000000
  • statusBarItem.warningBackground#00000000
  • tab.activeBackground#00000000
  • tab.activeBorder#00000000
  • tab.activeBorderTop#285cb2
  • tab.border#00000000
  • tab.hoverBorder#00000000
  • tab.inactiveBackground#00000000
  • tab.unfocusedActiveBackground#00000000
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#8F8F8F
  • tab.unfocusedHoverBorder#00000000
  • tab.unfocusedInactiveBackground#00000000
  • terminal.ansiBlack#f7f8fa
  • terminal.ansiBlue#0033b3
  • terminal.ansiBrightBlack#f7f8fa
  • terminal.ansiBrightBlue#0033b3
  • terminal.ansiBrightCyan#077aab
  • terminal.ansiBrightGreen#007d19
  • terminal.ansiBrightMagenta#954595
  • terminal.ansiBrightRed#a11922
  • terminal.ansiBrightWhite#333333
  • terminal.ansiBrightYellow#c96520
  • terminal.ansiCyan#077aab
  • terminal.ansiGreen#007d19
  • terminal.ansiMagenta#954595
  • terminal.ansiRed#a11922
  • terminal.ansiWhite#333333
  • terminal.ansiYellow#c96520
  • terminal.background#FFFFFF
  • terminal.border#00000010
  • terminal.dropBackground#00000010
  • terminal.findMatchBackground#c96520
  • terminal.findMatchHighlightBackground#00000000
  • terminal.findMatchHighlightBorder#c96520
  • terminal.foreground#007d19
  • terminal.selectionBackground#00000025
  • terminalCommandDecoration.errorBackground#a11922
  • terminalCommandDecoration.successBackground#007d19
  • textLink.activeForeground#239ec5
  • textLink.foreground#0057b7
  • titleBar.activeBackground#f7f8fa
  • titleBar.border#00000010
  • toolbar.hoverBackground#DDDDDD
  • toolbar.hoverOutline#000000
  • walkThrough.embeddedEditorBackground#FFFFFF
  • welcomePage.background#FFFFFF
  • welcomePage.tileBackground#00000000
  • welcomePage.tileHoverBackground#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8F8F8F
constant#077aab
keyword#c96520
invalid#a11922
markupunderline
meta#333333
storage#c96520
string#007d19
support#c96520
keyword.operator, variable.parameter.keyframe-list, punctuation.definition.entity#333333
source support.function, entity.other.keyframe-offset, keyword.operator.logical.css#333333italic
meta.function-call entity.name.function, meta.function.definition entity.name.function, meta.definition.function, meta.definition.method, keyword.control.at-rule, support.constant#954595
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#0033b3
variable.other.constant.property, variable.other.enummember, support.variable.property#0033b3italic
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#ac8700
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#c96520
variable.argument.css, variable.css#c96520italic
punctuation.definition.tag.begin, punctuation.definition.tag.end#5F5F5F
keyword.other.unit, punctuation.definition.group.regexp, meta.group.regexp, keyword.operator.or.regexp#077aab
entity.name.type.instance.jsdoc, support.constant.property-value, support.constant.font-name.css#007d19
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#a43d43
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#333333
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#0033b3
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#ac8700
text.html.markdown markup.bold.markdown#ac8700bold
text.html.markdown markup.italic.markdown#ac8700italic
text.html.markdown markup.strikethrough.markdown#ac8700strikethrough
text.html.markdown markup.bold.markdown markup.italic.markdown#ac8700italic bold
text.html.markdown meta.paragraph, text.html.markdown entity.name.section, text.html.markdown markup.raw.block, text.html.markdown markup#007d19underline
text.html.markdown constant.other.reference.link.markdown, text.html.markdown punctuation.line.separator.math.tex#c96520
text.html.markdown markup.underline.link.markdown, text.html.markdown markup.underline.link.image.markdown#077aab
source.log meta.block#5F5F5F
source.log meta.block.object.symbol, source.log meta.block.node.symbol, source.log meta.block.list.symbol, source.log meta.block.array.symbol#5F5F5FC0
source.log text.date, source.log text.time#8F8F8F
source.log text.url#0033b3
source.log#c96520
source.log constant.number, source.log string, source.log log.constant, source.log meta.import.path#007d19
source.log markup.info, source.log markup.debug#077aab
source.log markup.warning#ac8700
source.log markup.error, source.log log.exceptiontype#a11922
source.log log.exception#a43d43
entity.name.tag.yaml#c96520
support.type.property-name.table.toml, support.type.property-name.array.toml#0033b3
support.constant.java-properties#c96520
source.cfg meta.object.name#954595
source.cfg meta.type, source.cfg meta.property.name#c96520
source.cfg meta.attribute.name#0033b3
source.cfg meta.attribute.value, source.cfg meta.property.value#007d19
source.ini meta.object.name#954595
source.ini meta.type#c96520
source.ini meta.attribute.name#0033b3
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#333333
meta.create-struct.name#333333italic
support.function.builtin, entity.name.function.php, entity.name.function.cs, entity.name.function.go, meta.enum.tuple, entity.name.function.lua#954595
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#954595
entity.name.type.numeric, entity.name.type.primitive#c96520
entity.name.function.macro, support.function.construct, entity.name.type.result.rust, entity.name.type.option.rust#c96520
punctuation.definition.interpolation, meta.interpolation#ac8700
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#0033b3
meta.variable.const.defined, meta.object.const.property, meta.const#0033b3italic
Xecoy Theme by xecoy-studio - VS Code Theme