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#24ffb6b3
  • activityBar.background#00000000
  • activityBar.border#00000000
  • activityBar.foreground#8e939ccc
  • activityBar.inactiveForeground#565b6699
  • activityBarBadge.background#24ffb6
  • activityBarBadge.foreground#0b0e14
  • badge.background#24ffb633
  • badge.foreground#24ffb6
  • breadcrumb.activeSelectionForeground#86ff64
  • breadcrumb.focusForeground#a7fd8f
  • breadcrumb.foreground#c7caca
  • button.background#24ffb6
  • button.foreground#0b0e14
  • button.hoverBackground#13fab1
  • button.secondaryBackground#565b6633
  • button.secondaryForeground#bfbdb6
  • button.secondaryHoverBackground#565b6680
  • debugConsoleInputIcon.foreground#24ffb6
  • debugExceptionWidget.background#0f131a
  • debugExceptionWidget.border#11151c
  • debugIcon.breakpointDisabledForeground#f2966880
  • debugIcon.breakpointForeground#f29668
  • debugToolBar.background#000000f0
  • descriptionForeground#565b66
  • diffEditor.diagonalFill#11151c
  • diffEditor.insertedLineBackground#00000000
  • diffEditor.insertedTextBackground#7efa9f17
  • diffEditor.removedLineBackground#00000000
  • diffEditor.removedTextBackground#ff43431a
  • dropdown.background#0d1017
  • dropdown.border#565b6645
  • dropdown.foreground#74c380
  • editor.background#12121264
  • editor.findMatchBackground#00000000
  • editor.findMatchBorder#23e055
  • editor.findMatchHighlightBackground#00000000
  • editor.findMatchHighlightBorder#a1fe9e
  • editor.findRangeHighlightBackground#9837c840
  • editor.foreground#bfbdb6
  • editor.inactiveSelectionBackground#cbc9db0c
  • editor.lineHighlightBackground#00000000
  • editor.lineHighlightBorder#00000000
  • editor.linkedEditingBackground#d6d6d610
  • editor.rangeHighlightBackground#00000000
  • editor.selectionBackground#4a5d704f
  • editor.selectionHighlightBackground#04738900
  • editor.selectionHighlightBorder#23d3e097
  • editor.snippetTabstopHighlightBackground#00ffaa33
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightBorder#595b5b44
  • editor.wordHighlightStrongBackground#00ffaa14
  • editor.wordHighlightStrongBorder#0da7d6
  • editorBracketMatch.background#6c73804d
  • editorBracketMatch.border#6c73804d
  • editorCodeLens.foreground#dbdbdd
  • editorCursor.foreground#09ffe6
  • editorError.foreground#ff246d
  • editorGroup.border#18191f77
  • editorGroupHeader.border#a9a7a700
  • editorGroupHeader.noTabsBackground#0d0d0db3
  • editorGroupHeader.tabsBackground#0d0d0db3
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#00ffaacc
  • editorGutter.deletedBackground#ff3232
  • editorGutter.modifiedBackground#00d0ff
  • editorHoverWidget.background#080808f7
  • editorHoverWidget.border#000000
  • editorHoverWidget.foreground#cad7ce
  • editorIndentGuide.activeBackground#6c738080
  • editorIndentGuide.activeBackground1#6c738080
  • editorIndentGuide.background#6c738033
  • editorIndentGuide.background1#6c738033
  • editorLineNumber.activeForeground#81ff89
  • editorLineNumber.foreground#6c738099
  • editorLink.activeForeground#24ffb6
  • editorMarkerNavigation.background#0f131a
  • editorOverviewRuler.addedForeground#00ffaa
  • editorOverviewRuler.border#ff000000
  • editorOverviewRuler.bracketMatchForeground#6c7380b3
  • editorOverviewRuler.deletedForeground#ff0055
  • editorOverviewRuler.errorForeground#ff246d
  • editorOverviewRuler.findMatchForeground#00ff5936
  • editorOverviewRuler.modifiedForeground#00aaff
  • editorOverviewRuler.warningForeground#24ffb6
  • editorOverviewRuler.wordHighlightForeground#00aaff66
  • editorOverviewRuler.wordHighlightStrongForeground#00ffaa66
  • editorRuler.foreground#6c738033
  • editorStickyScroll.border#000000b6
  • editorStickyScroll.shadow#00000000
  • editorSuggestWidget.background#080808f7
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.highlightForeground#24ffb6
  • editorSuggestWidget.selectedBackground#47526640
  • editorWarning.foreground#24ffb6
  • editorWhitespace.foreground#6c738099
  • editorWidget.background#0000003e
  • editorWidget.border#00000000
  • errorForeground#ff246d
  • extensionButton.prominentBackground#24ffb6
  • extensionButton.prominentForeground#0d1017
  • extensionButton.prominentHoverBackground#13fab1
  • focusBorder#47ffa6fc
  • foreground#565b66
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#ff0055b3
  • gitDecoration.ignoredResourceForeground#565b6680
  • gitDecoration.modifiedResourceForeground#3edde3
  • gitDecoration.submoduleResourceForeground#ffba92b3
  • gitDecoration.untrackedResourceForeground#00ffaae2
  • icon.foreground#565b66
  • input.background#161620
  • input.border#00000000
  • input.foreground#bfbdb6
  • input.placeholderForeground#c0c0c0f5
  • inputOption.activeBackground#24ffb633
  • inputOption.activeBorder#24ffb64d
  • inputOption.activeForeground#24ffb6
  • inputValidation.errorBackground#0d1017
  • inputValidation.errorBorder#ff246d
  • inputValidation.infoBackground#0b0e14
  • inputValidation.infoBorder#39bae6
  • inputValidation.warningBackground#0b0e14
  • inputValidation.warningBorder#ffb454
  • keybindingLabel.background#565b661a
  • keybindingLabel.border#bfbdb61a
  • keybindingLabel.bottomBorder#bfbdb61a
  • keybindingLabel.foreground#bfbdb6
  • list.activeSelectionBackground#7ac8aa00
  • list.activeSelectionForeground#98ff7c
  • list.activeSelectionIconForeground#c8fde3
  • list.deemphasizedForeground#ff246d
  • list.errorForeground#ff589b
  • list.filterMatchBackground#bfffcd92
  • list.filterMatchBorder#00000000
  • list.focusAndSelectionOutline#00000000
  • list.focusBackground#47526640
  • list.focusForeground#bfbdb6
  • list.focusOutline#47526640
  • list.highlightForeground#00ff99
  • list.hoverBackground#8bc09200
  • list.hoverForeground#5fff32
  • list.inactiveSelectionBackground#7ac8aa0e
  • list.inactiveSelectionForeground#98ff7c
  • list.invalidItemForeground#565b664d
  • list.warningForeground#ffe046
  • listFilterWidget.background#0f131a
  • listFilterWidget.noMatchesOutline#ff246d
  • listFilterWidget.outline#24ffb6
  • minimap.background#0a0c10
  • minimap.errorHighlight#fa427f
  • minimap.findMatchHighlight#9837c869
  • minimap.selectionHighlight#249edb4d
  • minimapGutter.addedBackground#00ffaa
  • minimapGutter.deletedBackground#ff0055
  • minimapGutter.modifiedBackground#00aaff
  • panel.background#101010
  • panel.border#00000000
  • panelTitle.activeBorder#24ffb6
  • panelTitle.activeForeground#82e587
  • panelTitle.inactiveForeground#565b66
  • peekView.border#7e7e7e3a
  • peekViewEditor.background#00000000
  • peekViewEditor.matchHighlightBackground#00000000
  • peekViewEditor.matchHighlightBorder#bfffcdd7
  • peekViewEditorGutter.background#00000000
  • peekViewResult.background#00000000
  • peekViewResult.fileForeground#c9c9c9
  • peekViewResult.lineForeground#a8dac6
  • peekViewResult.matchHighlightBackground#00000000
  • peekViewResult.selectionBackground#79859d40
  • peekViewTitle.background#00000000
  • peekViewTitleDescription.foreground#adf3ab
  • peekViewTitleLabel.foreground#bfbdb6
  • pickerGroup.border#11151c
  • pickerGroup.foreground#565b6680
  • progressBar.background#24ffb6
  • quickInput.background#0c0c0ccc
  • quickInput.foreground#bebebe
  • quickInputList.focusBackground#9cf59a23
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#565b66b3
  • scrollbarSlider.background#89ede234
  • scrollbarSlider.hoverBackground#70f6f699
  • search.resultsInfoForeground#09fffb
  • selection.background#249edb4d
  • settings.headerForeground#bfbdb6
  • settings.modifiedItemIndicator#00aaff
  • sideBar.background#121212
  • sideBar.border#00000000
  • sideBar.foreground#afbabc
  • sideBarSectionHeader.background#00000022
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#8def9a
  • sideBarTitle.foreground#565b66
  • statusBar.background#00000084
  • statusBar.border#000000b3
  • statusBar.debuggingBackground#39573d0a
  • statusBar.debuggingForeground#b0ffa9
  • statusBar.foreground#b0ffa9
  • statusBar.noFolderBackground#0d0d0db3
  • statusBarItem.activeBackground#0d0d0db3
  • statusBarItem.hoverBackground#00000000
  • statusBarItem.hoverForeground#2aff9fbb
  • statusBarItem.prominentBackground#11151c
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#24ffb6
  • statusBarItem.remoteForeground#0d1017
  • tab.activeBackground#00000037
  • tab.activeBorder#85ff83f0
  • tab.activeBorderTop#00000000
  • tab.activeForeground#75f47e
  • tab.border#7a7c7f0c
  • tab.hoverForeground#75f47e
  • tab.inactiveBackground#0d0d0db3
  • tab.inactiveForeground#afafad
  • tab.unfocusedActiveBackground#00000000
  • tab.unfocusedActiveBorder#628859
  • tab.unfocusedActiveBorderTop#00000000
  • tab.unfocusedActiveForeground#7ab482
  • tab.unfocusedInactiveForeground#565b66
  • terminal.ansiBlack#11151c
  • terminal.ansiBlue#53bdfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#59c2ff
  • terminal.ansiBrightCyan#47ffc2
  • terminal.ansiBrightGreen#aad94c
  • terminal.ansiBrightMagenta#d2a6ff
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffb454
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#00ffaa
  • terminal.ansiMagenta#cda1fa
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f9af4f
  • terminal.background#101010
  • terminal.foreground#d0d0cf
  • textBlockQuote.background#0f131a
  • textLink.activeForeground#24ffb6
  • textLink.foreground#24ffb6
  • textPreformat.foreground#bfbdb6
  • titleBar.activeBackground#0e1016
  • titleBar.activeForeground#bfbdb6
  • titleBar.border#2525257e
  • titleBar.inactiveBackground#0e1016
  • titleBar.inactiveForeground#565b66
  • tree.indentGuidesStroke#6c738080
  • walkThrough.embeddedEditorBackground#0f131a
  • welcomePage.progress.background#131721
  • welcomePage.tileBackground#0b0e14
  • widget.border#00000000
  • widget.shadow#050505ad

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.solidity storage.type.function, source.solidity storage.type.contract, source.solidity storage.type.interface, source.solidity storage.modifier.is#FFB289
source.solidity constant.language.boolean#FF8F40
source.solidity entity.name.function.modifier#b9ffb4
meta.parameters variable.parameter#b9ffb4
meta.block variable.parameter#b9ffb4
comment#ACB6BF8Citalic
string, constant.other.symbol#AAD94C
string.regexp, constant.character, constant.other#95E6CB
constant.numeric, constant.language#D2A6FF
variable.member#F07178
variable.language#39BAE6italic
storage#FF8F40
keyword#FF8F40
keyword.operator#F29668
punctuation.separator, punctuation.terminator#BFBDB6B3
punctuation.section#BFBDB6
punctuation.accessor#F29668
punctuation.definition.template-expression#FF8F40
punctuation.section.embedded#FF8F40
source.java storage.type, source.haskell storage.type, source.c storage.type#59C2FF
entity.other.inherited-class#39BAE6
storage.type, storage.type.function#FF8F40
source.java storage.type.primitive#39BAE6
variable.function, variable.annotation, meta.function-call.generic, support.function.go#FFB454
support.macro#F07178
entity.name.import, entity.name.package#AAD94C
entity.name.tag, meta.tag.sgml#39BAE6
support.class.component#59C2FF
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#39BAE680
entity.other.attribute-name#FFB454
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#E6B673
invalid#FF246D
meta.diff, meta.diff.header#C594C5
source.ruby variable.other.readwrite#FFB454
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#59C2FF
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#ACB6BF8C
support.type.property-name#39BAE6
constant.numeric.line-number.find-in-files - match#ACB6BF8C
constant.numeric.line-number.match#FF8F40
entity.name.filename.find-in-files#AAD94C
message.error#FF246D
markup.heading, markup.heading entity.name#AAD94Cbold
markup.underline.link, string.other.link#39BAE6
markup.italic#F07178italic
markup.bold#F07178bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#ACB6BF8C
markup.quote#95E6CBitalic
markup.list punctuation.definition.list.begin#FFB454
markup.inserted#00FFAA
markup.changed#00AAFF
markup.deleted#FF0055
markup.strike#E6B673
markup.table#39BAE6
text.html.markdown markup.inline.raw#F29668
text.html.markdown meta.dummy.line-break#ACB6BF8C
punctuation.definition.markdown#ACB6BF8C
source.solidity punctuation.accessor#CCF5FFD4
source.solidity constant.language.currency, source.solidity storage.type.modifier.readonly#4DFFCCitalic
source.solidity keyword.control.exceptions#FF5F7DD4
source.solidity keyword.control#FD8BFF
source.solidity keyword.operator, source.solidity keyword.operator.arithmetic, source.solidity keyword.operator.logic#03BBF5
source.solidity keyword.operator.assignment#03BBF5
source.solidity storage.type.modifier.payable#FD8BFF
source.solidity keyword.control.flow#FF769A
source.solidity variable.parameter.function#B9ECC8
source.solidity variable.parameter.other#FFFFC6
storage.type.class.jsdoc, storage.type.dev.natspec, storage.type.param.natspec, storage.type.custom.natspec, storage.type.return.natspec#FEBD8BD4
keyword.control.using, keyword.control.for#FF5B87
source.solidity storage.type.modifier.access#FFB289
source.solidity storage.type.modifier.extendedscope#FFB289
source.solidity variable.language.transaction#44F6C6
entity.name.type.class#ffee59
source.solidity entity.name.type.contract#FFD664
source.solidity entity.name.type.interface#FFFFC6
source.solidity entity.name.type.library#4AE07C
keyword.control.import, keyword.control.type, keyword.control.from#87CFFF
comment#ADADAD91
entity.other.attribute-name#ffbf40
keyword.operator.assignment#FF8F40
meta.block keyword.operator.assignment#03BBF5
meta.tag.attributes keyword.operator.assignment#ff9523
storage.type.function.arrow#FF8F40
storage.type.type, storage.type.interface, support.type.primitive, constant.language.boolean.true, meta.type.parameters storage.modifier#03BBF5
meta.method.declaration storage.type, meta.block storage.type#03BBF5
support.type.builtin#FF6161FC
entity.name.type, keyword.operator.expression.is, keyword.operator.expression.keyof, keyword.operator.type.annotation#00eaff
support.type#72e5ff
support.class#ffb57d
storage.type.struct#09EFFF
support.constant#FFC45F
support.variable.property#68f7dc
keyword.operator.new#03BBF5
meta.object.member meta.object.member meta.object-literal.key, meta.object.member meta.object.member meta.object.member meta.object.member meta.object-literal.key, meta.field.declaration meta.field.declaration meta.definition.property variable.object.property, meta.field.declaration meta.field.declaration meta.field.declaration meta.field.declaration meta.definition.property variable.object.property#f17a55
meta.objectliteral meta.object.member#FFC45F
meta.object.member meta.object-literal.key, meta.object.member meta.object.member meta.object.member meta.object-literal.key, meta.field.declaration meta.definition.property variable.object.property, meta.field.declaration meta.field.declaration meta.field.declaration meta.definition.property variable.object.property#ffc45f
meta.jsx.children meta.tag.attributes meta.embedded.expression variable.other.readwrite#ffcd7c
source variable.other.object, variable.other.readwrite.alias#FFFFC6
source.ts entity.name.variable#fad8cd
meta.block meta.definition.variable entity.name.variable, source.ts variable.local.readwrite, source.js variable.local.readwrite#bda6a6
meta.var.expr meta.var-single-variable.exp, meta.definition.variable variable.other.constant, meta.block variable.other.constant, meta.embedded meta.object.member variable.other.object, variable.other.constant#FFFFC6
support.method, support.function#25e6c3
entity.name.function.member, entity.name.function, meta.block storage.type.function.arrow#44fc88
variable.other.object.property, meta.block meta.definition.variable variable.other.constant, meta.block variable.local.constant#b8b8b8
meta.object.member variable.other.property, meta.block variable.other.property#D0CAFD
entity.name.type.enum#03BBF5
variable.other.enummember#FFC45F
constant.numeric.decimal, keyword.operator.arithmetic, storage.type.numeric.bigint, constant.numeric.json#4DFFCC
variable.parameter.function-call#DAF1BA
keyword.operator.arithmetic#88FDD0
punctuation.accessor.optional#03BBF5
meta.parameters keyword.operator.type.annotation#A1F4AD
namespace, entity.name.type.module#ceff2d
keyword.operator.spread#FFC45F
storage.modifier, meta.block meta.arrow keyword.control.flow, meta.block meta.function keyword.control.flow#ff85ad
meta.block meta.arrow meta.arrow keyword.control.flow, meta.block meta.arrow meta.function keyword.control.flow, meta.block meta.function meta.arrow keyword.control.flow, meta.block meta.function meta.function keyword.control.flow#ffb3dc
keyword.operator.increment#4DFFCC
keyword.control.conditional, keyword.operator.ternary, keyword.control.switch, keyword.operator.expression.typeof, keyword.control.loop, keyword.operator.expression.of, keyword.operator.increment#03BBF5
keyword.operator.comparison, keyword.operator.logical, keyword.operator.relational#03BBF5
variable.other.constant.property#FFC45F
meta.embedded.expression variable.other.object#FFFFCB
meta.tag string, meta.jsx string#5fef3b
string#5fef3b
meta.parameters variable.other.readwrite#FFC45F
meta.var.expr variable.other.property#D0CAFD
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF6CCE
punctuation.definition.string.template.end, punctuation.definition.string.template.begin#EBFF7B
entity.name.tag support.class.component#a5ffe4
meta.tag entity.name.tag#4cd6ee
meta.block meta.tag.without-attributes punctuation.definition.tag.begin, meta.block meta.tag.without-attributes punctuation.definition.tag.end#7BD9C8
meta.tag.without-attributes, meta.jsx.children#FFFFFF
keyword.operator.expression.in#03BBF5
punctuation.definition.tag.begin, punctuation.definition.tag.end#7BD9C8
meta.objectliteral punctuation.separator.key-value, meta.objectliteral punctuation.separator.comma#FFC45F
meta.object.member punctuation.accessor#A3C1EF
meta.block punctuation.accessor#BDD5F1
punctuation.separator, keyword.operator.type, keyword.operator.rest#7FF5FC
keyword.operator.rest#FFB454
storage.modifier.async#FD628B
meta.object.member meta.object-literal.key string#FFC45F
constant.language.undefined, constant.language.null, constant.language.boolean.false#FF6161FC
keyword.control.flow#FD628B
keyword.control, keyword.control.trycatch#FD628B
text.html.markdown.journal.task.open.bullet#FFFF00
text.html.markdown.journal.task.open.marker#FFFF00
text.html.markdown.journal.task.open.keyworditalic
text.html.markdown.journal.task.open.text
text.html.markdown.journal.task.completed.keyworditalic
text.html.markdown.journal.task.completed.marker#AAAAAA
text.html.markdown.journal.task.completed.text#AAAAAA
text.html.markdown.journal.task.completed.bullet#FFFF00
text.html.markdown.journal.memo.keyworditalic
text.html.markdown.journal.memo.bullet#FFFF00
text.html.markdown.journal.scope#FFFF00
text.html.markdown.journal.link.keyworditalic
text.html.markdown.journal.link.bullet#FFFF00
ref.matchtext#FFFFFF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

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

Loading...