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#202020
  • activityBar.border#202020
  • activityBar.foreground#717171
  • activityBarBadge.background#8CA6BD
  • activityBarBadge.foreground#202020
  • badge.background#FF9473
  • badge.foreground#202020
  • button.background#FF9473
  • button.foreground#202020
  • button.hoverBackground#FF9473BB
  • debugExceptionWidget.background#262626
  • debugExceptionWidget.border#2D2D2D
  • debugToolBar.background#262626
  • debugToolBar.border#8CA6BD
  • diffEditor.insertedTextBackground#95E6CB44
  • diffEditor.removedTextBackground#F5617444
  • dropdown.background#232323
  • dropdown.listBackground#232323
  • editor.background#1C1C1C
  • editor.findMatchBackground#8CA6BD33
  • editor.findMatchHighlightBackground#8CA6BD33
  • editor.findRangeHighlightBackground#8CA6BD33
  • editor.foreground#DDD7CA
  • editor.lineHighlightBackground#2F2F2F
  • editor.rangeHighlightBackground#262626
  • editor.selectionBackground#2D2D2D
  • editor.wordHighlightBackground#8CA6BD33
  • editor.wordHighlightStrongBackground#8CA6BD33
  • editorBracketHighlight.foreground1#FFCC66
  • editorBracketHighlight.foreground2#7FCDFF
  • editorBracketHighlight.foreground3#B084EB
  • editorBracketHighlight.foreground4#FF75BC
  • editorBracketHighlight.foreground5#93FEC0
  • editorBracketMatch.border#2F2F2F
  • editorCursor.foreground#FFCC66
  • editorError.foreground#FF4551
  • editorGroup.border#2D2D2D
  • editorGroup.emptyBackground#262626
  • editorGroupHeader.noTabsBackground#232323
  • editorGroupHeader.tabsBackground#202020
  • editorGutter.addedBackground#76CC9A
  • editorGutter.deletedBackground#FF4551
  • editorGutter.modifiedBackground#7DBBD1
  • editorHoverWidget.background#262626
  • editorHoverWidget.border#2D2D2D
  • editorIndentGuide.background#262626
  • editorLineNumber.activeForeground#DDD7CA
  • editorLineNumber.foreground#505050
  • editorLink.activeForeground#FFCC66
  • editorMarkerNavigation.background#262626
  • editorOverviewRuler.addedForeground#8CA6BD
  • editorOverviewRuler.border#2D2D2D
  • editorOverviewRuler.deletedForeground#F56174AA
  • editorOverviewRuler.errorForeground#FF4551
  • editorOverviewRuler.modifiedForeground#76CC9AAA
  • editorOverviewRuler.warningForeground#FFCC66
  • editorRuler.foreground#2D2D2D
  • editorSuggestWidget.background#262626
  • editorSuggestWidget.border#2D2D2D
  • editorSuggestWidget.highlightForeground#FFCC66
  • editorSuggestWidget.selectedBackground#2A2A2A
  • editorWarning.foreground#FFCC66
  • editorWhitespace.foreground#2F2F2F
  • editorWidget.background#262626
  • extensionButton.prominentBackground#FFCC66AA
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#FFCC66BB
  • focusBorder#7171718A
  • foreground#717171
  • gitDecoration.conflictingResourceForeground#FF455187
  • gitDecoration.deletedResourceForeground#FF75BC87
  • gitDecoration.ignoredResourceForeground#71717177
  • gitDecoration.modifiedResourceForeground#8CA6BD87
  • gitDecoration.untrackedResourceForeground#7ef2ae87
  • input.background#262626
  • input.border#7171714C
  • input.foreground#DDD7CA
  • input.placeholderForeground#7171718A
  • inputOption.activeBorder#7171718A
  • inputValidation.errorBackground#232323
  • inputValidation.errorBorder#FF4551
  • inputValidation.infoBackground#232323
  • inputValidation.infoBorder#8CA6BD
  • inputValidation.warningBackground#232323
  • inputValidation.warningBorder#FFD580
  • list.activeSelectionBackground#2D2D2D
  • list.activeSelectionForeground#DDD7CA
  • list.focusBackground#2A2A2A
  • list.focusForeground#DDD7CA
  • list.highlightForeground#FFCC66
  • list.hoverBackground#2A2A2A
  • list.hoverForeground#DDD7CA
  • list.inactiveSelectionBackground#202020
  • list.inactiveSelectionForeground#DDD7CA
  • listFilterWidget.background#202020
  • listFilterWidget.noMatchesOutline#FF4551
  • listFilterWidget.outline#8CA6BD
  • notificationCenter.border#202020
  • notificationCenterHeader.background#202020
  • notificationCenterHeader.foreground#8CA6BD
  • notificationLink.foreground#FF9473
  • notifications.background#2D2D2D
  • notifications.foreground#FFFFFF
  • notificationToast.border#202020
  • panel.background#202020
  • panel.border#202020B3
  • panelTitle.activeBorder#202020
  • panelTitle.activeForeground#FF9473
  • panelTitle.inactiveForeground#717171
  • peekView.border#2D2D2D
  • peekViewEditor.background#262626
  • peekViewEditor.matchHighlightBackground#FFCC6633
  • peekViewResult.background#262626
  • peekViewResult.fileForeground#717171
  • peekViewResult.matchHighlightBackground#FFCC6633
  • peekViewTitle.background#262626
  • peekViewTitleDescription.foreground#717171
  • peekViewTitleLabel.foreground#717171
  • pickerGroup.border#2D2D2D
  • pickerGroup.foreground#FFCC66
  • progressBar.background#8CA6BD
  • scrollbar.shadow#20202000
  • scrollbarSlider.activeBackground#FFFFFF22
  • scrollbarSlider.background#FFFFFF11
  • scrollbarSlider.hoverBackground#FFFFFF22
  • selection.background#2D2D2DFF
  • sideBar.background#202020
  • sideBar.border#202020
  • sideBar.foreground#717171DD
  • sideBarSectionHeader.background#202020
  • sideBarSectionHeader.foreground#8CA6BD
  • sideBarTitle.foreground#8CA6BD99
  • statusBar.background#202020
  • statusBar.border#202020
  • statusBar.debuggingBackground#8CA6BD
  • statusBar.debuggingForeground#202020
  • statusBar.foreground#717171
  • statusBar.noFolderBackground#262626
  • tab.activeBackground#1C1C1C
  • tab.activeForeground#8CA6BD
  • tab.border#1C1C1C
  • tab.inactiveBackground#202020
  • tab.inactiveForeground#717171
  • tab.unfocusedActiveForeground#DDD7CAAA
  • tab.unfocusedInactiveForeground#717171
  • terminal.ansiBlue#8CA6BD
  • terminal.ansiBrightBlack#717171
  • terminal.ansiBrightBlue#7DBBD1
  • terminal.ansiBrightCyan#DAA3FF
  • terminal.ansiBrightGreen#66d494
  • terminal.ansiBrightMagenta#FFA7D3
  • terminal.ansiBrightRed#F56174
  • terminal.ansiBrightWhite#E6E6E6
  • terminal.ansiBrightYellow#FFCC66
  • terminal.ansiCyan#C38EFD
  • terminal.ansiGreen#7ef2ae
  • terminal.ansiMagenta#FF75BC
  • terminal.ansiRed#F56174
  • terminal.ansiWhite#DDD7CA
  • terminal.ansiYellow#FF9473
  • terminal.background#202020
  • terminal.border#2A2A2A
  • terminal.foreground#DDD7CA
  • terminal.tab.activeBorder#FFCC66
  • terminalCursor.background#202020
  • terminalCursor.foreground#FF9473
  • textBlockQuote.background#262626
  • textLink.activeForeground#FFCC66
  • textLink.foreground#FFCC66
  • textPreformat.foreground#DDD7CA
  • titleBar.activeBackground#202020
  • titleBar.activeForeground#717171
  • titleBar.border#202020
  • titleBar.inactiveBackground#202020
  • titleBar.inactiveForeground#717171
  • walkThrough.embeddedEditorBackground#262626
  • widget.shadow#202020B3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#f56174
