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#050706
  • activityBar.activeBorder#3BCEBC
  • activityBar.background#020304
  • activityBar.border#0B0D0F
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#A2A5AC
  • activityBarBadge.background#3BCEBC
  • activityBarBadge.foreground#03100E
  • activityBarTop.activeBorder#3BCEBC
  • activityBarTop.foreground#FFFFFF
  • activityBarTop.inactiveForeground#A2A5AC
  • badge.background#20242A
  • badge.foreground#F3F4F6
  • breadcrumb.activeSelectionForeground#F3F4F6
  • breadcrumb.background#060708
  • breadcrumb.focusForeground#FFFFFF
  • breadcrumb.foreground#ABB0B7
  • breadcrumbPicker.background#08090A
  • button.background#247E73
  • button.foreground#FFFFFF
  • button.hoverBackground#2B9789
  • button.secondaryBackground#15181B
  • button.secondaryForeground#F3F4F6
  • button.secondaryHoverBackground#20242A
  • checkbox.background#08090A
  • checkbox.border#3D424A
  • checkbox.foreground#F3F4F6
  • commandCenter.activeBackground#0B0D0F
  • commandCenter.activeBorder#3BCEBC66
  • commandCenter.activeForeground#FFFFFF
  • commandCenter.background#060708
  • commandCenter.border#121416
  • commandCenter.foreground#CDD0D5
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • debugExceptionWidget.background#2A0E14
  • debugExceptionWidget.border#F26A82
  • debugIcon.continueForeground#80D47B
  • debugIcon.disconnectForeground#F26A82
  • debugIcon.pauseForeground#6BB9DC
  • debugIcon.restartForeground#3BCEBC
  • debugIcon.startForeground#80D47B
  • debugIcon.stepIntoForeground#6BB9DC
  • debugIcon.stepOutForeground#6BB9DC
  • debugIcon.stepOverForeground#6BB9DC
  • debugIcon.stopForeground#F26A82
  • debugToolBar.background#08090A
  • debugToolBar.border#181B1F
  • descriptionForeground#B6B9BF
  • diffEditor.border#101214
  • diffEditor.diagonalFill#181B1F
  • diffEditor.insertedLineBackground#80D47B0D
  • diffEditor.insertedTextBackground#80D47B22
  • diffEditor.removedLineBackground#F26A820D
  • diffEditor.removedTextBackground#F26A8222
  • disabledForeground#74788099
  • dropdown.background#08090A
  • dropdown.border#181B1F
  • dropdown.foreground#F3F4F6
  • dropdown.listBackground#08090A
  • editor.background#060708
  • editor.foreground#C6C6C6
  • editor.inactiveSelectionBackground#1A302D88
  • editor.lineHighlightBackground#090B0D
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#3DDBD912
  • editor.selectionBackground#24494399
  • editor.selectionForeground#F4F5F7
  • editor.selectionHighlightBackground#3DDBD924
  • editor.symbolHighlightBackground#FF832B18
  • editor.wordHighlightBackground#78A9FF20
  • editor.wordHighlightStrongBackground#BE95FF26
  • editor.wordHighlightTextBackground#F1C21B1C
  • editorBracketHighlight.foreground1#C6C6C6
  • editorBracketHighlight.foreground2#3DDBD9
  • editorBracketHighlight.foreground3#BE95FF
  • editorBracketHighlight.foreground4#F1C21B
  • editorBracketHighlight.foreground5#33B1FF
  • editorBracketHighlight.foreground6#FA4D56
  • editorBracketHighlight.unexpectedBracket.foreground#FA4D56
  • editorBracketMatch.background#3DDBD918
  • editorBracketMatch.border#3DDBD999
  • editorCodeLens.foreground#9699A0
  • editorCursor.background#060708
  • editorCursor.foreground#78A9FF
  • editorError.foreground#FA4D56
  • editorGroup.border#101214
  • editorGroup.dropBackground#3BCEBC12
  • editorGroupHeader.noTabsBackground#060708
  • editorGroupHeader.tabsBackground#030405
  • editorGroupHeader.tabsBorder#0B0D0F
  • editorGutter.addedBackground#42BE65
  • editorGutter.background#060708
  • editorGutter.deletedBackground#FA4D56
  • editorGutter.modifiedBackground#78A9FF
  • editorHint.foreground#3DDBD9
  • editorHoverWidget.background#08090A
  • editorHoverWidget.border#181B1F
  • editorHoverWidget.foreground#E1E3E7
  • editorHoverWidget.highlightForeground#3BCEBC
  • editorIndentGuide.activeBackground1#3D424A
  • editorIndentGuide.background1#181B1F
  • editorInfo.foreground#78A9FF
  • editorLineNumber.activeForeground#E1E3E7
  • editorLineNumber.dimmedForeground#50545B
  • editorLineNumber.foreground#747880
  • editorLink.activeForeground#33B1FF
  • editorOverviewRuler.addedForeground#42BE65AA
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#FA4D56AA
  • editorOverviewRuler.errorForeground#FA4D56CC
  • editorOverviewRuler.infoForeground#78A9FFCC
  • editorOverviewRuler.modifiedForeground#78A9FFAA
  • editorOverviewRuler.warningForeground#F1C21BCC
  • editorRuler.foreground#181B1F
  • editorSuggestWidget.background#08090A
  • editorSuggestWidget.border#181B1F
  • editorSuggestWidget.focusHighlightForeground#3BCEBC
  • editorSuggestWidget.foreground#E1E3E7
  • editorSuggestWidget.highlightForeground#3BCEBC
  • editorSuggestWidget.selectedBackground#15181B
  • editorSuggestWidget.selectedForeground#FFFFFF
  • editorUnnecessaryCode.opacity#00000088
  • editorWarning.foreground#F1C21B
  • editorWhitespace.foreground#30343A
  • editorWidget.background#08090A
  • editorWidget.border#181B1F
  • editorWidget.foreground#F3F4F6
  • editorWidget.resizeBorder#3BCEBC66
  • errorForeground#F26A82
  • focusBorder#00000000
  • foreground#B9BDC5
  • gitDecoration.addedResourceForeground#80D47B
  • gitDecoration.conflictingResourceForeground#E8AE50
  • gitDecoration.deletedResourceForeground#F26A82
  • gitDecoration.ignoredResourceForeground#747880
  • gitDecoration.modifiedResourceForeground#6BB9DC
  • gitDecoration.renamedResourceForeground#3BCEBC
  • gitDecoration.submoduleResourceForeground#A887F2
  • gitDecoration.untrackedResourceForeground#80D47B
  • input.background#08090A
  • input.border#181B1F
  • input.foreground#F3F4F6
  • input.placeholderForeground#8E9299
  • inputOption.activeBackground#3BCEBC22
  • inputOption.activeBorder#3BCEBC88
  • inputOption.activeForeground#F3F4F6
  • inputValidation.errorBackground#2A0E14
  • inputValidation.errorBorder#F26A82
  • inputValidation.infoBackground#0B1D25
  • inputValidation.infoBorder#6BB9DC
  • inputValidation.warningBackground#251B0B
  • inputValidation.warningBorder#E8AE50
  • keybindingLabel.background#101214
  • keybindingLabel.border#20242A
  • keybindingLabel.bottomBorder#30343A
  • keybindingLabel.foreground#F3F4F6
  • list.activeSelectionBackground#171B20
  • list.activeSelectionForeground#F4F5F7
  • list.activeSelectionIconForeground#E6E8EB
  • list.errorForeground#F26A82
  • list.focusAndSelectionOutline#00000000
  • list.focusBackground#14181D
  • list.focusForeground#E4E6EA
  • list.focusHighlightForeground#3BCEBC
  • list.focusOutline#00000000
  • list.highlightForeground#3BCEBC
  • list.hoverBackground#0A0C0E
  • list.hoverForeground#D4D7DC
  • list.inactiveFocusBackground#101318
  • list.inactiveFocusOutline#00000000
  • list.inactiveSelectionBackground#101318
  • list.inactiveSelectionForeground#CDD0D5
  • list.inactiveSelectionIconForeground#BFC2C8
  • list.invalidItemForeground#F26A82
  • list.warningForeground#E8AE50
  • listFilterWidget.background#0B0D0F
  • listFilterWidget.noMatchesOutline#F26A82
  • listFilterWidget.outline#3BCEBC66
  • menu.background#08090A
  • menu.border#181B1F
  • menu.foreground#F3F4F6
  • menu.selectionBackground#15181B
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#20242A
  • menubar.selectionBackground#101214
  • menubar.selectionForeground#FFFFFF
  • merge.commonContentBackground#A887F214
  • merge.commonHeaderBackground#A887F233
  • merge.currentContentBackground#6BB9DC14
  • merge.currentHeaderBackground#6BB9DC33
  • merge.incomingContentBackground#80D47B14
  • merge.incomingHeaderBackground#80D47B33
  • minimap.background#030405
  • minimap.errorHighlight#F26A82AA
  • minimap.findMatchHighlight#E8AE5077
  • minimap.selectionHighlight#3BCEBC55
  • minimap.warningHighlight#E8AE50AA
  • minimapSlider.activeBackground#B6B9BF55
  • minimapSlider.background#74788022
  • minimapSlider.hoverBackground#989BA244
  • modernActivityBar.activeBackground#171B20
  • modernActivityBar.activeForeground#FFFFFF
  • modernActivityBar.background#020304
  • modernActivityBar.border#0B0D0F
  • modernActivityBar.hoverBackground#0A0C0E
  • modernActivityBar.hoverForeground#FFFFFF
  • modernActivityBarItem.activeBackground#171B20
  • modernActivityBarItem.activeForeground#FFFFFF
  • modernActivityBarItem.hoverBackground#0A0C0E
  • modernActivityBarItem.hoverForeground#FFFFFF
  • notificationCenterHeader.background#0B0D0F
  • notificationLink.foreground#6BB9DC
  • notifications.background#08090A
  • notifications.border#181B1F
  • notifications.foreground#F3F4F6
  • panel.background#060708
  • panel.border#101214
  • panelInput.border#181B1F
  • panelSection.border#101214
  • panelSectionHeader.background#050607
  • panelSectionHeader.foreground#E1E3E7
  • panelTitle.activeBorder#00000000
  • panelTitle.activeForeground#F4F5F7
  • panelTitle.inactiveForeground#989CA4
  • peekView.border#247E73
  • peekViewEditor.background#060708
  • peekViewEditor.matchHighlightBackground#E8AE5033
  • peekViewResult.background#060708
  • peekViewResult.fileForeground#F3F4F6
  • peekViewResult.lineForeground#B6B9BF
  • peekViewResult.matchHighlightBackground#E8AE5033
  • peekViewResult.selectionBackground#15181B
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#08090A
  • peekViewTitleDescription.foreground#B6B9BF
  • peekViewTitleLabel.foreground#FFFFFF
  • pickerGroup.border#181B1F
  • pickerGroup.foreground#3BCEBC
  • progressBar.background#3BCEBC
  • quickInput.background#08090A
  • quickInput.foreground#F3F4F6
  • quickInputList.focusBackground#15181B
  • quickInputList.focusForeground#FFFFFF
  • quickInputList.focusIconForeground#3BCEBC
  • sash.hoverBorder#3BCEBC66
  • scrollbar.shadow#00000099
  • scrollbarSlider.activeBackground#B6B9BF66
  • scrollbarSlider.background#74788033
  • scrollbarSlider.hoverBackground#989BA255
  • settings.checkboxBackground#08090A
  • settings.checkboxBorder#3D424A
  • settings.checkboxForeground#F3F4F6
  • settings.dropdownBackground#08090A
  • settings.dropdownBorder#181B1F
  • settings.dropdownForeground#F3F4F6
  • settings.focusedRowBackground#0B0D0F
  • settings.headerForeground#FFFFFF
  • settings.modifiedItemIndicator#3BCEBC
  • settings.numberInputBackground#08090A
  • settings.numberInputBorder#181B1F
  • settings.numberInputForeground#F3F4F6
  • settings.textInputBackground#08090A
  • settings.textInputBorder#181B1F
  • settings.textInputForeground#F3F4F6
  • sideBar.background#030405
  • sideBar.border#0B0D0F
  • sideBar.foreground#CDD0D5
  • sideBarActivityBarTop.border#0B0D0F
  • sideBarSectionHeader.background#070809
  • sideBarSectionHeader.border#101214
  • sideBarSectionHeader.foreground#D0D3D8
  • sideBarTitle.foreground#CDD0D5
  • statusBar.background#050607
  • statusBar.border#0E1012
  • statusBar.debuggingBackground#5D447F
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#DDE0E4
  • statusBar.noFolderBackground#050607
  • statusBar.noFolderForeground#DDE0E4
  • statusBarItem.activeBackground#FFFFFF18
  • statusBarItem.errorBackground#A93C51
  • statusBarItem.errorForeground#FFFFFF
  • statusBarItem.hoverBackground#FFFFFF0F
  • statusBarItem.prominentBackground#15181B
  • statusBarItem.prominentHoverBackground#20242A
  • statusBarItem.remoteBackground#247E73
  • statusBarItem.remoteForeground#FFFFFF
  • statusBarItem.warningBackground#8D641F
  • statusBarItem.warningForeground#FFFFFF
  • tab.activeBackground#171B20
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#F4F5F7
  • tab.border#0B0D0F
  • tab.hoverBackground#0A0C0E
  • tab.hoverBorder#00000000
  • tab.hoverForeground#D4D7DC
  • tab.inactiveBackground#040506
  • tab.inactiveForeground#CCD0D5
  • tab.selectedBackground#101318
  • tab.selectedBorderTop#00000000
  • tab.selectedForeground#DDE0E4
  • tab.unfocusedActiveBackground#101318
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#00000000
  • tab.unfocusedActiveForeground#DDE0E4
  • tab.unfocusedHoverBackground#080A0C
  • tab.unfocusedHoverBorder#00000000
  • tab.unfocusedHoverForeground#B9BDC5
  • tab.unfocusedInactiveBackground#040506
  • tab.unfocusedInactiveForeground#989BA2
  • terminal.ansiBlack#30343A
  • terminal.ansiBlue#6BB9DC
  • terminal.ansiBrightBlack#747880
  • terminal.ansiBrightBlue#88CEEE
  • terminal.ansiBrightCyan#58E0CF
  • terminal.ansiBrightGreen#96E891
  • terminal.ansiBrightMagenta#C0A1FF
  • terminal.ansiBrightRed#FF8295
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F4C46F
  • terminal.ansiCyan#3BCEBC
  • terminal.ansiGreen#80D47B
  • terminal.ansiMagenta#A887F2
  • terminal.ansiRed#F26A82
  • terminal.ansiWhite#DDE0E4
  • terminal.ansiYellow#E8AE50
  • terminal.background#060708
  • terminal.border#00000000
  • terminal.findMatchBorder#00000000
  • terminal.findMatchHighlightBorder#00000000
  • terminal.foreground#B9BDC5
  • terminal.hoverHighlightBackground#00000000
  • terminal.inactiveSelectionBackground#172B2988
  • terminal.selectionBackground#24494399
  • terminal.selectionForeground#F4F5F7
  • terminal.tab.activeBorder#00000000
  • terminalCommandDecoration.defaultBackground#747880
  • terminalCommandDecoration.errorBackground#F26A82
  • terminalCommandDecoration.successBackground#80D47B
  • terminalCursor.background#060708
  • terminalCursor.foreground#3BCEBC
  • terminalOverviewRuler.border#00000000
  • textBlockQuote.background#08090A
  • textBlockQuote.border#3BCEBC66
  • textCodeBlock.background#08090A
  • textLink.activeForeground#88CEEE
  • textLink.foreground#6BB9DC
  • titleBar.activeBackground#030405
  • titleBar.activeForeground#C8CBD0
  • titleBar.border#0B0D0F
  • titleBar.inactiveBackground#030405
  • titleBar.inactiveForeground#8E9299
  • toolbar.activeBackground#171B20
  • toolbar.hoverBackground#0A0C0E
  • toolbar.hoverOutline#00000000
  • walkThrough.embeddedEditorBackground#030405
  • welcomePage.background#060708
  • window.activeBorder#101214
  • window.inactiveBorder#0B0D0F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#8D8D8Ditalic
