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#19181c
  • activityBar.border#00000000
  • activityBar.foreground#a8abb1cc
  • activityBar.inactiveForeground#565b6699
  • activityBarBadge.background#24ffb6
  • activityBarBadge.foreground#24ffb6b3
  • badge.background#24ffb633
  • badge.foreground#24ffb6
  • breadcrumb.activeSelectionForeground#86ff64
  • breadcrumb.focusForeground#a7fd8f
  • breadcrumb.foreground#bfd3d8
  • 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#222224
  • descriptionForeground#565b66
  • diffEditor.diagonalFill#11151c
  • diffEditor.insertedLineBackground#00000000
  • diffEditor.insertedTextBackground#7efa9f17
  • diffEditor.removedLineBackground#00000000
  • diffEditor.removedTextBackground#ff43431a
  • dropdown.background#1b1a20
  • dropdown.border#565b6645
  • dropdown.foreground#74c380
  • editor.background#19181c
  • 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#18191f00
  • editorGroupHeader.border#a9a7a700
  • editorGroupHeader.noTabsBackground#0b0e14
  • editorGroupHeader.tabsBackground#0b0f1700
  • editorGroupHeader.tabsBorder#72747900
  • editorGutter.addedBackground#00ffaacc
  • editorGutter.deletedBackground#ff3232
  • editorGutter.modifiedBackground#93cedc
  • editorHoverWidget.background#1c1a21
  • editorHoverWidget.border#313131b5
  • editorHoverWidget.foreground#cedddb
  • 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#00000000
  • editorOverviewRuler.warningForeground#24ffb6
  • editorOverviewRuler.wordHighlightForeground#00aaff66
  • editorOverviewRuler.wordHighlightStrongForeground#00ffaa66
  • editorRuler.foreground#6c738033
  • editorStickyScroll.border#57575744
  • editorStickyScroll.shadow#0a0a0a6e
  • editorSuggestWidget.background#1d1a20
  • editorSuggestWidget.border#5151513a
  • editorSuggestWidget.foreground#cedddb
  • editorSuggestWidget.highlightForeground#24ffb6
  • editorSuggestWidget.selectedBackground#47526640
  • editorWarning.foreground#24ffb6
  • editorWhitespace.foreground#6c738099
  • editorWidget.background#1b1b1d
  • editorWidget.border#2222220a
  • editorWidget.foreground#c7c7c7
  • editorWidget.resizeBorder#625b6f00
  • errorForeground#ff246d
  • extensionButton.prominentBackground#24ffb6
  • extensionButton.prominentForeground#0d1017
  • extensionButton.prominentHoverBackground#13fab1
  • focusBorder#47ffa6fc
  • foreground#b7b7b8
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#ff0055b3
  • gitDecoration.ignoredResourceForeground#565b6680
  • gitDecoration.modifiedResourceForeground#3edde3
  • gitDecoration.submoduleResourceForeground#ffba92b3
  • gitDecoration.untrackedResourceForeground#00ffaae2
  • icon.foreground#565b66
  • input.background#3b3b442b
  • input.border#00000000
  • input.foreground#cacac9
  • 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#00000000
  • 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#cbdfd70e
  • list.inactiveSelectionForeground#98ff7c
  • list.invalidItemForeground#565b664d
  • list.warningForeground#ffe046
  • listFilterWidget.background#0f131a
  • listFilterWidget.noMatchesOutline#ff246d
  • listFilterWidget.outline#24ffb6
  • minimap.background#0d1017
  • minimap.errorHighlight#ff246d
  • minimap.findMatchHighlight#3bbb429f
  • minimap.selectionHighlight#249edb4d
  • minimapGutter.addedBackground#00ffaa
  • minimapGutter.deletedBackground#ff0055
  • minimapGutter.modifiedBackground#00aaff
  • panel.background#19181c
  • panel.border#11151c00
  • panelTitle.activeBorder#24ffb6
  • panelTitle.activeForeground#82e587
  • panelTitle.inactiveForeground#565b66
  • peekView.border#6c6c6c38
  • peekViewEditor.background#19171c
  • peekViewEditor.matchHighlightBackground#00000000
  • peekViewEditor.matchHighlightBorder#bfffcdd7
  • peekViewResult.background#19171c
  • peekViewResult.fileForeground#c9c9c9
  • peekViewResult.lineForeground#a8dac6
  • peekViewResult.matchHighlightBackground#327b1966
  • peekViewResult.selectionBackground#47526640
  • peekViewTitle.background#2c2734
  • peekViewTitleDescription.foreground#565b66
  • peekViewTitleLabel.foreground#d2d0c8
  • pickerGroup.border#11151c
  • pickerGroup.foreground#565b6680
  • progressBar.background#24ffb6
  • quickInput.background#1d1a20
  • quickInput.foreground#bebebe
  • quickInputList.focusBackground#9cf59a23
  • scrollbar.shadow#0e0e0ea0
  • scrollbarSlider.activeBackground#565b66b3
  • scrollbarSlider.background#40395373
  • scrollbarSlider.hoverBackground#565b6699
  • search.resultsInfoForeground#09fffb
  • selection.background#249edb4d
  • settings.headerForeground#bfbdb6
  • settings.modifiedItemIndicator#00aaff
  • sideBar.background#19181c
  • sideBar.border#d0d0d000
  • sideBar.foreground#aeb2b9
  • sideBarSectionHeader.background#19181c
  • sideBarSectionHeader.border#19181c
  • sideBarSectionHeader.foreground#8def9a
  • sideBarTitle.foreground#565b66
  • statusBar.background#19181c
  • statusBar.border#2e2e2e00
  • statusBar.debuggingBackground#f29668
  • statusBar.debuggingForeground#0d1017
  • statusBar.foreground#b0ffa9
  • statusBar.noFolderBackground#0f131a
  • statusBarItem.activeBackground#565b6633
  • statusBarItem.hoverBackground#565b6633
  • statusBarItem.prominentBackground#11151c
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#24ffb6
  • statusBarItem.remoteForeground#0d1017
  • tab.activeBackground#514e5a29
  • tab.activeBorder#54ff51
  • tab.activeBorderTop#00000000
  • tab.activeForeground#75f47e
  • tab.border#7a7c7f00
  • tab.hoverForeground#75f47e
  • tab.inactiveBackground#00000000
  • tab.inactiveForeground#afafad
  • tab.unfocusedActiveBackground#00000000
  • tab.unfocusedActiveBorder#8cbf7f
  • tab.unfocusedActiveBorderTop#00000000
  • tab.unfocusedActiveForeground#7ab482
  • tab.unfocusedInactiveBackground#00000000
  • 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#19181c
  • terminal.foreground#d0d0cf
  • textBlockQuote.background#0f131a
  • textLink.activeForeground#24ffb6
  • textLink.foreground#24ffb6
  • textPreformat.foreground#bfbdb6
  • titleBar.activeBackground#19181c
  • titleBar.activeForeground#bfbdb6
  • titleBar.border#1c1e21
  • titleBar.inactiveBackground#19181c
  • titleBar.inactiveForeground#565b66
  • tree.indentGuidesStroke#6c738080
  • walkThrough.embeddedEditorBackground#19181c
  • welcomePage.progress.background#131721
  • welcomePage.tileBackground#0b0e14
  • widget.border#5b5b5b1e
  • widget.shadow#131313

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
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.italic—bold 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
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#fc8181—
entity.name.type.class#ffee59—
entity.name.type, keyword.operator.expression.is, keyword.operator.expression.keyof, keyword.operator.type.annotation#00e1ff—
support.type#99e2ff—
support.class#ffc89e—
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#c4b4b4
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#2feac7—
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#c9c9c9
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.keyword—italic
text.html.markdown.journal.task.open.text——
text.html.markdown.journal.task.completed.keyword—italic
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.keyword—italic
text.html.markdown.journal.memo.bullet#FFFF00—
text.html.markdown.journal.scope#FFFF00—
text.html.markdown.journal.link.keyword—italic
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—
overload by 0xp - VS Code Theme