comment#717171italic
keyword#FF75BC
keyword.control, keyword.operator.new#FF75BC
keyword.operator#FFCC66
keyword.operator.logical, keyword.operator.comparison#FFCC66
storage#FF9473
constant#FF9473
constant.character.escape#8CA6BD
variable#E6E6E6
variable.parameter#BBBBBB
meta.object-binding-pattern-variable.js variable#FFCC66
variable.other.constant, variable.language.this, variable.interpolation#FFA7D3
variable.other.object#FFA7D3
variable.other.property#E6E6E6
invalid.illegal#FF4551
invalid.deprecated#FF4551CC
string#7ef2ae
punctuation.definition.template-expression#FFCC66
support#FFCC66
support.class#FFCC66
support.type.object.module.js#C38EFD
support.function#7DBBD1
entity.name.function#7DBBD1
entity.other.inherited-class#FFA7D3
entity.name.tag.yaml#FFCC66
meta.decorator punctuation.decorator#FF9473
meta.decorator variable#7DBBD1
keyword.other.special-method#8CA6BD
keyword.control.at-rule#C38EFD
keyword.other.important#F56174
variable.interpolation#FF75BC
meta.source.handlebars entity.name.tag#7DBBD1
punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag#F5617487
entity.name.function.expression#FF75BC
entity.unescaped.expression#C38EFD
constant.other.symbol#7ef2ae
entity.expression variable.parameter.name#FF9473
entity.expression variable.parameter.value#7DBBD1
entity.expression support.function.builtin#FFA7D3
entity.name.tag.html#FFCC66
entity.other.attribute-name.handlebars#FFCC66
support.class.component#FF75BCitalic
meta.tag.js entity.name.tag#FFCC66
entity.other.attribute-name#FF9473
markup.bold#FF9473bold
punctuation.definition.bold.markdown#FFCC66bold
markup.changed#FF75BC
markup.deleted#F56174
markup.italic#FFA7D3italic
punctuation.definition.italic.markdown#FF75BCitalic
markup.inserted#7ef2ae
punctuation.definition.heading#7ef2ae
entity.name.section.markdown#BBBBBB
markup.quote#FF9473
markup.inline.raw#7ef2aeitalic
beginning.punctuation.definition.list#FF75BC
markup.fenced_code.block.markdown punctuation.definition.markdown#757575
fenced_code.block.language#BBBBBBitalic
string.other.link#BBBBBB
meta.link.inline.markdown#8CA6BDitalic
text.html.markdown punctuation.definition.string#FFCC66
entity.name.type.class.js#7DBBD1
keyword.control.as.js#FFA7D3
keyword.control.from.js.jsx#FFA7D3
keyword.control.export.js#C38EFD
entity.name.tag.js.jsx, support.class.component.js.jsx#F56174
variable.language.super.js.jsx#8CA6BD
meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade#F56174
entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html#F56174
entity.name.tag.css#F56174
support.type.property-name.css#E6E6E6
variable.scss#FFA7D3
entity.name.tag.reference.scss#F56174
keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css#FF9473
string.regexp#7DBBD1
string.regexp keyword, string.regexp keyword.control#FF75BC
string.regexp keyword.operator#FFA7D3
comment.block.documentation
entity.name.type.instance.jsdoc punctuation.definition#FFCC66italic
entity.name.type.instance.jsdoc#CDCDCDitalic
comment.block storage#FFCC66
comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string#FFA7D3
meta.tag.xml#F56174
meta.function-call.python#A9C3D9
support.type.property-name.json#CFAFFA

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Search Lights - Coding Theme