Skip to main content
CodingTheme

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#f78166
  • activityBar.background#141c24
  • activityBar.border#2e4052
  • activityBar.foreground#f0f4f7
  • activityBar.inactiveForeground#7d8590
  • activityBarBadge.background#3591ed
  • activityBarBadge.foreground#ffffff
  • badge.background#3591ed
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#7d8590
  • breadcrumb.focusForeground#f0f4f7
  • breadcrumb.foreground#7d8590
  • breadcrumbPicker.background#1a242e
  • button.background#3591ed
  • button.foreground#ffffff
  • button.hoverBackground#56a3f0
  • button.secondaryBackground#282e33
  • button.secondaryForeground#c9d1d9
  • button.secondaryHoverBackground#2e4052
  • checkbox.background#1a242e
  • checkbox.border#2e4052
  • debugConsole.errorForeground#ffa198
  • debugConsole.infoForeground#8b949e
  • debugConsole.sourceForeground#e3b341
  • debugConsole.warningForeground#d29922
  • debugConsoleInputIcon.foreground#bc8cff
  • debugIcon.breakpointForeground#f85149
  • debugTokenExpression.boolean#56d364
  • debugTokenExpression.error#ffa198
  • debugTokenExpression.name#79c0ff
  • debugTokenExpression.number#56d364
  • debugTokenExpression.string#a5d6ff
  • debugTokenExpression.value#a5d6ff
  • debugToolBar.background#1a242e
  • descriptionForeground#7d8590
  • diffEditor.insertedLineBackground#23863626
  • diffEditor.insertedTextBackground#3fb9504d
  • diffEditor.removedLineBackground#da363326
  • diffEditor.removedTextBackground#ff7b724d
  • dropdown.background#1a242e
  • dropdown.border#2e4052
  • dropdown.foreground#f0f4f7
  • dropdown.listBackground#1a242e
  • editor.background#141c24
  • editor.findMatchBackground#9e6a03
  • editor.findMatchHighlightBackground#f2cc6080
  • editor.focusedStackFrameHighlightBackground#2ea04366
  • editor.foldBackground#6e76811a
  • editor.lineHighlightBackground#6e76811a
  • editor.linkedEditingBackground#2f81f712
  • editor.selectionHighlightBackground#3fb95040
  • editor.stackFrameHighlightBackground#bb800966
  • editor.wordHighlightBackground#6e768180
  • editor.wordHighlightBorder#6e768199
  • editor.wordHighlightStrongBackground#6e76814d
  • editor.wordHighlightStrongBorder#6e768199
  • editorBracketMatch.background#3fb95040
  • editorBracketMatch.border#3fb95099
  • editorCursor.foreground#2f81f7
  • editorGroup.border#2e4052
  • editorGroupHeader.tabsBackground#0f141a
  • editorGroupHeader.tabsBorder#2e4052
  • editorGutter.addedBackground#2ea04366
  • editorGutter.deletedBackground#f8514966
  • editorGutter.modifiedBackground#bb800966
  • editorIndentGuide.activeBackground#f0f4f73d
  • editorIndentGuide.background#f0f4f71f
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#7d8590
  • editorInlayHint.paramBackground#8b949e33
  • editorInlayHint.paramForeground#7d8590
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#7d8590
  • editorLineNumber.activeForeground#f0f4f7
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#0f141a
  • editorWhitespace.foreground#484f58
  • editorWidget.background#1a242e
  • errorForeground#f85149
  • focusBorder#3591ed
  • foreground#f0f4f7
  • gitDecoration.addedResourceForeground#3fb950
  • gitDecoration.conflictingResourceForeground#db6d28
  • gitDecoration.deletedResourceForeground#f85149
  • gitDecoration.ignoredResourceForeground#6e7681
  • gitDecoration.modifiedResourceForeground#d29922
  • gitDecoration.submoduleResourceForeground#7d8590
  • gitDecoration.untrackedResourceForeground#3fb950
  • icon.foreground#7d8590
  • input.background#141c24
  • input.border#2e4052
  • input.foreground#f0f4f7
  • input.placeholderForeground#6e7681
  • keybindingLabel.foreground#f0f4f7
  • list.activeSelectionBackground#6e768166
  • list.activeSelectionForeground#f0f4f7
  • list.focusBackground#388bfd26
  • list.focusForeground#f0f4f7
  • list.highlightForeground#2f81f7
  • list.hoverBackground#6e76811a
  • list.hoverForeground#f0f4f7
  • list.inactiveFocusBackground#388bfd26
  • list.inactiveSelectionBackground#6e768166
  • list.inactiveSelectionForeground#f0f4f7
  • minimapSlider.activeBackground#8b949e47
  • minimapSlider.background#8b949e33
  • minimapSlider.hoverBackground#8b949e3d
  • notificationCenterHeader.background#1a242e
  • notificationCenterHeader.foreground#7d8590
  • notifications.background#1a242e
  • notifications.border#2e4052
  • notifications.foreground#f0f4f7
  • notificationsErrorIcon.foreground#f85149
  • notificationsInfoIcon.foreground#2f81f7
  • notificationsWarningIcon.foreground#d29922
  • panel.background#0f141a
  • panel.border#2e4052
  • panelInput.border#2e4052
  • panelTitle.activeBorder#f78166
  • panelTitle.activeForeground#f0f4f7
  • panelTitle.inactiveForeground#7d8590
  • peekViewEditor.background#6e76811a
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#141c24
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#2e4052
  • pickerGroup.foreground#7d8590
  • progressBar.background#3591ed
  • quickInput.background#1a242e
  • quickInput.foreground#f0f4f7
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#8b949e47
  • scrollbarSlider.background#8b949e33
  • scrollbarSlider.hoverBackground#8b949e3d
  • settings.headerForeground#f0f4f7
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#0f141a
  • sideBar.border#2e4052
  • sideBar.foreground#f0f4f7
  • sideBarSectionHeader.background#0f141a
  • sideBarSectionHeader.border#2e4052
  • sideBarSectionHeader.foreground#f0f4f7
  • sideBarTitle.foreground#f0f4f7
  • statusBar.background#141c24
  • statusBar.border#2e4052
  • statusBar.debuggingBackground#da3633
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#3591ed80
  • statusBar.foreground#7d8590
  • statusBar.noFolderBackground#141c24
  • statusBarItem.activeBackground#f0f4f71f
  • statusBarItem.focusBorder#3591ed
  • statusBarItem.hoverBackground#f0f4f714
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#2e4052
  • statusBarItem.remoteForeground#f0f4f7
  • symbolIcon.arrayForeground#f0883e
  • symbolIcon.booleanForeground#58a6ff
  • symbolIcon.classForeground#f0883e
  • symbolIcon.colorForeground#79c0ff
  • symbolIcon.constantForeground#aff5b4#7ee787#56d364#3fb950#2ea043#238636#196c2e#0f5323#033a16#04260f
  • symbolIcon.constructorForeground#d2a8ff
  • symbolIcon.enumeratorForeground#f0883e
  • symbolIcon.enumeratorMemberForeground#58a6ff
  • symbolIcon.eventForeground#6e7681
  • symbolIcon.fieldForeground#f0883e
  • symbolIcon.fileForeground#d29922
  • symbolIcon.folderForeground#d29922
  • symbolIcon.functionForeground#bc8cff
  • symbolIcon.interfaceForeground#f0883e
  • symbolIcon.keyForeground#58a6ff
  • symbolIcon.keywordForeground#ff7b72
  • symbolIcon.methodForeground#bc8cff
  • symbolIcon.moduleForeground#ff7b72
  • symbolIcon.namespaceForeground#ff7b72
  • symbolIcon.nullForeground#58a6ff
  • symbolIcon.numberForeground#3fb950
  • symbolIcon.objectForeground#f0883e
  • symbolIcon.operatorForeground#79c0ff
  • symbolIcon.packageForeground#f0883e
  • symbolIcon.propertyForeground#f0883e
  • symbolIcon.referenceForeground#58a6ff
  • symbolIcon.snippetForeground#58a6ff
  • symbolIcon.stringForeground#79c0ff
  • symbolIcon.structForeground#f0883e
  • symbolIcon.textForeground#79c0ff
  • symbolIcon.typeParameterForeground#79c0ff
  • symbolIcon.unitForeground#58a6ff
  • symbolIcon.variableForeground#f0883e
  • tab.activeBackground#141c24
  • tab.activeBorder#141c24
  • tab.activeBorderTop#f78166
  • tab.activeForeground#f0f4f7
  • tab.border#2e4052
  • tab.hoverBackground#141c24
  • tab.inactiveBackground#0f141a
  • tab.inactiveForeground#7d8590
  • tab.unfocusedActiveBorder#141c24
  • tab.unfocusedActiveBorderTop#2e4052
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.ansiBlack#484f58
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#6e7681
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#56d364
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#ffa198
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e3b341
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#b1bac4
  • terminal.ansiYellow#d29922
  • terminal.foreground#f0f4f7
  • textBlockQuote.background#0f141a
  • textBlockQuote.border#2e4052
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#2f81f7
  • textLink.foreground#2f81f7
  • textPreformat.foreground#7d8590
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#141c24
  • titleBar.activeForeground#7d8590
  • titleBar.border#2e4052
  • titleBar.inactiveBackground#0f141a
  • titleBar.inactiveForeground#7d8590
  • tree.indentGuidesStroke#21262d
  • welcomePage.buttonBackground#21262d
  • welcomePage.buttonHoverBackground#2e4052

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#c8c6bd
comment#b4c0cb
string, constant.other.symbol#afe346
string.regexp, constant.character, constant.other#97eed1
constant.numeric#e3aeff
constant.language#e3aeff
variable, variable.parameter.function-call#c8c6bd
variable.member#ff7981
variable.language#2cc5f9
storage#ffa100
keyword#ffa100
keyword.operator#ffa05e
punctuation.separator, punctuation.terminator#c8c6bd
punctuation.section#c8c6bd
punctuation.accessor#ffa05e
punctuation.definition.template-expression#ffa100
punctuation.section.embedded#ffa100
meta.embedded#c8c6bd
source.java storage.type, source.haskell storage.type, source.c storage.type#52cfff
entity.other.inherited-class#2cc5f9
storage.type.function#ffa100
source.java storage.type.primitive#2cc5f9
entity.name.function#ffc248
variable.parameter, meta.parameter#e3aeff
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ffc248
support.function, support.macro#ff7981
entity.name.import, entity.name.package#afe346
entity.name#52cfff
entity.name.tag, meta.tag.sgml#2cc5f9
support.class.component#52cfff
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#2cc5f9
entity.other.attribute-name#ffc248
support.constant#ffa05e
support.type, support.class, source.go storage.type#2cc5f9
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#f4bd71
invalid#ff8787
meta.diff, meta.diff.header#d89ad8
source.ruby variable.other.readwrite#ffc248
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#52cfff
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#b4c0cb
support.type.property-name#2cc5f9normal
constant.numeric.line-number.find-in-files - match#b4c0cb
constant.numeric.line-number.match#ffa100
entity.name.filename.find-in-files#afe346
message.error#ff8787
markup.heading, markup.heading entity.name#afe346bold
markup.underline.link, string.other.link#2cc5f9
markup.italic#ff7981
markup.bold#ff7981bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#b4c0cbbold
markup.quote#97eed1
markup.list punctuation.definition.list.begin#ffc248
markup.inserted#7fe35e
markup.changed#70c5ff
markup.deleted#ff7b87
markup.strike#f4bd71
markup.table#2cc5f9
text.html.markdown markup.inline.raw#ffa05e
text.html.markdown meta.dummy.line-break#b4c0cb
punctuation.definition.markdown#b4c0cb

Shiki preview

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

Loading...