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#ec775c
  • activityBar.background#22272e
  • activityBar.border#444c56
  • activityBar.foreground#adbac7
  • activityBar.inactiveForeground#768390
  • activityBarBadge.background#316dca
  • activityBarBadge.foreground#cdd9e5
  • badge.background#316dca
  • badge.foreground#cdd9e5
  • breadcrumb.activeSelectionForeground#768390
  • breadcrumb.focusForeground#adbac7
  • breadcrumb.foreground#768390
  • breadcrumbPicker.background#2d333b
  • button.background#347d39
  • button.foreground#ffffff
  • button.hoverBackground#46954a
  • button.secondaryBackground#3d444d
  • button.secondaryForeground#adbac7
  • button.secondaryHoverBackground#444c56
  • checkbox.background#2d333b
  • checkbox.border#444c56
  • debugConsole.errorForeground#ff938a
  • debugConsole.infoForeground#768390
  • debugConsole.sourceForeground#daaa3f
  • debugConsole.warningForeground#c69026
  • debugConsoleInputIcon.foreground#b083f0
  • debugIcon.breakpointForeground#e5534b
  • debugTokenExpression.boolean#6bc46d
  • debugTokenExpression.error#ff938a
  • debugTokenExpression.name#6cb6ff
  • debugTokenExpression.number#6bc46d
  • debugTokenExpression.string#96d0ff
  • debugTokenExpression.value#96d0ff
  • debugToolBar.background#2d333b
  • descriptionForeground#768390
  • diffEditor.insertedLineBackground#347d3926
  • diffEditor.insertedTextBackground#57ab5a4d
  • diffEditor.removedLineBackground#c93c3726
  • diffEditor.removedTextBackground#f470674d
  • dropdown.background#2d333b
  • dropdown.border#444c56
  • dropdown.foreground#adbac7
  • dropdown.listBackground#2d333b
  • editor.background#22272e
  • editor.findMatchBackground#966600
  • editor.findMatchHighlightBackground#eac55f80
  • editor.focusedStackFrameHighlightBackground#46954a66
  • editor.foldBackground#636e7b1a
  • editor.foreground#D1D7E0
  • editor.lineHighlightBackground#636e7b1a
  • editor.linkedEditingBackground#539bf512
  • editor.selectionHighlightBackground#57ab5a40
  • editor.stackFrameHighlightBackground#ae7c1466
  • editor.wordHighlightBackground#636e7b80
  • editor.wordHighlightBorder#636e7b99
  • editor.wordHighlightStrongBackground#636e7b4d
  • editor.wordHighlightStrongBorder#636e7b99
  • editorBracketHighlight.foreground1#6cb6ff
  • editorBracketHighlight.foreground2#6bc46d
  • editorBracketHighlight.foreground3#daaa3f
  • editorBracketHighlight.foreground4#ff938a
  • editorBracketHighlight.foreground5#fc8dc7
  • editorBracketHighlight.foreground6#dcbdfb
  • editorBracketHighlight.unexpectedBracket.foreground#768390
  • editorBracketMatch.background#57ab5a40
  • editorBracketMatch.border#57ab5a99
  • editorCursor.foreground#539bf5
  • editorGroup.border#444c56
  • editorGroupHeader.tabsBackground#1c2128
  • editorGroupHeader.tabsBorder#444c56
  • editorGutter.addedBackground#46954a66
  • editorGutter.deletedBackground#e5534b66
  • editorGutter.modifiedBackground#ae7c1466
  • editorIndentGuide.activeBackground#adbac73d
  • editorIndentGuide.background#adbac71f
  • editorInlayHint.background#76839033
  • editorInlayHint.foreground#768390
  • editorInlayHint.paramBackground#76839033
  • editorInlayHint.paramForeground#768390
  • editorInlayHint.typeBackground#76839033
  • editorInlayHint.typeForeground#768390
  • editorLineNumber.activeForeground#adbac7
  • editorLineNumber.foreground#636e7b
  • editorOverviewRuler.border#1c2128
  • editorWhitespace.foreground#545d68
  • editorWidget.background#2d333b
  • errorForeground#e5534b
  • focusBorder#316dca
  • foreground#adbac7
  • gitDecoration.addedResourceForeground#57ab5a
  • gitDecoration.conflictingResourceForeground#cc6b2c
  • gitDecoration.deletedResourceForeground#e5534b
  • gitDecoration.ignoredResourceForeground#636e7b
  • gitDecoration.modifiedResourceForeground#c69026
  • gitDecoration.submoduleResourceForeground#768390
  • gitDecoration.untrackedResourceForeground#57ab5a
  • icon.foreground#768390
  • input.background#22272e
  • input.border#444c56
  • input.foreground#adbac7
  • input.placeholderForeground#636e7b
  • keybindingLabel.foreground#adbac7
  • list.activeSelectionBackground#636e7b66
  • list.activeSelectionForeground#adbac7
  • list.focusBackground#4184e426
  • list.focusForeground#adbac7
  • list.highlightForeground#539bf5
  • list.hoverBackground#636e7b1a
  • list.hoverForeground#adbac7
  • list.inactiveFocusBackground#4184e426
  • list.inactiveSelectionBackground#636e7b66
  • list.inactiveSelectionForeground#adbac7
  • minimapSlider.activeBackground#76839047
  • minimapSlider.background#76839033
  • minimapSlider.hoverBackground#7683903d
  • notificationCenterHeader.background#2d333b
  • notificationCenterHeader.foreground#768390
  • notifications.background#2d333b
  • notifications.border#444c56
  • notifications.foreground#adbac7
  • notificationsErrorIcon.foreground#e5534b
  • notificationsInfoIcon.foreground#539bf5
  • notificationsWarningIcon.foreground#c69026
  • panel.background#1c2128
  • panel.border#444c56
  • panelInput.border#444c56
  • panelTitle.activeBorder#ec775c
  • panelTitle.activeForeground#adbac7
  • panelTitle.inactiveForeground#768390
  • peekViewEditor.background#636e7b1a
  • peekViewEditor.matchHighlightBackground#ae7c1466
  • peekViewResult.background#22272e
  • peekViewResult.matchHighlightBackground#ae7c1466
  • pickerGroup.border#444c56
  • pickerGroup.foreground#768390
  • progressBar.background#316dca
  • quickInput.background#2d333b
  • quickInput.foreground#adbac7
  • scrollbar.shadow#545d6833
  • scrollbarSlider.activeBackground#76839047
  • scrollbarSlider.background#76839033
  • scrollbarSlider.hoverBackground#7683903d
  • settings.headerForeground#adbac7
  • settings.modifiedItemIndicator#ae7c1466
  • sideBar.background#1c2128
  • sideBar.border#444c56
  • sideBar.foreground#adbac7
  • sideBarSectionHeader.background#1c2128
  • sideBarSectionHeader.border#444c56
  • sideBarSectionHeader.foreground#adbac7
  • sideBarTitle.foreground#adbac7
  • statusBar.background#22272e
  • statusBar.border#444c56
  • statusBar.debuggingBackground#c93c37
  • statusBar.debuggingForeground#cdd9e5
  • statusBar.focusBorder#316dca80
  • statusBar.foreground#768390
  • statusBar.noFolderBackground#22272e
  • statusBarItem.activeBackground#adbac71f
  • statusBarItem.focusBorder#316dca
  • statusBarItem.hoverBackground#adbac714
  • statusBarItem.prominentBackground#636e7b66
  • statusBarItem.remoteBackground#444c56
  • statusBarItem.remoteForeground#adbac7
  • symbolIcon.arrayForeground#e0823d
  • symbolIcon.booleanForeground#539bf5
  • symbolIcon.classForeground#e0823d
  • symbolIcon.colorForeground#6cb6ff
  • symbolIcon.constantForeground#b4f1b4#8ddb8c#6bc46d#57ab5a#46954a#347d39#2b6a30#245829#1b4721#113417
  • symbolIcon.constructorForeground#dcbdfb
  • symbolIcon.enumeratorForeground#e0823d
  • symbolIcon.enumeratorMemberForeground#539bf5
  • symbolIcon.eventForeground#636e7b
  • symbolIcon.fieldForeground#e0823d
  • symbolIcon.fileForeground#c69026
  • symbolIcon.folderForeground#c69026
  • symbolIcon.functionForeground#b083f0
  • symbolIcon.interfaceForeground#e0823d
  • symbolIcon.keyForeground#539bf5
  • symbolIcon.keywordForeground#f47067
  • symbolIcon.methodForeground#b083f0
  • symbolIcon.moduleForeground#f47067
  • symbolIcon.namespaceForeground#f47067
  • symbolIcon.nullForeground#539bf5
  • symbolIcon.numberForeground#57ab5a
  • symbolIcon.objectForeground#e0823d
  • symbolIcon.operatorForeground#6cb6ff
  • symbolIcon.packageForeground#e0823d
  • symbolIcon.propertyForeground#e0823d
  • symbolIcon.referenceForeground#539bf5
  • symbolIcon.snippetForeground#539bf5
  • symbolIcon.stringForeground#6cb6ff
  • symbolIcon.structForeground#e0823d
  • symbolIcon.textForeground#6cb6ff
  • symbolIcon.typeParameterForeground#6cb6ff
  • symbolIcon.unitForeground#539bf5
  • symbolIcon.variableForeground#e0823d
  • tab.activeBackground#22272e
  • tab.activeBorder#22272e
  • tab.activeBorderTop#ec775c
  • tab.activeForeground#adbac7
  • tab.border#444c56
  • tab.hoverBackground#22272e
  • tab.inactiveBackground#1c2128
  • tab.inactiveForeground#768390
  • tab.unfocusedActiveBorder#22272e
  • tab.unfocusedActiveBorderTop#444c56
  • tab.unfocusedHoverBackground#636e7b1a
  • terminal.ansiBlack#545d68
  • terminal.ansiBlue#539bf5
  • terminal.ansiBrightBlack#636e7b
  • terminal.ansiBrightBlue#6cb6ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#6bc46d
  • terminal.ansiBrightMagenta#dcbdfb
  • terminal.ansiBrightRed#ff938a
  • terminal.ansiBrightWhite#cdd9e5
  • terminal.ansiBrightYellow#daaa3f
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#57ab5a
  • terminal.ansiMagenta#b083f0
  • terminal.ansiRed#f47067
  • terminal.ansiWhite#909dab
  • terminal.ansiYellow#c69026
  • terminal.foreground#adbac7
  • textBlockQuote.background#1c2128
  • textBlockQuote.border#444c56
  • textCodeBlock.background#636e7b66
  • textLink.activeForeground#539bf5
  • textLink.foreground#539bf5
  • textPreformat.background#636e7b66
  • textPreformat.foreground#768390
  • textSeparator.foreground#373e47
  • titleBar.activeBackground#22272e
  • titleBar.activeForeground#768390
  • titleBar.border#444c56
  • titleBar.inactiveBackground#1c2128
  • titleBar.inactiveForeground#768390
  • tree.indentGuidesStroke#373e47
  • welcomePage.buttonBackground#373e47
  • welcomePage.buttonHoverBackground#444c56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#768390
