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#2D3030
  • activityBar.background#252525
  • activityBar.foreground#E0DED2
  • activityBar.inactiveForeground#8E8F8C
  • activityBarBadge.background#545454
  • activityBarBadge.foreground#E0DED2
  • badge.background#2D3030
  • badge.foreground#E0DED2
  • breadcrumb.activeSelectionForeground#E0DED2
  • breadcrumb.background#252525
  • breadcrumb.focusForeground#E0DED2
  • breadcrumb.foreground#8B8B89
  • button.background#3E3E3E
  • button.foreground#EAE8DD
  • button.hoverBackground#4A4A4A
  • checkbox.background#252525
  • checkbox.border#2D3030
  • descriptionForeground#8B8B89
  • diffEditor.diagonalFill#2A2D2D
  • diffEditor.insertedLineBackground#4E654E44
  • diffEditor.insertedTextBackground#4F7C5A55
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedLineBackground#62454544
  • diffEditor.removedTextBackground#B55C5C66
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#252525
  • dropdown.border#2D3030
  • dropdown.foreground#E0DED2
  • editor.background#252525
  • editor.findMatchBackground#CC604499
  • editor.findMatchBorder#00000000
  • editor.findMatchHighlightBackground#A7A59640
  • editor.findRangeHighlightBackground#00000000
  • editor.foldBackground#00000000
  • editor.foreground#E0DED2
  • editor.inactiveSelectionBackground#3A3A3A80
  • editor.lineHighlightBackground#2A2A2A
  • editor.lineHighlightBorder#2F3130
  • editor.linkedEditingBackground#A7A59640
  • editor.rangeHighlightBackground#00000000
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#3A3A3A
  • editor.selectionForeground#E0DED2
  • editor.selectionHighlightBackground#E0DED21A
  • editor.wordHighlightBackground#E0DED214
  • editor.wordHighlightStrongBackground#E0DED226
  • editorBracketHighlight.foreground1#9A9B95
  • editorBracketHighlight.foreground2#9A9B95
  • editorBracketHighlight.foreground3#9A9B95
  • editorBracketHighlight.foreground4#9A9B95
  • editorBracketHighlight.foreground5#9A9B95
  • editorBracketHighlight.foreground6#9A9B95
  • editorBracketHighlight.unexpectedBracket.foreground#FF8C8C
  • editorBracketMatch.background#3A3A3A33
  • editorBracketMatch.border#2D3030
  • editorBracketPairGuide.activeBackground1#9A9B9566
  • editorBracketPairGuide.activeBackground2#9A9B9566
  • editorBracketPairGuide.activeBackground3#9A9B9566
  • editorBracketPairGuide.activeBackground4#9A9B9566
  • editorBracketPairGuide.activeBackground5#9A9B9566
  • editorBracketPairGuide.activeBackground6#9A9B9566
  • editorBracketPairGuide.background1#9A9B9533
  • editorBracketPairGuide.background2#9A9B9533
  • editorBracketPairGuide.background3#9A9B9533
  • editorBracketPairGuide.background4#9A9B9533
  • editorBracketPairGuide.background5#9A9B9533
  • editorBracketPairGuide.background6#9A9B9533
  • editorCodeLens.foreground#7E817A
  • editorCursor.foreground#F67050
  • editorError.foreground#FF8C8C
  • editorGhostText.foreground#A6A7A14D
  • editorGroup.border#2D3030
  • editorGroupHeader.tabsBackground#252525
  • editorGroupHeader.tabsBorder#2D3030
  • editorGutter.addedBackground#8AC88A
  • editorGutter.commentRangeForeground#6F6F6F
  • editorGutter.deletedBackground#FF8C8C
  • editorGutter.modifiedBackground#5E7F95
  • editorHint.foreground#8B8B89
  • editorHoverWidget.background#252525
  • editorHoverWidget.border#2D3030
  • editorIndentGuide.activeBackground1#343634
  • editorIndentGuide.activeBackground2#343634
  • editorIndentGuide.activeBackground3#343634
  • editorIndentGuide.activeBackground4#343634
  • editorIndentGuide.activeBackground5#343634
  • editorIndentGuide.activeBackground6#343634
  • editorIndentGuide.background1#2B2C2B
  • editorIndentGuide.background2#2A2B2A
  • editorIndentGuide.background3#292A29
  • editorIndentGuide.background4#282928
  • editorIndentGuide.background5#272827
  • editorIndentGuide.background6#262726
  • editorInfo.foreground#9CC6E6
  • editorInlayHint.background#2D2D2D
  • editorInlayHint.foreground#A6A7A1
  • editorInlayHint.parameterBackground#2D2D2D
  • editorInlayHint.parameterForeground#B8B9B3
  • editorInlayHint.typeBackground#2D2D2D
  • editorInlayHint.typeForeground#A6A7A1
  • editorLineNumber.activeForeground#8E8F8C
  • editorLineNumber.foreground#707070
  • editorOverviewRuler.errorForeground#FF8C8CAA
  • editorOverviewRuler.infoForeground#9CC6E6AA
  • editorOverviewRuler.warningForeground#F78A6BAA
  • editorRuler.foreground#2A2B2A
  • editorStickyScroll.background#252525
  • editorStickyScroll.border#2D3030
  • editorStickyScrollHover.background#2A2A2A
  • editorSuggestWidget.background#252525
  • editorSuggestWidget.border#2D3030
  • editorSuggestWidget.foreground#E0DED2
  • editorSuggestWidget.highlightForeground#9CC6E6
  • editorSuggestWidget.selectedBackground#303030
  • editorSuggestWidget.selectedForeground#E0DED2
  • editorWarning.foreground#F78A6B
  • editorWhitespace.foreground#2B2C2B
  • editorWidget.background#252525
  • editorWidget.border#2D3030
  • errorForeground#FF8C8C
  • focusBorder#2D3030
  • foreground#E0DED2
  • gitDecoration.addedResourceForeground#E0DED2
  • gitDecoration.conflictingResourceForeground#F78A6B
  • gitDecoration.deletedResourceForeground#FF8C8C
  • gitDecoration.ignoredResourceForeground#5A5A5A
  • gitDecoration.modifiedResourceForeground#E0DED2
  • gitDecoration.untrackedResourceForeground#E0DED2
  • input.background#252525
  • input.border#2D3030
  • input.foreground#E0DED2
  • input.placeholderForeground#8E8F8C
  • inputOption.activeBorder#2D3030
  • list.activeSelectionBackground#3A3A3A
  • list.activeSelectionForeground#E0DED2
  • list.dropBackground#2E2F2E
  • list.errorForeground#FF8C8C
  • list.focusBackground#2E2F2E
  • list.focusOutline#2D3030
  • list.highlightForeground#9CC6E6
  • list.hoverBackground#2E2F2E
  • list.inactiveSelectionBackground#3A3A3A
  • list.inactiveSelectionForeground#E0DED2
  • list.warningForeground#F78A6B
  • menu.background#252525
  • menu.foreground#E0DED2
  • menu.selectionBackground#2E2F2E
  • menu.selectionForeground#E0DED2
  • menu.separatorBackground#2D3030
  • merge.commonHeaderBackground#2A2D2D33
  • merge.currentHeaderBackground#7AA6C633
  • merge.incomingHeaderBackground#4E654E44
  • minimap.errorHighlight#FF8C8C80
  • minimap.findMatchHighlight#E0DED280
  • minimap.selectionHighlight#3A3A3A80
  • minimap.warningHighlight#F78A6B80
  • minimapGutter.addedBackground#8AC88A
  • minimapGutter.deletedBackground#FF8C8C
  • minimapGutter.modifiedBackground#5E7F95
  • notificationCenter.border#2D3030
  • notificationLink.foreground#9CC6E6
  • notifications.background#252525
  • notifications.border#2D3030
  • notifications.foreground#E0DED2
  • panel.background#252525
  • panel.border#2D3030
  • panelTitle.activeForeground#E0DED2
  • panelTitle.inactiveForeground#8B8B89
  • peekView.border#2D3030
  • peekViewEditor.background#2E2F2E1A
  • peekViewEditor.matchHighlightBackground#E0DED21A
  • peekViewEditorGutter.background#2E2F2E1A
  • peekViewResult.background#252525
  • peekViewResult.matchHighlightBackground#E0DED21A
  • peekViewTitle.background#252525
  • progressBar.background#2D3030
  • quickInput.background#252525
  • quickInput.foreground#E0DED2
  • quickInputList.focusBackground#2E2F2E
  • quickInputList.focusForeground#E0DED2
  • scrollbarSlider.activeBackground#3A3A3A80
  • scrollbarSlider.background#2D3030AA
  • scrollbarSlider.hoverBackground#2E2F2EAA
  • selection.background#3A3A3A
  • sideBar.background#252525
  • sideBar.border#2D3030
  • sideBar.foreground#8B8B89
  • sideBarSectionHeader.background#252525
  • sideBarSectionHeader.foreground#8E8F8C
  • sideBarTitle.foreground#E0DED2
  • statusBar.background#252525
  • statusBar.border#2D3030
  • statusBar.debuggingBackground#2D3030
  • statusBar.debuggingForeground#E0DED2
  • statusBar.foreground#E0DED2
  • statusBar.noFolderBackground#252525
  • tab.activeBackground#323232
  • tab.activeBorder#2D3030
  • tab.activeBorderTop#2D3030
  • tab.activeForeground#8B8B89
  • tab.activeModifiedBorder#E0DED2
  • tab.border#2D3030
  • tab.hoverBackground#323232
  • tab.inactiveBackground#242424
  • tab.inactiveForeground#8B8B89
  • tab.inactiveModifiedBorder#E0DED2
  • tab.unfocusedActiveBorder#2E2F2E
  • tab.unfocusedActiveModifiedBorder#2D3030
  • tab.unfocusedInactiveModifiedBorder#2D3030
  • terminal.ansiBlack#252525
  • terminal.ansiBlue#8899C9
  • terminal.ansiBrightBlack#707070
  • terminal.ansiBrightBlue#9CC6E6
  • terminal.ansiBrightCyan#7ADFFF
  • terminal.ansiBrightGreen#9AD89A
  • terminal.ansiBrightMagenta#C8AEEC
  • terminal.ansiBrightRed#FFAAAA
  • terminal.ansiBrightWhite#E4E2D5
  • terminal.ansiBrightYellow#FF9E6B
  • terminal.ansiCyan#6ACFF6
  • terminal.ansiGreen#8AC88A
  • terminal.ansiMagenta#B79ED9
  • terminal.ansiRed#FF8C8C
  • terminal.ansiWhite#E0DED2
  • terminal.ansiYellow#F78A6B
  • terminal.background#252525
  • terminal.foreground#E0DED2
  • terminal.selectionBackground#3A3A3A
  • testing.iconFailed#FF8C8C
  • testing.iconPassed#8AC88A
  • testing.iconQueued#F78A6B
  • testing.iconSkipped#8B8B89
  • titleBar.activeBackground#252525
  • titleBar.activeForeground#E0DED2
  • titleBar.border#2D3030
  • titleBar.inactiveBackground#252525
  • titleBar.inactiveForeground#8B8B89
  • tree.indentGuidesStroke#00000000
  • welcomePage.background#252525
  • welcomePage.progress.background#2D3030
  • welcomePage.progress.foreground#2D3030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
