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.

  • actionBar.toggledBackground#293536
  • activityBar.activeBorder#55e0ed
  • activityBar.background#2b393a
  • activityBar.border#92e9f2
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#959c9c
  • activityBarBadge.background#54d5e1
  • activityBarBadge.foreground#0a0a0a
  • activityBarTop.foreground#55e0ed
  • activityBarTop.inactiveForeground#e2e2e2
  • badge.background#54d5e1
  • badge.foreground#0a0a0a
  • breadcrumb.activeSelectionForeground#768390
  • breadcrumb.focusForeground#adbac7
  • breadcrumb.foreground#768390
  • breadcrumbPicker.background#1E1E1E
  • button.background#54d5e1
  • button.foreground#0A0A0A
  • button.hoverBackground#65edfa
  • button.secondaryBackground#3d444d
  • button.secondaryForeground#adbac7
  • button.secondaryHoverBackground#444c56
  • chat.checkpointSeparator#55e0ed
  • chat.requestBorder#344e52
  • chat.requestBubbleBackground#3c676c
  • chat.requestBubbleHoverBackground#4aa0a852
  • checkbox.background#3C3C3C
  • checkbox.border#80808059
  • 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#73c2fe
  • debugTokenExpression.number#6bc46d
  • debugTokenExpression.string#97d8fe
  • debugTokenExpression.value#97d8fe
  • debugToolBar.background#1E1E1E
  • descriptionForeground#CCCCCC99
  • diffEditor.insertedLineBackground#c2ffc22f
  • diffEditor.insertedTextBackground#52f35234
  • diffEditor.removedLineBackground#ff83981e
  • diffEditor.removedTextBackground#ff839833
  • diffEditor.unchangedCodeBackground#c4733118
  • diffEditor.unchangedRegionBackground#c47331d3
  • diffEditor.unchangedRegionForeground#FFFFFF
  • diffEditor.unchangedRegionShadow#55e0ed
  • diffEditorGutter.insertedLineBackground#c2ffc233
  • diffEditorGutter.removedLineBackground#ff839834
  • diffEditorOverview.insertedForeground#52f35217
  • diffEditorOverview.removedForeground#ff340125
  • dropdown.background#2c3c3e
  • dropdown.border#7be5f0
  • dropdown.foreground#f0f0f0
  • dropdown.listBackground#2b393a
  • editor.background#202222
  • editor.findMatchBackground#966600
  • editor.findMatchHighlightBackground#eac55f80
  • editor.focusedStackFrameHighlightBackground#46954a66
  • editor.foldBackground#636e7b1a
  • editor.foreground#D4D4D4
  • editor.lineHighlightBackground#273031
  • editor.lineHighlightBorder#2c3c3e
  • editor.linkedEditingBackground#55e0ed12
  • editor.selectionHighlightBackground#55e0ed47
  • editor.stackFrameHighlightBackground#ae7c1466
  • editor.wordHighlightBackground#636e7b80
  • editor.wordHighlightBorder#636e7b99
  • editor.wordHighlightStrongBackground#636e7b4d
  • editor.wordHighlightStrongBorder#636e7b99
  • editorBracketHighlight.foreground1#73c2fe
  • 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#55e0ed
  • editorGroup.border#444444
  • editorGroup.dropBackground#53595D80
  • editorGroupHeader.noTabsBackground#293536
  • editorGroupHeader.tabsBackground#293536
  • editorGroupHeader.tabsBorder#344e52
  • editorGutter.addedBackground#46954a66
  • editorGutter.deletedBackground#e5534b66
  • editorGutter.itemBackground#54d5e1
  • editorGutter.itemGlyphForeground#0A0A0A
  • editorGutter.modifiedBackground#ae7c1466
  • editorIndentGuide.activeBackground#adbac73d
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background#adbac71f
  • editorIndentGuide.background1#404040
  • editorInlayHint.background#76839033
  • editorInlayHint.foreground#768390
  • editorInlayHint.paramBackground#76839033
  • editorInlayHint.paramForeground#768390
  • editorInlayHint.typeBackground#76839033
  • editorInlayHint.typeForeground#768390
  • editorLineNumber.activeForeground#adbac7
  • editorLineNumber.foreground#636e7b
  • editorLink.activeForeground#4ba4ad
  • editorOverviewRuler.border#1c2128
  • editorStickyScroll.shadow#55e0ed3d
  • editorSuggestWidget.background#1E1E1E
  • editorWhitespace.foreground#545d68
  • editorWidget.background#1E1E1E
  • errorForeground#F48771
  • focusBorder#92e9f2
  • foreground#CCCCCC
  • gitDecoration.addedResourceForeground#57ab5a
  • gitDecoration.conflictingResourceForeground#cc6b2c
  • gitDecoration.deletedResourceForeground#f4877a
  • gitDecoration.ignoredResourceForeground#636e7b
  • gitDecoration.modifiedResourceForeground#deb26e
  • gitDecoration.submoduleResourceForeground#768390
  • gitDecoration.untrackedResourceForeground#79b777
  • icon.foreground#96eaf2
  • inlineChatDiff.inserted#c2ffc22f
  • inlineChatDiff.removed#ff83981e
  • input.background#2c3c3e
  • input.border#00000007
  • input.foreground#cccccc
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#7fe6f0
  • keybindingLabel.foreground#adbac7
  • list.activeSelectionBackground#55e0ed5c
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#FFFFFF
  • list.dropBackground#383B3D
  • list.focusAndSelectionOutline#92e9f2
  • list.focusBackground#55e0ed6b
  • list.focusForeground#FFFFFF
  • list.highlightForeground#55e0ed
  • list.hoverBackground#2e4042
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#04395E
  • list.inactiveSelectionBackground#55e0ed3d
  • list.inactiveSelectionForeground#ffffff
  • menu.background#252526
  • menu.border#80808059
  • menu.foreground#CCCCCC
  • menu.selectionBackground#04395E
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#454545
  • minimap.background#1E1E1E
  • minimapSlider.activeBackground#76839047
  • minimapSlider.background#76839033
  • minimapSlider.hoverBackground#7683903d
  • notebook.cellBorderColor#80808059
  • notebook.selectedCellBackground#55e0ed47
  • notificationCenterHeader.background#2d333b
  • notificationCenterHeader.foreground#768390
  • notifications.background#2c3c3e
  • notifications.border#92e9f2
  • notifications.foreground#FFFFFF
  • notificationsErrorIcon.foreground#e5534b
  • notificationsInfoIcon.foreground#55e0ed
  • notificationsWarningIcon.foreground#c69026
  • notificationToast.border#92e9f2
  • panel.background#293536
  • panel.border#344e52
  • panelInput.border#80808059
  • panelSectionHeader.background#2d3e40
  • panelSectionHeader.border#80808059
  • panelSectionHeader.foreground#ffffff
  • panelStickyScroll.shadow#55e0ed3d
  • panelTitle.activeBorder#92e9f2
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#e2e2e2
  • peekViewEditor.background#636e7b1a
  • peekViewEditor.matchHighlightBackground#ae7c1466
  • peekViewResult.background#22272e
  • peekViewResult.matchHighlightBackground#ae7c1466
  • pickerGroup.border#80808059
  • pickerGroup.foreground#768390
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#55e0ed
  • quickInput.background#1E1E1E
  • quickInput.foreground#D4D4D4
  • scrollbar.shadow#55e0ed73
  • scrollbarSlider.activeBackground#54d5e173
  • scrollbarSlider.background#54d5e12e
  • scrollbarSlider.hoverBackground#54d5e14d
  • searchEditor.textInputBorder#80808059
  • settings.headerForeground#adbac7
  • settings.modifiedItemIndicator#ae7c1466
  • settings.numberInputBorder#80808059
  • settings.textInputBorder#80808059
  • sideBar.background#293536
  • sideBar.border#344e52
  • sideBar.foreground#e2e2e2
  • sideBarSectionHeader.background#2d3e40
  • sideBarSectionHeader.border#80808059
  • sideBarSectionHeader.foreground#ffffff
  • sideBarStickyScroll.background#2b393a
  • sideBarStickyScroll.shadow#92e9f2
  • sideBarTitle.foreground#ffffff
  • statusBar.background#3d6c71
  • statusBar.border#52686b
  • statusBar.debuggingBackground#a97858
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#55e0ed80
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#463c61
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#adbac71f
  • statusBarItem.errorBackground#c93c37
  • statusBarItem.focusBorder#55e0ed
  • statusBarItem.hoverBackground#48969d
  • statusBarItem.prominentBackground#636e7b66
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFFFFF
  • symbolIcon.arrayForeground#e0823d
  • symbolIcon.booleanForeground#5daaf5
  • symbolIcon.classForeground#e0823d
  • symbolIcon.colorForeground#73c2fe
  • symbolIcon.constantForeground#b4f1b4#8ddb8c#6bc46d#57ab5a#46954a#347d39#2b6a30#245829#1b4721#113417
  • symbolIcon.constructorForeground#dcbdfb
  • symbolIcon.enumeratorForeground#e0823d
  • symbolIcon.enumeratorMemberForeground#5daaf5
  • symbolIcon.eventForeground#636e7b
  • symbolIcon.fieldForeground#e0823d
  • symbolIcon.fileForeground#c69026
  • symbolIcon.folderForeground#c69026
  • symbolIcon.functionForeground#b083f0
  • symbolIcon.interfaceForeground#e0823d
  • symbolIcon.keyForeground#5daaf5
  • symbolIcon.keywordForeground#f47067
  • symbolIcon.methodForeground#b083f0
  • symbolIcon.moduleForeground#f47067
  • symbolIcon.namespaceForeground#f47067
  • symbolIcon.nullForeground#5daaf5
  • symbolIcon.numberForeground#57ab5a
  • symbolIcon.objectForeground#e0823d
  • symbolIcon.operatorForeground#73c2fe
  • symbolIcon.packageForeground#e0823d
  • symbolIcon.propertyForeground#e0823d
  • symbolIcon.referenceForeground#5daaf5
  • symbolIcon.snippetForeground#5daaf5
  • symbolIcon.stringForeground#73c2fe
  • symbolIcon.structForeground#e0823d
  • symbolIcon.textForeground#73c2fe
  • symbolIcon.typeParameterForeground#73c2fe
  • symbolIcon.unitForeground#5daaf5
  • symbolIcon.variableForeground#e0823d
  • tab.activeBackground#202222
  • tab.activeBorder#202222
  • tab.activeBorderTop#92e9f2
  • tab.activeForeground#e2e2e2
  • tab.border#344e52
  • tab.hoverBackground#293536
  • tab.inactiveBackground#293536
  • tab.inactiveForeground#e2e2e2
  • tab.lastPinnedBorder#344e52
  • tab.selectedBackground#202222
  • tab.selectedForeground#ffffff
  • tab.unfocusedActiveBorder#22272e
  • tab.unfocusedActiveBorderTop#007ACC55
  • tab.unfocusedHoverBackground#293536
  • 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
  • terminal.inactiveSelectionBackground#3A3D41
  • textBlockQuote.background#1E1E1E
  • textBlockQuote.border#80808059
  • textCodeBlock.background#636e7b66
  • textLink.activeForeground#55e0ed
  • textLink.foreground#55e0ed
  • textPreformat.background#51c4cf94
  • textPreformat.foreground#ffffff
  • textSeparator.foreground#373e47
  • titleBar.activeBackground#427c81
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#344e52
  • titleBar.inactiveBackground#365559
  • titleBar.inactiveForeground#919191
  • tree.indentGuidesStroke#373e47
  • welcomePage.buttonBackground#373e47
  • welcomePage.buttonHoverBackground#444c56
  • widget.border#80808059
  • widget.shadow#55e0ed47

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#73c2fe
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#97d8fe
support#73c2fe
meta.property-name#73c2fe
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#73c2fe
source.regexp, string.regexp#97d8fe
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#97d8fe
string.regexp constant.character.escape#8ddb8cbold
support.constant#73c2fe
support.variable#73c2fe
support.type.property-name.json#8ddb8c
meta.module-reference#73c2fe
punctuation.definition.list.begin.markdown#f69d50
heading.1.markdown, markup.heading.1.markdown, markup.heading.1.markdown entity.name#FF6B6Bbold
heading.2.markdown, markup.heading.2.markdown, markup.heading.2.markdown entity.name#FFB347bold
heading.3.markdown, markup.heading.3.markdown, markup.heading.3.markdown entity.name#77DD77bold
heading.4.markdown, markup.heading.4.markdown, markup.heading.4.markdown entity.name#87CEEBbold
heading.5.markdown, markup.heading.5.markdown, markup.heading.5.markdown entity.name#DDA0DDbold
heading.6.markdown, markup.heading.6.markdown, markup.heading.6.markdown entity.name#B39EB5bold
markup.heading, markup.heading entity.name#73c2febold
punctuation.definition.bold.markdown, punctuation.separator.table.markdown, punctuation.definition.table.markdown#636e7bbold
markup.quote#8ddb8c
markup.italic#adbac7italic
markup.bold#adbac7bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#73c2fe
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#73c2fe
meta.separator#73c2febold
meta.output#73c2fe
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#768390
brackethighlighter.unmatched#ff938a
constant.other.reference.link, string.other.link#97d8fe
Colorized Theme (1/3) by 6o8 - VS Code Theme