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.

  • activityBar.activeBorder#D8DEE9
  • activityBar.background#1F1E24
  • activityBar.foreground#9099AB
  • activityBarBadge.background#4C566A
  • activityBarBadge.foreground#D8DEE9
  • breadcrumb.foreground#616E88
  • button.background#4C566A
  • button.foreground#D8DEE9
  • button.hoverBackground#616E88
  • button.secondaryBackground#4C566A
  • button.secondaryForeground#D8DEE9
  • button.secondaryHoverBackground#616E88
  • commandCenter.activeForeground#D8DEE9
  • commandCenter.foreground#616E88
  • debugConsole.errorForeground#C58892
  • debugConsole.warningForeground#C9B978
  • debugIcon.breakpointCurrentStackframeForeground#C9B978
  • debugIcon.breakpointDisabledForeground#4C566A
  • debugIcon.breakpointForeground#C58892
  • debugIcon.breakpointStackframeForeground#C9B978
  • debugIcon.breakpointUnverifiedForeground#616E88
  • diffEditor.insertedLineBackground#A8C07820
  • diffEditor.insertedTextBackground#4C566A30
  • diffEditor.removedLineBackground#C5889220
  • diffEditor.removedTextBackground#4C566A30
  • diffEditorOverview.insertedForeground#A8C078
  • diffEditorOverview.removedForeground#C58892
  • dropdown.background#1F1E24
  • dropdown.border#4C566A
  • dropdown.foreground#D8DEE9
  • editor.background#1F1E24
  • editor.findMatchBackground#4C566A50
  • editor.findMatchBorder#D8DEE960
  • editor.findMatchHighlightBackground#4C566A30
  • editor.foreground#D8DEE9
  • editor.inactiveSelectionBackground#4C566A40
  • editor.lineHighlightBackground#3B4252
  • editor.selectionBackground#4C566A80
  • editor.wordHighlightBackground#4C566A50
  • editor.wordHighlightStrongBackground#4C566A60
  • editorBracketHighlight.foreground1#BFC5D0
  • editorBracketHighlight.foreground2#A8AEB9
  • editorBracketHighlight.foreground3#8E94A0
  • editorBracketHighlight.foreground4#757B86
  • editorBracketHighlight.foreground5#5D636E
  • editorBracketHighlight.foreground6#4C566A
  • editorBracketHighlight.unexpectedBracket.foreground#B48EAD
  • editorBracketPairGuide.activeBackground1#BFC5D030
  • editorBracketPairGuide.activeBackground2#A8AEB930
  • editorBracketPairGuide.activeBackground3#8E94A030
  • editorBracketPairGuide.activeBackground4#757B8630
  • editorBracketPairGuide.activeBackground5#5D636E30
  • editorBracketPairGuide.activeBackground6#4C566A30
  • editorBracketPairGuide.background1#BFC5D015
  • editorBracketPairGuide.background2#A8AEB915
  • editorBracketPairGuide.background3#8E94A015
  • editorBracketPairGuide.background4#757B8615
  • editorBracketPairGuide.background5#5D636E15
  • editorBracketPairGuide.background6#4C566A15
  • editorCursor.foreground#D8DEE9
  • editorError.foreground#C58892
  • editorGhostText.foreground#616E88
  • editorGroup.border#4C566A
  • editorGroupHeader.tabsBackground#1F1E24
  • editorGutter.addedBackground#A8C078
  • editorGutter.deletedBackground#C58892
  • editorGutter.modifiedBackground#C9B978
  • editorHint.border#616E8840
  • editorHint.foreground#616E88
  • editorIndentGuide.activeBackground1#616E8880
  • editorIndentGuide.background1#4C566A40
  • editorInfo.foreground#88C0D0
  • editorInlayHint.background#616E8815
  • editorInlayHint.foreground#616E88
  • editorInlayHint.parameterForeground#616E88
  • editorInlayHint.typeForeground#616E88
  • editorLineNumber.activeForeground#D8DEE9
  • editorLineNumber.foreground#616E88
  • editorLink.activeForeground#616E88
  • editorOverviewRuler.addedForeground#A8C078
  • editorOverviewRuler.deletedForeground#C58892
  • editorOverviewRuler.errorForeground#C58892
  • editorOverviewRuler.infoForeground#88C0D0
  • editorOverviewRuler.modifiedForeground#C9B978
  • editorOverviewRuler.warningForeground#C9B978
  • editorStickyScroll.background#1F1E24
  • editorStickyScrollHover.background#3B4252
  • editorSuggestWidget.background#3B4252
  • editorSuggestWidget.foreground#D8DEE9
  • editorSuggestWidget.highlightForeground#D8DEE9
  • editorSuggestWidget.selectedBackground#4C566A80
  • editorWarning.foreground#C9B978
  • editorWhitespace.foreground#4C566A80
  • editorWidget.background#3B4252
  • editorWidget.border#4C566A
  • editorWidget.foreground#D8DEE9
  • focusBorder#D8DEE980
  • gitDecoration.addedResourceForeground#A8C078
  • gitDecoration.conflictingResourceForeground#C9B978
  • gitDecoration.deletedResourceForeground#C58892
  • gitDecoration.ignoredResourceForeground#4C566A
  • gitDecoration.modifiedResourceForeground#C9B978
  • gitDecoration.stageDeletedResourceForeground#C58892
  • gitDecoration.stageModifiedResourceForeground#C9B978
  • gitDecoration.untrackedResourceForeground#A8C078
  • input.background#1F1E24
  • input.border#4C566A
  • input.foreground#D8DEE9
  • input.placeholderForeground#616E88
  • inputOption.activeBorder#D8DEE9
  • inputValidation.errorBackground#4C566A50
  • inputValidation.errorBorder#D8DEE9
  • list.activeSelectionBackground#4C566A50
  • list.activeSelectionForeground#88C0D0
  • list.errorForeground#C58892
  • list.highlightForeground#B48EAD
  • list.hoverBackground#4C566A30
  • list.inactiveSelectionBackground#4C566A30
  • list.warningForeground#C9B978
  • menu.background#3B4252
  • menu.foreground#D8DEE9
  • menu.selectionBackground#4C566A80
  • menu.selectionForeground#D8DEE9
  • menu.separatorBackground#4C566A
  • merge.commonContentBackground#C9B97820
  • merge.commonHeaderBackground#C9B97840
  • merge.currentContentBackground#A8C07820
  • merge.currentHeaderBackground#A8C07840
  • merge.incomingContentBackground#88C0D020
  • merge.incomingHeaderBackground#88C0D040
  • minimap.background#1F1E24
  • minimap.errorHighlight#C58892
  • minimap.infoHighlight#88C0D0
  • minimap.warningHighlight#C9B978
  • minimapGutter.addedBackground#A8C078
  • minimapGutter.deletedBackground#C58892
  • minimapGutter.modifiedBackground#C9B978
  • minimapSlider.background#4C566A40
  • minimapSlider.hoverBackground#4C566A60
  • notificationCenter.border#4C566A
  • notificationLink.foreground#616E88
  • notifications.background#3B4252
  • notifications.foreground#D8DEE9
  • notificationsErrorIcon.foreground#C58892
  • notificationsInfoIcon.foreground#88C0D0
  • notificationsWarningIcon.foreground#C9B978
  • notificationToast.border#4C566A
  • panel.background#1F1E24
  • panel.border#4C566A
  • panelTitle.activeForeground#D8DEE9
  • panelTitle.inactiveForeground#616E88
  • peekViewEditor.background#1F1E24
  • peekViewResult.background#3B4252
  • peekViewTitleLabel.foreground#D8DEE9
  • problemsErrorIcon.foreground#C58892
  • problemsInfoIcon.foreground#88C0D0
  • problemsWarningIcon.foreground#C9B978
  • progressBar.background#D8DEE9
  • scrollbar.shadow#3B425260
  • scrollbarSlider.activeBackground#4C566AA0
  • scrollbarSlider.background#4C566A50
  • scrollbarSlider.hoverBackground#4C566A80
  • sideBar.background#1F1E24
  • sideBar.foreground#DDE4E6
  • sideBarSectionHeader.background#1F1E24
  • sideBarSectionHeader.foreground#D8DEE9
  • sideBarTitle.foreground#616E88
  • statusBar.background#1F1E24
  • statusBar.debuggingBackground#4C566A
  • statusBar.debuggingForeground#1F1E24
  • statusBar.foreground#9099AB
  • statusBar.noFolderForeground#4C566A
  • statusBarItem.errorBackground#C58892
  • statusBarItem.errorForeground#1F1E24
  • statusBarItem.warningBackground#C9B978
  • statusBarItem.warningForeground#1F1E24
  • tab.activeBackground#1F1E24
  • tab.activeBorderTop#00000000
  • tab.activeForeground#D8DEE9
  • tab.border#1F1E24
  • tab.inactiveBackground#1F1E24
  • tab.inactiveForeground#616E88
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#3B4252
  • terminal.ansiBlue#88C0D0
  • terminal.ansiBrightBlack#4C566A
  • terminal.ansiBrightBlue#88C0D0
  • terminal.ansiBrightCyan#88C0D0
  • terminal.ansiBrightGreen#A8C078
  • terminal.ansiBrightMagenta#B48EAD
  • terminal.ansiBrightRed#C58892
  • terminal.ansiBrightWhite#D8DEE9
  • terminal.ansiBrightYellow#C9B978
  • terminal.ansiCyan#88C0D0
  • terminal.ansiGreen#A8C078
  • terminal.ansiMagenta#B48EAD
  • terminal.ansiRed#C58892
  • terminal.ansiWhite#D8DEE9
  • terminal.ansiYellow#C9B978
  • terminal.background#1F1E24
  • terminal.foreground#D8DEE9
  • testing.iconErrored#C58892
  • testing.iconFailed#C58892
  • testing.iconPassed#A8C078
  • testing.iconQueued#C9B978
  • testing.iconSkipped#616E88
  • textLink.activeForeground#616E88
  • textLink.foreground#616E88
  • titleBar.activeBackground#1F1E24
  • titleBar.activeForeground#9099AB
  • titleBar.inactiveBackground#1F1E24
  • titleBar.inactiveForeground#4C566A
  • widget.shadow#3B425260

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#616E88italic
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.trycatch, keyword.control.import#B48EAD
keyword, keyword.operator.new, storage.type, storage.modifier#D8DEE9
string, constant.other.symbol, constant.other.key, string.regexp#88C0D0
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit#88C0D0
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, entity.name.method#D8DEE9
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, support.type.sys-types#88C0D0
variable, variable.other, variable.parameter#D8DEE9
variable.language#88C0D0italic
entity.name.tag, meta.tag, punctuation.definition.tag#D8DEE9
entity.other.attribute-name#D8DEE9
meta.decorator, punctuation.decorator, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#B48EAD
punctuation.accessor, punctuation.separator, punctuation.terminator#A8AEB9
invalid, invalid.illegal#B48EAD
*url*, *link*, *uri*#D8DEE9underline
source.json support.type.property-name, source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.object-literal.key#88C0D0
source.json meta.structure.dictionary.value.json string.quoted, source.json meta.structure.dictionary.value.json string.quoted punctuation.definition.string, source.json meta.structure.array.json string.quoted, source.json meta.structure.array.json string.quoted punctuation.definition.string#D8DEE9
markup.heading, markup.heading entity.name, punctuation.definition.heading.markdown#B48EAD
markup.bold#D8DEE9bold
markup.italic#D8DEE9italic
markup.raw.inline, markup.raw.block#88C0D0
markup.quote#616E88italic
string.other.link.title.markdown#B48EAD
markup.inserted#D8DEE9
markup.deleted#D8DEE9
markup.changed#D8DEE9
pure-mono by fuufhjn Zhao - VS Code Theme