Skip to main content
Coding Theme

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#ffcc66
  • activityBar.background#1f2430
  • activityBar.border#1f2430
  • activityBar.foreground#707a8ccc
  • activityBar.inactiveForeground#707a8c30
  • activityBarBadge.background#ffcc66
  • activityBarBadge.foreground#805500
  • badge.background#ff000070
  • badge.foreground#cccac2
  • breadcrumb.background#1f2430
  • breadcrumb.focusForeground#cccac2
  • breadcrumb.foreground#707a8c
  • button.background#ffcc66
  • button.foreground#805500
  • button.hoverBackground#fac761
  • button.secondaryBackground#707a8c33
  • button.secondaryForeground#cccac2
  • button.secondaryHoverBackground#707a8c80
  • debugConsoleInputIcon.foreground#ffcc66
  • debugExceptionWidget.background#1c212b
  • debugExceptionWidget.border#171b24
  • debugIcon.breakpointDisabledForeground#f29e7480
  • debugIcon.breakpointForeground#f29e74
  • debugToolBar.background#191d26
  • debugToolBar.border#242c3d
  • descriptionForeground#707a8c
  • diffEditor.diagonalFill#171b24
  • diffEditor.insertedLineBackground#252b3aef
  • diffEditor.insertedTextBackground#40ff001c
  • diffEditor.removedLineBackground#252b3aef
  • diffEditor.removedTextBackground#e99aa19a
  • dropdown.background#242936
  • dropdown.border#707a8c45
  • dropdown.foreground#707a8c
  • editor.background#1f2430
  • editor.findMatchBackground#695380
  • editor.findMatchBorder#695380
  • editor.findMatchHighlightBackground#69538066
  • editor.findMatchHighlightBorder#5c467266
  • editor.findRangeHighlightBackground#69538040
  • editor.foreground#cccac2
  • editor.inactiveSelectionBackground#b8cadb21
  • editor.lineHighlightBackground#1a1f29
  • editor.rangeHighlightBackground#69538033
  • editor.selectionBackground#40a0ff1f
  • editor.selectionHighlightBackground#88989926
  • editor.selectionHighlightBorder#6cadd957
  • editor.snippetTabstopHighlightBackground#87d96c33
  • editor.wordHighlightBackground#80bfff14
  • editor.wordHighlightBorder#80bfff80
  • editor.wordHighlightStrongBackground#87d96c14
  • editor.wordHighlightStrongBorder#87d96c80
  • editorBracketMatch.background#8a91994d
  • editorBracketMatch.border#8a91994d
  • editorCodeLens.foreground#b8cfe680
  • editorCursor.foreground#ffcc66
  • editorError.foreground#ff6666
  • editorGroup.border#171b24
  • editorGroupHeader.noTabsBackground#1f2430
  • editorGroupHeader.tabsBackground#1f2430
  • editorGroupHeader.tabsBorder#1f2430
  • editorGutter.addedBackground#5fa149cc
  • editorGutter.deletedBackground#f27983cc
  • editorGutter.modifiedBackground#80bfffcc
  • editorHoverWidget.background#1c212b
  • editorHoverWidget.border#171b24
  • editorIndentGuide.activeBackground1#8a919959
  • editorIndentGuide.background1#8a91992e
  • editorLineNumber.activeForeground#8a9199cc
  • editorLineNumber.foreground#8a919966
  • editorLink.activeForeground#ffcc66
  • editorMarkerNavigation.background#1c212b
  • editorOverviewRuler.addedForeground#d2e6cc
  • editorOverviewRuler.border#171b24
  • editorOverviewRuler.bracketMatchForeground#8a9199b3
  • editorOverviewRuler.deletedForeground#f27983
  • editorOverviewRuler.errorForeground#ff6666
  • editorOverviewRuler.findMatchForeground#695380f8
  • editorOverviewRuler.modifiedForeground#80bfff
  • editorOverviewRuler.warningForeground#ffcc66
  • editorOverviewRuler.wordHighlightForeground#80bfff66
  • editorOverviewRuler.wordHighlightStrongForeground#87d96c66
  • editorRuler.foreground#8a91992e
  • editorSuggestWidget.background#1c212b
  • editorSuggestWidget.border#171b24
  • editorSuggestWidget.highlightForeground#ffcc66
  • editorSuggestWidget.selectedBackground#63759926
  • editorWarning.foreground#ffcc66
  • editorWhitespace.foreground#8a919966
  • editorWidget.background#191d26
  • editorWidget.border#171b24
  • editorWidget.foreground#707a8c
  • editorWidget.resizeBorder#ffcc66
  • errorForeground#ff6666
  • extensionButton.prominentBackground#ffcc66
  • extensionButton.prominentForeground#805500
  • extensionButton.prominentHoverBackground#fac761
  • focusBorder#ffcc66b3
  • foreground#707a8c
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#707a8c80
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#dfbfffb3
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#707a8c
  • input.background#242936
  • input.border#707a8c45
  • input.foreground#cccac2
  • input.placeholderForeground#707a8c80
  • inputOption.activeBackground#ffffff1f
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#ffcc66
  • inputValidation.errorBackground#242936
  • inputValidation.errorBorder#ff6666
  • inputValidation.infoBackground#1f2430
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.warningBackground#1f2430
  • inputValidation.warningBorder#ffd173
  • keybindingLabel.background#707a8c1a
  • keybindingLabel.border#cccac21a
  • keybindingLabel.bottomBorder#cccac21a
  • keybindingLabel.foreground#cccac2
  • list.activeSelectionBackground#63759926
  • list.activeSelectionForeground#cccac2
  • list.deemphasizedForeground#ff6666
  • list.dropBackground#63759950
  • list.errorForeground#ff6666
  • list.filterMatchBackground#5c467266
  • list.filterMatchBorder#69538066
  • list.focusBackground#63759926
  • list.focusForeground#cccac2
  • list.focusOutline#63759926
  • list.highlightForeground#ffcc66
  • list.hoverBackground#63759926
  • list.inactiveSelectionBackground#69758c1f
  • list.inactiveSelectionForeground#707a8c
  • list.invalidItemForeground#707a8c4d
  • listFilterWidget.background#1c212b
  • listFilterWidget.noMatchesOutline#ff6666
  • listFilterWidget.outline#ffcc66
  • menu.background#191d26
  • minimap.background#1b212e
  • minimap.errorHighlight#ff6666
  • minimap.findMatchHighlight#695380fd
  • minimap.selectionHighlight#409fff40
  • minimapGutter.addedBackground#87d96c
  • minimapGutter.deletedBackground#f27983
  • minimapGutter.modifiedBackground#80bfff
  • panel.background#1f2430
  • panel.border#171b24
  • panelTitle.activeBorder#ffcc66
  • panelTitle.activeForeground#cccac2
  • panelTitle.inactiveForeground#707a8c
  • peekView.border#63759926
  • peekViewEditor.background#1c212b
  • peekViewEditor.matchHighlightBackground#69538066
  • peekViewEditor.matchHighlightBorder#5c467266
  • peekViewResult.background#1c212b
  • peekViewResult.fileForeground#cccac2
  • peekViewResult.lineForeground#707a8c
  • peekViewResult.matchHighlightBackground#69538066
  • peekViewResult.selectionBackground#63759926
  • peekViewTitle.background#63759926
  • peekViewTitleDescription.foreground#707a8c
  • peekViewTitleLabel.foreground#cccac2
  • pickerGroup.border#171b24
  • pickerGroup.foreground#517aa9
  • progressBar.background#49ff23
  • scrollbar.shadow#171b24
  • scrollbarSlider.activeBackground#707a8cb3
  • scrollbarSlider.background#707a8c66
  • scrollbarSlider.hoverBackground#707a8c99
  • selection.background#409fff40
  • settings.headerForeground#cccac2
  • settings.modifiedItemIndicator#80bfff
  • sideBar.background#1f2430
  • sideBar.border#1e222e
  • sideBarSectionHeader.background#1f2430
  • sideBarSectionHeader.border#1f2430
  • sideBarSectionHeader.foreground#707a8c
  • sideBarTitle.foreground#707a8c
  • statusBar.background#1f2430
  • statusBar.border#1f2430
  • statusBar.debuggingBackground#9c00bc
  • statusBar.debuggingForeground#ffa657
  • statusBar.foreground#707a8c
  • statusBar.noFolderBackground#1c212b
  • statusBarItem.activeBackground#707a8c33
  • statusBarItem.hoverBackground#707a8c33
  • statusBarItem.prominentBackground#171b24
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#ffcc66
  • statusBarItem.remoteForeground#805500
  • tab.activeBackground#1f2430
  • tab.activeBorder#ffcc66
  • tab.activeForeground#cccac2
  • tab.border#1f2430
  • tab.inactiveBackground#1f2430
  • tab.inactiveForeground#707a8c
  • tab.unfocusedActiveBorder#707a8c
  • tab.unfocusedActiveForeground#707a8c
  • tab.unfocusedInactiveForeground#707a8c
  • terminal.ansiBlack#171b24
  • terminal.ansiBlue#6dcbfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#73d0ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#d5ff80
  • terminal.ansiBrightMagenta#dfbfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd173
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#87d96c
  • terminal.ansiMagenta#dabafa
  • terminal.ansiRed#ed8274
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#facc6e
  • terminal.background#1f2430
  • terminal.foreground#cccac2
  • textBlockQuote.background#1c212b
  • textLink.activeForeground#ffcc66
  • textLink.foreground#ffcc66
  • textPreformat.foreground#cccac2
  • titleBar.activeBackground#1f2430
  • titleBar.activeForeground#cccac2
  • titleBar.border#1f2430
  • titleBar.inactiveBackground#707a8c33
  • titleBar.inactiveForeground#707a8c
  • tree.indentGuidesStroke#707a8c30
  • walkThrough.embeddedEditorBackground#1c212b
  • welcomePage.progress.background#1a1f29
  • welcomePage.tileBackground#1f2430
  • widget.shadow#171b24

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.class.component#ffef0aitalic
meta.jsx.children#bff8ec
entity.name.tag#0aefff
entity.other.attribute-name#52a585italic
punctuation.definition.tag#ff780a
punctuation.accessor.optional#0affca
storage.modifier.async#02e8f8italic bold
keyword.other.debugger#ea6962
keyword.control.at-rule, keyword.control.import, keyword.control.export, storage.type.namespace, punctuation.decorator, keyword.control.directive, keyword.preprocessor, punctuation.definition.preprocessor, punctuation.definition.directive, keyword.other.import, keyword.other.package, entity.name.type.namespace, entity.name.scope-resolution, keyword.other.using, keyword.package, keyword.import, keyword.map#89b482
storage.type.annotation#89b482
entity.name.label, constant.other.label#89b482
constant.character.escape, punctuation.quasi.element, punctuation.definition.template-expression, punctuation.section.embedded, storage.type.format, constant.other.placeholder, constant.other.placeholder, variable.interpolation#a9b665
entity.name.function.preprocessor#d3869b
heading.1.markdown, markup.heading.setext.1.markdown#ea6962bold
heading.2.markdown, markup.heading.setext.2.markdown#e78a4ebold
heading.3.markdown#d8a657bold
heading.4.markdown#a9b665bold
heading.5.markdown#7daea3bold
heading.6.markdown#d3869bbold
punctuation.definition.heading.markdown#928374
string.other.link.title.markdown, constant.other.reference.link.markdown, string.other.link.description.markdown#d3869b
markup.underline.link.image.markdown, markup.underline.link.markdown#a9b665underline
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.italic.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.metadata.markdown, punctuation.separator.key-value.markdown, punctuation.definition.constant.markdown#928374
punctuation.definition.bold.markdown#928374
meta.separator.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown#928374bold
markup.italicitalic
markup.boldbold
markup.bold markup.italic, markup.italic markup.bolditalic bold
punctuation.definition.markdown, punctuation.definition.raw.markdown#d8a657
fenced_code.block.language#d8a657
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#a9b665
punctuation.definition.list.begin.markdown#ea6962
punctuation.definition.heading.restructuredtext#e78a4ebold
punctuation.definition.field.restructuredtext, punctuation.separator.key-value.restructuredtext, punctuation.definition.directive.restructuredtext, punctuation.definition.constant.restructuredtext, punctuation.definition.italic.restructuredtext, punctuation.definition.table.restructuredtext#928374
punctuation.definition.bold.restructuredtext#928374
entity.name.tag.restructuredtext, punctuation.definition.link.restructuredtext, punctuation.definition.raw.restructuredtext, punctuation.section.raw.restructuredtext#89b482
constant.other.footnote.link.restructuredtext#d3869b
support.directive.restructuredtext#ea6962
entity.name.directive.restructuredtext, markup.raw.restructuredtext, markup.raw.inner.restructuredtext, string.other.link.title.restructuredtext#a9b665
punctuation.separator.namespace.xml#928374
entity.name.tag.html, entity.name.tag.xml, entity.name.tag.localname.xml#e78a4e
entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml#d8a657
string.quoted.double.html, string.quoted.single.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.separator.key-value.html, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, string.quoted.double.xml, string.quoted.single.xml, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.xml, meta.tag.xml, meta.tag.preprocessor.xml, meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html#a9b665
variable.language.documentroot.xml, meta.tag.sgml.doctype.xml#d3869b
punctuation.definition.entity.css, punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.separator.list.comma.css#928374
entity.other.attribute-name.class.css#ea6962
keyword.other.unit#e78a4e
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#d8a657
string.quoted.single.css, string.quoted.double.css, support.constant.property-value.css, meta.property-value.css, punctuation.definition.string.begin.css, punctuation.definition.string.end.css, constant.numeric.css, support.constant.font-name.css, variable.parameter.keyframe-list.css#a9b665
support.type.property-name.css#89b482
support.type.vendored.property-name.css#7daea3
entity.name.tag.css, entity.other.keyframe-offset.css, punctuation.definition.keyword.css, keyword.control.at-rule.keyframes.css, meta.selector.css#d3869b
punctuation.definition.entity.scss, punctuation.separator.key-value.scss, punctuation.terminator.rule.scss, punctuation.separator.list.comma.scss#928374
keyword.control.at-rule.keyframes.scss#e78a4e
punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss#d8a657
punctuation.definition.string.begin.scss, punctuation.definition.string.end.scss, string.quoted.double.scss, string.quoted.single.scss, constant.character.css.sass, meta.property-value.scss#a9b665
keyword.control.at-rule.include.scss, keyword.control.at-rule.use.scss, keyword.control.at-rule.mixin.scss, keyword.control.at-rule.extend.scss, keyword.control.at-rule.import.scss#d3869b
meta.scope.if-block.shell, meta.scope.group.shell#d4be98
support.function.builtin.shell, entity.name.function.shell#d8a657
string.quoted.double.shell, string.quoted.single.shell, punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell, string.unquoted.heredoc.shell#a9b665
keyword.control.heredoc-token.shell, variable.other.normal.shell, punctuation.definition.variable.shell, variable.other.special.shell, variable.other.positional.shell, variable.other.bracket.shell#d3869b
entity.name.function.package-manager.dockerfile#e78a4e
keyword.operator.flag.dockerfile#d8a657
string.quoted.double.dockerfile, string.quoted.single.dockerfile#a9b665
constant.character.escape.dockerfile#89b482
entity.name.type.base-image.dockerfile, entity.name.image.dockerfile#d3869b
comment, string.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string.begin, string.quoted.docstring punctuation.definition.string.end, comment.line.number-sign.ini, comment.line.number-sign.ignore, string.quoted.docstring.multi#31454eitalic
support.type.property-name.json.comments, meta.structure.array.json string.quoted.double.json#537686
meta.structure.dictionary.json string.json#466a7aitalic
meta.structure.dictionary.value.json string.quoted.double.json#54aaa3
punctuation.definition.comment, punctuation.definition.string, meta.fstring.python punctuation.definition.string string.quoted, punctuation.definition.heading.markdown#928374italic
meta.fstring.python storage.type.string#f1b93e
meta.member.access meta.item-access, meta.member.access meta.attribute, support.type.primitive#85dfc4italic
meta.function-call.generic#3FE41E
constant.language.boolean, constant.language#3cb624italic
storage.type.function.lambda#fa496f
meta.function.decorator#f7f46b
storage.type#f8ae1b
storage.type.function.arrow#f789df
string.quoted, string.quoted.double.json.comments, entity.name.section.markdown#f7d591
keyword.control.flow#e65050
keyword.operator.logical#e650d2
meta.member.access meta.function-call.arguments, meta.paragraph.markdown, source#b2ccd6
keyword.control.import#a08241
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.new, keyword.operator.bitwise, punctuation.separator, punctuation.terminator, rainbow1#FF79C6
constant.numeric#d16f37
string constant.other.placeholder, invalid.deprecated, keyword#D87818
string constant.other.placeholder, entity.name.function, meta.definition.property.js, meta.function-call.js, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss, constant.language.json#8bfc7c
string.quoted.double.json, variable.other.constant.js, variable.other.readwrite.js, variable.other.readwrite.ts, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, keyword.other.special-method, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control#e9eff5b6
variable.parameter.function.language.special, variable.parameter#f0c400
variable.other.readwrite.alias#F8E0E0
entity.name.type#d400ff
invalid, invalid.illegal, meta.function.decorator meta.function-call.arguments, storage.modifier.ts#18abd8
OrbBak-dark by Bruno Tomaz - VS Code Theme