constant.other.placeholder, constant.character#f47067
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#6cb6ff
entity.name, meta.export.default, meta.definition.variable#f69d50
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#adbac7
entity.name.function#dcbdfb
entity.name.tag, support.class.component#8ddb8c
keyword#f47067
storage, storage.type#f47067
storage.modifier.package, storage.modifier.import, storage.type.java#adbac7
string, string punctuation.section.embedded source#96d0ff
support#6cb6ff
meta.property-name#6cb6ff
variable#f69d50
variable.other#adbac7
invalid.broken#ff938aitalic
invalid.deprecated#ff938aitalic
invalid.illegal#ff938aitalic
invalid.unimplemented#ff938aitalic
carriage-return#cdd9e5italic underline
message.error#ff938a
string variable#6cb6ff
source.regexp, string.regexp#96d0ff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#96d0ff
string.regexp constant.character.escape#8ddb8cbold
support.constant#6cb6ff
support.variable#6cb6ff
support.type.property-name.json#8ddb8c
meta.module-reference#6cb6ff
punctuation.definition.list.begin.markdown#f69d50
markup.heading, markup.heading entity.name#6cb6ffbold
markup.quote#8ddb8c
markup.italic#adbac7italic
markup.bold#adbac7bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#6cb6ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ff938a
punctuation.section.embedded#f47067
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#8ddb8c
markup.changed, punctuation.definition.changed#f69d50
markup.ignored, markup.untracked#2d333b
meta.diff.range#dcbdfbbold
meta.diff.header#6cb6ff
meta.separator#6cb6ffbold
meta.output#6cb6ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#768390
brackethighlighter.unmatched#ff938a
constant.other.reference.link, string.other.link#96d0ff
comment, punctuation.definition.comment, string.comment#7CA964
variable, variable.other.readwrite, variable.other.object, variable.other.definition, variable.parameter, entity.name.variable, meta.definition.variable, meta.definition.variable variable.other.constant#D1D7E0
variable.other.property, variable.other.object.property, variable.other.constant.property, variable.property, support.variable.property#6CB6FF
variable.other.constant, variable.other.constant.object, variable.other.enummember#6CB6FF
keyword.operator.assignment, keyword.operator.assignment.compound, keyword.operator.comparison, keyword.operator.relational, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.decrement, keyword.operator.ternary, keyword.operator.arrow, storage.type.function.arrow, meta.arrow.ts storage.type.function.arrow, meta.arrow storage.type.function.arrow#6CB6FF
constant.numeric, constant.numeric.decimal, constant.numeric.hex, constant.numeric.integer, constant.numeric.float#63EC63
keyword.operator.spread, keyword.operator.rest, keyword.operator.type.annotation, keyword.operator.optional#D1D7E0
support.class.builtin, support.class.promise, support.class.error, new.expr entity.name.function#F69D50
punctuation.definition.comment#7CA964
text.html entity.name.tag, text.html entity.name.tag.html, text.html meta.tag.metadata.doctype entity.name.tag#F47067
text.html entity.other.attribute-name, text.html entity.other.attribute-name.html, text.html entity.other.attribute-name.id.html, text.html entity.other.attribute-name.class.html#F69D50
text.html meta.tag.metadata.doctype entity.other.attribute-name#D1D7E0
text.html string.quoted.double.html, text.html string.quoted.single.html, text.html string.unquoted.html, text.html string.quoted.double.html punctuation.definition.string, text.html string.quoted.single.html punctuation.definition.string#D1D7E0
text.html source.css entity.name.tag#F69D50
text.html punctuation.separator.key-value.html, text.html punctuation.definition.tag#D1D7E0
text.html source.css support.type.property-name, text.html source.css meta.property-name, text.html source.css support.type.vendored.property-name, text.html meta.attribute.style support.type.property-name#6CB6FF
text.html source.css support.constant.property-value, text.html source.css support.constant.font-name, text.html source.css support.constant.color, text.html meta.attribute.style support.constant.property-value#D1D7E0
text.html source.css entity.other.attribute-name.class, text.html source.css entity.other.attribute-name.id, text.html source.css entity.other.attribute-name.pseudo-class, text.html source.css entity.other.attribute-name.pseudo-element#F69D50
text.html source.css support.function#CBA6F7
source.js entity.name.function, source.jsx entity.name.function, source.js.jsx entity.name.function, source.ts entity.name.function, source.tsx entity.name.function, source.js meta.function-call entity.name.function, source.ts meta.function-call entity.name.function, source.tsx meta.function-call entity.name.function, source.js entity.name.function.member, source.ts entity.name.function.member, source.tsx entity.name.function.member, source.js meta.method.declaration entity.name.function, source.ts meta.method.declaration entity.name.function, source.tsx meta.method.declaration entity.name.function, source.js support.function, source.ts support.function, source.tsx support.function, source.js variable.function, source.ts variable.function, source.tsx variable.function#CBA6F7
source.js entity.name.type, source.ts entity.name.type, source.tsx entity.name.type, source.js entity.name.class, source.ts entity.name.class, source.tsx entity.name.class, source.ts entity.name.type.class, source.tsx entity.name.type.class, source.ts entity.name.type.interface, source.tsx entity.name.type.interface, source.ts entity.name.type.enum, source.tsx entity.name.type.enum, source.ts entity.name.type.alias, source.tsx entity.name.type.alias, source.ts entity.name.type.module, source.js entity.other.inherited-class, source.ts entity.other.inherited-class, source.tsx entity.other.inherited-class, source.js support.class, source.ts support.class, source.tsx support.class#F69D50
source.js keyword.control, source.ts keyword.control, source.tsx keyword.control, source.js storage.type, source.ts storage.type, source.tsx storage.type, source.js storage.modifier, source.ts storage.modifier, source.tsx storage.modifier, source.js keyword.operator.new, source.ts keyword.operator.new, source.tsx keyword.operator.new, source.js keyword.operator.expression, source.ts keyword.operator.expression, source.tsx keyword.operator.expression#F47067
source.js.jsx entity.name.tag, source.jsx entity.name.tag, source.tsx entity.name.tag, source.js entity.name.tag.js.jsx, source.tsx entity.name.tag.tsx#F47067
source.js.jsx entity.other.attribute-name, source.jsx entity.other.attribute-name, source.tsx entity.other.attribute-name, source.js entity.other.attribute-name.jsx#F69D50
source.js string.quoted, source.jsx string.quoted, source.js.jsx string.quoted, source.ts string.quoted, source.tsx string.quoted, source.js string.template, source.jsx string.template, source.js.jsx string.template, source.ts string.template, source.tsx string.template, source.js string.quoted punctuation.definition.string, source.ts string.quoted punctuation.definition.string, source.tsx string.quoted punctuation.definition.string, source.jsx string.quoted punctuation.definition.string, source.js string.template punctuation.definition.string, source.ts string.template punctuation.definition.string, source.tsx string.template punctuation.definition.string#D1D7E0
source.json string.quoted.double, source.json string.quoted.double punctuation.definition.string, source.json meta.structure.dictionary.value string.quoted.double#D1D7E0
source.css entity.name.tag, source.css entity.other.attribute-name.class, source.css entity.other.attribute-name.id, source.css entity.other.attribute-name.pseudo-class, source.css entity.other.attribute-name.pseudo-element, source.css entity.other.attribute-name.parent-selector#F69D50
source.css support.type.property-name, source.css meta.property-name, source.css support.type.vendored.property-name#6CB6FF
source.css support.constant.property-value, source.css support.constant.vendored.property-value, source.css support.constant.font-name, source.css support.constant.color, source.css constant.other.color, source.css keyword.other.unit#D1D7E0
source.css support.function, source.css meta.function#CBA6F7
source.css string.quoted.single, source.css string.quoted.double, source.css string.quoted.single punctuation.definition.string, source.css string.quoted.double punctuation.definition.string#D1D7E0
source.css keyword.control.at-rule, source.css punctuation.definition.keyword#F47067
source.css variable, source.css variable.scss, source.css variable.other.less#D1D7E0
entity.name.function, meta.function-call entity.name.function, entity.name.function.member, entity.name.function.call, support.function, variable.function#CBA6F7
entity.name.type, entity.name.class, entity.other.inherited-class, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.struct, entity.name.namespace, storage.type.class, storage.type.struct, storage.type.enum, storage.type.interface#F69D50
storage.type.java#F69D50
keyword.control, keyword.other, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.operator.wordlike, variable.language#F47067
entity.name.tag#F47067
entity.other.attribute-name#F69D50
string.quoted, string.interpolated, string.unquoted, string.quoted punctuation.definition.string#D1D7E0
string.template, string.quoted.other.template, string.template punctuation.definition.string, punctuation.definition.string.template, source.js string.template, source.jsx string.template, source.js.jsx string.template, source.ts string.template, source.tsx string.template, source.js string.template punctuation.definition.string, source.ts string.template punctuation.definition.string, source.tsx string.template punctuation.definition.string#F4D4AE
source.json support.type.property-name, source.json support.type.property-name punctuation.definition.string, source.json meta.structure.dictionary.key string.quoted.double#6CB6FF
source.js meta.object-literal.key, source.jsx meta.object-literal.key, source.js.jsx meta.object-literal.key, source.ts meta.object-literal.key, source.tsx meta.object-literal.key, source.js meta.object-literal.key string.quoted.double, source.ts meta.object-literal.key string.quoted.double, source.tsx meta.object-literal.key string.quoted.double, source.js meta.object-literal.key string.quoted.single, source.ts meta.object-literal.key string.quoted.single, meta.object-literal.key#6CB6FF
string.quoted.single.nested.in-string, string.quoted.double.nested.in-string#F4D4AE
punctuation.bracket.in-string#F2CC60
Vscode Nightfall Theme by JUNGHO - VS Code Theme