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.activeBackground#333333
  • activityBar.background#1c1c1c
  • activityBar.foreground#eeeeee
  • activityBarBadge.background#2828aa
  • activityBarBadge.foreground#eeeeee
  • badge.background#0066cc
  • badge.foreground#eeeeee
  • button.background#0e639c
  • button.foreground#eeeeee
  • button.hoverBackground#1177bb
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#a31515
  • debugToolBar.background#333333
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#3c3c3c
  • dropdown.border#3c3c3c
  • dropdown.foreground#f0f0f0
  • editor.background#1c1c1c
  • editor.findMatchBackground#515c6a
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.foreground#f8f8f2
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#49483e80
  • editor.lineHighlightBackground#2828aa
  • editor.rangeHighlightBackground#ffffff0b
  • editor.selectionBackground#49483e
  • editor.selectionHighlightBackground#3b3a3299
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#004972b8
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#ea4646
  • editorGroup.border#444444
  • editorGroup.dropBackground#53595d80
  • editorGroupHeader.noTabsBackground#26292c
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorGutter.addedBackground#587c0c
  • editorGutter.deletedBackground#94151b
  • editorGutter.modifiedBackground#0c7d9d
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#2d2d30
  • editorHoverWidget.border#454545
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#aaaaaa
  • editorLineNumber.foreground#5a5a5a
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#ea4646
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#007acc99
  • editorOverviewRuler.border#7f7f7f4d
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#007acc99
  • editorOverviewRuler.errorForeground#ff1212b3
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#007acc99
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#26292c
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#2d2d30
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#f8f8f2
  • editorSuggestWidget.highlightForeground#0097fb
  • editorSuggestWidget.selectedBackground#073655
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#3b3a32
  • editorWidget.background#2d2d30
  • editorWidget.border#454545
  • errorForeground#f48771
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#0e639c99
  • foreground#cccccc
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#a7a8a9
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • input.background#3c3c3c
  • input.foreground#cccccc
  • inputOption.activeBorder#007acc
  • inputValidation.errorBackground#5a1d1d
  • inputValidation.errorBorder#be1100
  • inputValidation.infoBackground#063b49
  • inputValidation.infoBorder#007acc
  • inputValidation.warningBackground#352a05
  • inputValidation.warningBorder#b89500
  • list.activeSelectionBackground#094771
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#073655
  • list.errorForeground#ea4646
  • list.focusBackground#073655
  • list.highlightForeground#0097fb
  • list.hoverBackground#2a2d2e
  • list.inactiveFocusBackground#313135
  • list.inactiveSelectionBackground#3f3f46
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#1c1c1c
  • menu.selectionBackground#2828aa
  • menu.separatorBackground#2828aa
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#3b3b3e
  • notificationLink.foreground#4080d0
  • notifications.background#2d2d30
  • notifications.border#3b3b3e
  • panel.background#202020
  • panel.border#202020
  • panelTitle.activeBorder#80808059
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e780
  • peekView.border#007acc
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#252526
  • peekViewResult.fileForeground#eeeeee
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#eeeeee
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#0097fb99
  • profileBadge.background#f5dc00
  • profileBadge.foreground#000000
  • progressBar.background#0e70c0
  • quickInputList.focusBackground#2828aa
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • sideBar.background#1c1c1c
  • sideBar.dropBackground#5c21211f
  • sideBarSectionHeader.background#1c1c1c
  • statusBar.background#1c1c1c
  • statusBar.border#1c1c1c
  • statusBar.debuggingBackground#ff9900
  • statusBar.debuggingBorder#eeeeee
  • statusBar.debuggingForeground#eeeeee
  • statusBar.foreground#eeeeee
  • statusBar.noFolderBackground#ac00e6
  • statusBar.noFolderBorder#eeeeee
  • statusBar.noFolderForeground#eeeeee
  • statusBarItem.activeBackground#ffffff2e
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.prominentBackground#388a34
  • statusBarItem.prominentHoverBackground#369432
  • tab.activeBackground#333333
  • tab.activeBorder#2828aa
  • tab.activeForeground#eeeeee
  • tab.border#1c1c1c
  • tab.hoverBackground#333333
  • tab.inactiveBackground#1c1c1c
  • tab.inactiveForeground#ffffff80
  • tab.unfocusedActiveForeground#ffffff80
  • tab.unfocusedInactiveForeground#ffffff40
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#eeeeee
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#eeeeee
  • terminal.ansiYellow#e5e510
  • terminal.foreground#f2f2f2
  • terminal.selectionBackground#ffffff40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#007acc80
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#4080d0
  • textLink.foreground#4080d0
  • textPreformat.foreground#d7ba7d
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#1c1c1c
  • titleBar.activeForeground#cccccc
  • titleBar.inactiveBackground#3c3c3c99
  • titleBar.inactiveForeground#cccccc99
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language, constant.numeric, constant.character, constant.other#67aeff—
storage.type, support.function, support.constant#66D9EFitalic
keyword, storage, markup.deleted, markup.deleted.git_gutter, entity.name.type, entity.name.class, support.constant, support.function, support.module, support.type, support.constant.property-value#F92672
entity.name.class, entity.other.inherited-class, markup.inserted, variable.parameter, variable.other.object, variable.other.property, markup.inserted.git_gutter, meta.var.expr#A6E22E
constant.numeric#00b33c—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.character.escape, constant.other.placeholder, constant.language, constant.other#00cc44—
entity.other.attribute-name.html#4fc500
#FD971Fitalic
markup.changed, markup.changed.git_gutter, entity.name.filename.find-in-files#E6DB74—
markup.ignored.git_gutter, markup.untracked.git_gutter, meta.diff, meta.diff.header, comment#75715E—
constant.numeric.line-number.find-in-files - match#AE81FFA0—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
storage, storage.type, keyword.control.conditional, keyword.control.import, keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.logical, punctuation.definition.keyword, keyword.operator.word, keyword.other, storage.type, storage.modifier, storage.type.js, keyword.control.import, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end.ts#ffcc00—
comment.line, comment.block, punctuation.definition.comment, comment.block.documentation, meta.toc-list#a6a6a6—
entity.name.class, entity.name.struct, entity.name.enum, entity.name.union, entity.name.trait, entity.name.interface, entity.name.type, entity.name.namespace, entity.name.constant, entity.name.label, entity.name.section, entity.name.class.forward-decl, entity.name.tag, entity.other.inherited-class, entity.name.function, entity.name.function.constructor, entity.name.function.destructor, support.function, support.class#0066ff
token.info-token, keyword.operator.new, variable.language#3d96fd—
string.quoted.single, string.quoted.double, string.quoted.triple, punctuation.definition.string.begin, punctuation.definition.string.end, string.quoted.other, string.unquoted, string.regexp, variable.parameter.url.css#25baff—
invalid.illegal, invalid.deprecated#ca3e6d—
meta.class, meta.struct, meta.enum, meta.union, meta.trait, meta.interface, meta.type, meta.block, punctuation.section.block.begin, punctuation.section.block.end, meta.braces, punctuation.section.braces.begin, punctuation.section.braces.end, meta.function, meta.function.parameters, meta.function.return-type, meta.group, punctuation.section.group.begin, punctuation.section.group.end, meta.parens, punctuation.section.parens.begin, punctuation.section.parens.end, meta.brackets, punctuation.section.brackets.begin, punctuation.section.brackets.end, meta.namespace, meta.preprocessor, meta.generic, punctuation.definition.generic.begin, punctuation.definition.generic.end, meta.path, meta.tag, meta.function-call, meta.paragraph, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.separator.continuation, source, punctuation.separator, punctuation.accessor, markup.heading, markup.underline.link, markup.list.unnumbered, markup.list.numbered, markup.quote, markup.bold, markup.italic, markup.underline, markup.raw.inline, markup.raw.block, markup.inserted, markup.deleted, markup.other, entity.name.variable, meta.import.js.jsx.ts.tsc, source.js.jsx.ts.tsc, meta.structure.dictionary.json string.quoted.double.json, variable.other, punctuation.definition.variable, variable.other.member, variable.function, text.html, text.xml, punctuation.definition.tag.end.html, meta.tag.metadata.meta.void.html, punctuation.definition.tag.begin.html, meta.tag.inline.a.start.html, text.html.derivative, meta.tag.without-attributes, support.type.property-name.css, variable.other.readwrite.alias.js.jsx, variable.other.readwrite.alias.ts#cccccc—
meta.definition.variable.js.jsx, meta.array-binding-pattern-variable.js.jsx, meta.var.expr.js.jsx, meta.block.js.jsx, meta.function.js.jsx, source.js.jsx, variable.other.constant, variable.other.readwrite, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, variable, variable.parameter, variable.other.property.ts, variable.other.property.js, variable.other.property.jsx#ff5500
entity.name.function, keyword.control.from, variable.other.property, entity.name.function, meta.var.expr, keyword.other.unit.px, keyword.control.import, keyword.control.from, keyword.control.conditional, punctuation.separator.key-value, support.constant, punctuation.definition.string.begin.json.comments, storage.type.function, storage.type, support.type.property-name, string.quoted.double, keyword.operator.relational, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.logical, keyword.operator.type.annotation, string.quoted.double, meta.embedded.expression, meta.tag.attributes, meta.tag, meta.tag.without-attributes, punctuation.terminator.rule, keyword.other, keyword.operator, constant.numeric.decimal, storage.type.js, storage.type.function.arrow, keyword.operator.relational, keyword.operator.ternary, keyword.operator.assignment, punctuation.definition.entity.css, support.other.variable—
entity.name.tag.css, entity.name.tag.custom.css, entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.class.css, keyword.control.at-rule.media.css, keyword.control.at-rule.import.css, keyword.operator.new, keyword.control, support.class, variable.other.constant.js.jsx, variable.other.constant.jsx, variable.other.constant.js, storage.modifier—italic
LS Unique by LS - VS Code Theme