keyword, storage, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression#78A9FF
keyword.control.import, keyword.control.import.python, keyword.control.from, keyword.control.from.python, meta.import keyword.control, meta.import keyword#BE95FF
keyword.operator#3DDBD9
punctuation, meta.brace, meta.delimiter, punctuation.separator, punctuation.terminator#A8A8A8
string, string.quoted, string.template, punctuation.definition.string#42BE65
string.regexp, constant.character.escape, constant.other.symbol#3DDBD9
constant.numeric#F1C21B
constant.language, support.constant, variable.language, constant.other#FF832B
meta.decorator, meta.annotation, punctuation.decorator, entity.name.function.decorator, storage.type.annotation#FF832B
entity.name.function, support.function, meta.function-call, variable.function, entity.name.method#FA4D56
entity.name.type, entity.name.class, entity.name.struct, entity.name.interface, entity.name.enum, support.type, support.class, storage.type.class#BE95FF
variable, variable.other, variable.parameter, meta.definition.variable#C6C6C6
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member, entity.other.attribute-name#33B1FF
entity.name.tag, support.type.property-name.css, entity.name.selector#FA4D56
markup.heading, entity.name.section#33B1FFbold
markup.bold#C6C6C6bold
markup.italic#C6C6C6italic
markup.inline.raw, markup.fenced_code.block#42BE65
markup.underline.link, string.other.link#33B1FFunderline
markup.inserted, meta.diff.header.to-file#42BE65
markup.deleted, meta.diff.header.from-file#FA4D56
markup.changed#F1C21B
invalid, invalid.illegal#FFFFFF
invalid.deprecated#FF832Bstrikethrough
Marcus Dark by Marcus Miccelli - VS Code Theme