storage.modifier, keyword.declaration, keyword.other, keyword.control#8899C9bold
entity.name.function, meta.function-call, support.function#A7D8EE—
variable.other, variable.other.readwrite, variable.other.object, variable.other.constant, meta.definition.variable variable.other, meta.variable.declaration variable.other, meta.variable.assignment variable.other#E0DED2—
variable.language.this, variable.language.super, variable.language.self, keyword.operator.new, keyword.other.new, keyword.control.new, storage.type.new, entity.name.type.interface, entity.name.type.enum, entity.name.type, support.class, entity.name.function.decorator, storage.type.annotation, punctuation.definition.decorator, punctuation.definition.annotation, meta.annotation.identifier, meta.decorator variable.other.readwrite, meta.decorator entity.name.function, meta.function.decorator entity.name.function, meta.function.decorator.python entity.name.function#B490AC—
meta.type, meta.type.annotation, meta.type.declaration, meta.return.type, meta.type entity.name.type, meta.type.annotation entity.name.type, support.type, support.type.primitive, support.type.builtin, storage.type#96BDBD—
string, markup.inline.raw#8AC88A—
constant.numeric, constant.language, support.constant, constant.character, keyword.other.unit#F78A6B—
constant.language.boolean, constant.language.null, constant.language.undefined#FF9E6B—
keyword.control.import, keyword.control.export, keyword.control.from#9FBAD0—
meta.object-literal.key, support.type.property-name, meta.structure.dictionary.json support.type.property-name.json, entity.name.tag.yaml, meta.key.yaml#E0DED2—
source.js.jsx entity.other.attribute-name, source.jsx entity.other.attribute-name, source.tsx entity.other.attribute-name, meta.tag.jsx entity.other.attribute-name, meta.tag.tsx entity.other.attribute-name, meta.tag.attributes.jsx entity.other.attribute-name, meta.tag.attributes.tsx entity.other.attribute-name#96BDBD—
entity.name.tag, entity.name.tag.css, entity.other.attribute-name, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css#8899C9—
string.regexp, constant.character.escape, string.regexp.group, string.regexp.arbitrary-repetition#6ACFF6—
invalid, invalid.deprecated#FF8C8Cunderline
comment, punctuation.definition.comment#7A7B76—
Calm Code by kvvprof - VS Code Theme