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#D8D9F0
  • activityBar.background#1B1A28
  • activityBar.foreground#9099AB
  • activityBarBadge.background#4C566A
  • activityBarBadge.foreground#D8D9F0
  • breadcrumb.foreground#616E88
  • button.background#4C566A
  • button.foreground#D8D9F0
  • button.hoverBackground#616E88
  • button.secondaryBackground#4C566A
  • button.secondaryForeground#D8D9F0
  • button.secondaryHoverBackground#616E88
  • commandCenter.activeForeground#D8D9F0
  • commandCenter.foreground#616E88
  • debugConsole.errorForeground#F2A0B5
  • debugConsole.warningForeground#E8D58A
  • debugIcon.breakpointCurrentStackframeForeground#E8D58A
  • debugIcon.breakpointDisabledForeground#4C566A
  • debugIcon.breakpointForeground#F2A0B5
  • debugIcon.breakpointStackframeForeground#E8D58A
  • debugIcon.breakpointUnverifiedForeground#616E88
  • diffEditor.insertedLineBackground#9FE6B020
  • diffEditor.insertedTextBackground#4C566A30
  • diffEditor.removedLineBackground#F2A0B520
  • diffEditor.removedTextBackground#4C566A30
  • diffEditorOverview.insertedForeground#9FE6B0
  • diffEditorOverview.removedForeground#F2A0B5
  • dropdown.background#1B1A28
  • dropdown.border#4C566A
  • dropdown.foreground#D8D9F0
  • editor.background#1B1A28
  • editor.findMatchBackground#4C566A50
  • editor.findMatchBorder#D8D9F060
  • editor.findMatchHighlightBackground#4C566A30
  • editor.foreground#D8D9F0
  • 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#C79BFF
  • 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#D8D9F0
  • editorError.foreground#F2A0B5
  • editorGhostText.foreground#616E88
  • editorGroup.border#4C566A
  • editorGroupHeader.tabsBackground#1B1A28
  • editorGutter.addedBackground#9FE6B0
  • editorGutter.deletedBackground#F2A0B5
  • editorGutter.modifiedBackground#E8D58A
  • editorHint.border#616E8840
  • editorHint.foreground#616E88
  • editorIndentGuide.activeBackground1#616E8880
  • editorIndentGuide.background1#4C566A40
  • editorInfo.foreground#8FBCFF
  • editorInlayHint.background#616E8815
  • editorInlayHint.foreground#616E88
  • editorInlayHint.parameterForeground#616E88
  • editorInlayHint.typeForeground#616E88
  • editorLineNumber.activeForeground#D8D9F0
  • editorLineNumber.foreground#616E88
  • editorLink.activeForeground#616E88
  • editorOverviewRuler.addedForeground#9FE6B0
  • editorOverviewRuler.deletedForeground#F2A0B5
  • editorOverviewRuler.errorForeground#F2A0B5
  • editorOverviewRuler.infoForeground#8FBCFF
  • editorOverviewRuler.modifiedForeground#E8D58A
  • editorOverviewRuler.warningForeground#E8D58A
  • editorStickyScroll.background#1B1A28
  • editorStickyScrollHover.background#3B4252
  • editorSuggestWidget.background#3B4252
  • editorSuggestWidget.foreground#D8D9F0
  • editorSuggestWidget.highlightForeground#D8D9F0
  • editorSuggestWidget.selectedBackground#4C566A80
  • editorWarning.foreground#E8D58A
  • editorWhitespace.foreground#4C566A80
  • editorWidget.background#3B4252
  • editorWidget.border#4C566A
  • editorWidget.foreground#D8D9F0
  • focusBorder#D8D9F080
  • gitDecoration.addedResourceForeground#9FE6B0
  • gitDecoration.conflictingResourceForeground#E8D58A
  • gitDecoration.deletedResourceForeground#F2A0B5
  • gitDecoration.ignoredResourceForeground#4C566A
  • gitDecoration.modifiedResourceForeground#E8D58A
  • gitDecoration.stageDeletedResourceForeground#F2A0B5
  • gitDecoration.stageModifiedResourceForeground#E8D58A
  • gitDecoration.untrackedResourceForeground#9FE6B0
  • input.background#1B1A28
  • input.border#4C566A
  • input.foreground#D8D9F0
  • input.placeholderForeground#616E88
  • inputOption.activeBorder#D8D9F0
  • inputValidation.errorBackground#4C566A50
  • inputValidation.errorBorder#D8D9F0
  • list.activeSelectionBackground#4C566A50
  • list.activeSelectionForeground#8FBCFF
  • list.errorForeground#F2A0B5
  • list.highlightForeground#C79BFF
  • list.hoverBackground#4C566A30
  • list.inactiveSelectionBackground#4C566A30
  • list.warningForeground#E8D58A
  • menu.background#3B4252
  • menu.foreground#D8D9F0
  • menu.selectionBackground#4C566A80
  • menu.selectionForeground#D8D9F0
  • menu.separatorBackground#4C566A
  • merge.commonContentBackground#E8D58A20
  • merge.commonHeaderBackground#E8D58A40
  • merge.currentContentBackground#9FE6B020
  • merge.currentHeaderBackground#9FE6B040
  • merge.incomingContentBackground#8FBCFF20
  • merge.incomingHeaderBackground#8FBCFF40
  • minimap.background#1B1A28
  • minimap.errorHighlight#F2A0B5
  • minimap.infoHighlight#8FBCFF
  • minimap.warningHighlight#E8D58A
  • minimapGutter.addedBackground#9FE6B0
  • minimapGutter.deletedBackground#F2A0B5
  • minimapGutter.modifiedBackground#E8D58A
  • minimapSlider.background#4C566A40
  • minimapSlider.hoverBackground#4C566A60
  • notificationCenter.border#4C566A
  • notificationLink.foreground#616E88
  • notifications.background#3B4252
  • notifications.foreground#D8D9F0
  • notificationsErrorIcon.foreground#F2A0B5
  • notificationsInfoIcon.foreground#8FBCFF
  • notificationsWarningIcon.foreground#E8D58A
  • notificationToast.border#4C566A
  • panel.background#1B1A28
  • panel.border#4C566A
  • panelTitle.activeForeground#D8D9F0
  • panelTitle.inactiveForeground#616E88
  • peekViewEditor.background#1B1A28
  • peekViewResult.background#3B4252
  • peekViewTitleLabel.foreground#D8D9F0
  • problemsErrorIcon.foreground#F2A0B5
  • problemsInfoIcon.foreground#8FBCFF
  • problemsWarningIcon.foreground#E8D58A
  • progressBar.background#D8D9F0
  • scrollbar.shadow#3B425260
  • scrollbarSlider.activeBackground#4C566AA0
  • scrollbarSlider.background#4C566A50
  • scrollbarSlider.hoverBackground#4C566A80
  • sideBar.background#1B1A28
  • sideBar.foreground#DDE4E6
  • sideBarSectionHeader.background#1B1A28
  • sideBarSectionHeader.foreground#D8D9F0
  • sideBarTitle.foreground#616E88
  • statusBar.background#1B1A28
  • statusBar.debuggingBackground#4C566A
  • statusBar.debuggingForeground#1B1A28
  • statusBar.foreground#9099AB
  • statusBar.noFolderForeground#4C566A
  • statusBarItem.errorBackground#F2A0B5
  • statusBarItem.errorForeground#1B1A28
  • statusBarItem.warningBackground#E8D58A
  • statusBarItem.warningForeground#1B1A28
  • tab.activeBackground#1B1A28
  • tab.activeBorderTop#00000000
  • tab.activeForeground#D8D9F0
  • tab.border#1B1A28
  • tab.inactiveBackground#1B1A28
  • tab.inactiveForeground#616E88
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#3B4252
  • terminal.ansiBlue#8FBCFF
  • terminal.ansiBrightBlack#4C566A
  • terminal.ansiBrightBlue#8FBCFF
  • terminal.ansiBrightCyan#8FBCFF
  • terminal.ansiBrightGreen#D8D9F0
  • terminal.ansiBrightMagenta#C79BFF
  • terminal.ansiBrightRed#F2A0B5
  • terminal.ansiBrightWhite#D8D9F0
  • terminal.ansiBrightYellow#E8D58A
  • terminal.ansiCyan#8FBCFF
  • terminal.ansiGreen#D8D9F0
  • terminal.ansiMagenta#C79BFF
  • terminal.ansiRed#F2A0B5
  • terminal.ansiWhite#D8D9F0
  • terminal.ansiYellow#E8D58A
  • terminal.background#1B1A28
  • terminal.foreground#D8D9F0
  • testing.iconErrored#F2A0B5
  • testing.iconFailed#F2A0B5
  • testing.iconPassed#9FE6B0
  • testing.iconQueued#E8D58A
  • testing.iconSkipped#616E88
  • textLink.activeForeground#616E88
  • textLink.foreground#616E88
  • titleBar.activeBackground#1B1A28
  • titleBar.activeForeground#9099AB
  • titleBar.inactiveBackground#1B1A28
  • 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#C79BFF—
keyword, keyword.operator.new, storage.type, storage.modifier#D8D9F0—
string, constant.other.symbol, constant.other.key, string.regexp#8FBCFF—
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit#8FBCFF—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, entity.name.method#D8D9F0—
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, support.type.sys-types#8FBCFF—
variable, variable.other, variable.parameter#D8D9F0—
variable.language#8FBCFFitalic
entity.name.tag, meta.tag, punctuation.definition.tag#D8D9F0—
entity.other.attribute-name#D8D9F0—
meta.decorator, punctuation.decorator, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#C79BFF—
punctuation.accessor, punctuation.separator, punctuation.terminator#A8AEB9—
invalid, invalid.illegal#C79BFF—
*url*, *link*, *uri*#D8D9F0underline
source.json support.type.property-name, source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.object-literal.key#8FBCFF—
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#D8D9F0—
markup.heading, markup.heading entity.name, punctuation.definition.heading.markdown#C79BFF—
markup.bold#D8D9F0bold
markup.italic#D8D9F0italic
markup.raw.inline, markup.raw.block#8FBCFF—
markup.quote#616E88italic
string.other.link.title.markdown#C79BFF—
markup.inserted#D8D9F0—
markup.deleted#D8D9F0—
markup.changed#D8D9F0—