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#74E7A9
  • activityBar.activeFocusBorder#74E7A9
  • activityBar.background#193326
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#8F8496
  • activityBarBadge.background#74E7A9
  • activityBarBadge.foreground#193326
  • badge.background#74E7A9
  • badge.foreground#193326
  • breadcrumb.background#F2FFF7
  • breadcrumb.focusForeground#263A2E
  • breadcrumb.foreground#62586A
  • button.background#35A66B
  • button.foreground#FFFFFF
  • button.hoverBackground#74E7A9
  • button.secondaryBackground#48745A
  • button.secondaryForeground#FFFFFF
  • checkbox.background#193326
  • checkbox.border#48745A
  • checkbox.foreground#F4EEF8
  • commandCenter.background#274A36
  • commandCenter.border#48745A
  • commandCenter.foreground#F4EEF8
  • descriptionForeground#A89EAE
  • dropdown.background#274A36
  • dropdown.border#48745A
  • dropdown.foreground#F4EEF8
  • editor.background#F2FFF7
  • editor.foreground#263A2E
  • editor.inactiveSelectionBackground#74E7A92B
  • editor.lineHighlightBackground#74E7A90C
  • editor.selectionBackground#74E7A94D
  • editor.selectionHighlightBackground#74E7A924
  • editor.wordHighlightBackground#12648220
  • editor.wordHighlightStrongBackground#8F345A24
  • editorBracketHighlight.foreground1#623B91
  • editorBracketHighlight.foreground2#126482
  • editorBracketHighlight.foreground3#246B4E
  • editorBracketHighlight.foreground4#93471F
  • editorBracketHighlight.foreground5#8F345A
  • editorBracketHighlight.foreground6#795700
  • editorBracketMatch.background#74E7A925
  • editorBracketMatch.border#74E7A9
  • editorCursor.foreground#35A66B
  • editorError.foreground#E94362
  • editorGroup.border#48745A
  • editorGroupHeader.noTabsBackground#193326
  • editorGroupHeader.tabsBackground#193326
  • editorGutter.addedBackground#66D39A
  • editorGutter.deletedBackground#FF7892
  • editorGutter.modifiedBackground#62C7F2
  • editorHint.foreground#247A53
  • editorHoverWidget.background#274A36
  • editorHoverWidget.border#48745A
  • editorHoverWidget.foreground#F4EEF8
  • editorIndentGuide.activeBackground1#74E7A988
  • editorIndentGuide.background1#DDD3E2
  • editorInfo.foreground#08749A
  • editorLineNumber.activeForeground#62586A
  • editorLineNumber.foreground#918697
  • editorSuggestWidget.background#274A36
  • editorSuggestWidget.foreground#F4EEF8
  • editorSuggestWidget.highlightForeground#74E7A9
  • editorSuggestWidget.selectedBackground#74E7A935
  • editorWarning.foreground#D78B00
  • editorWhitespace.foreground#DDD3E2
  • editorWidget.background#274A36
  • editorWidget.border#48745A
  • editorWidget.foreground#F4EEF8
  • errorForeground#FF8FA3
  • focusBorder#74E7A9
  • foreground#F4EEF8
  • gitDecoration.addedResourceForeground#73D99F
  • gitDecoration.deletedResourceForeground#F7768E
  • gitDecoration.ignoredResourceForeground#827889
  • gitDecoration.modifiedResourceForeground#61BEEA
  • gitDecoration.untrackedResourceForeground#93E7B7
  • icon.foreground#D7CEDD
  • input.background#193326
  • input.border#48745A
  • input.foreground#F4EEF8
  • input.placeholderForeground#958A9D
  • inputOption.activeBackground#74E7A928
  • inputOption.activeBorder#74E7A9
  • list.activeSelectionBackground#74E7A932
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#74E7A9
  • list.highlightForeground#74E7A9
  • list.hoverBackground#74E7A915
  • list.inactiveSelectionBackground#74E7A920
  • list.inactiveSelectionForeground#F4EEF8
  • menu.background#274A36
  • menu.border#48745A
  • menu.foreground#F4EEF8
  • menu.selectionBackground#74E7A935
  • menu.selectionForeground#FFFFFF
  • minimap.background#F2FFF7
  • notificationCenter.border#48745A
  • notifications.background#274A36
  • notifications.border#48745A
  • notifications.foreground#F4EEF8
  • panel.background#274A36
  • panel.border#48745A
  • panel.foreground#F4EEF8
  • panelTitle.activeBorder#74E7A9
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#A89EAE
  • peekView.border#74E7A9
  • peekViewEditor.background#F2FFF7
  • peekViewEditor.matchHighlightBackground#74E7A945
  • peekViewResult.background#21402E
  • peekViewResult.foreground#F4EEF8
  • peekViewResult.matchHighlightBackground#74E7A93D
  • progressBar.background#74E7A9
  • quickInput.background#274A36
  • quickInput.foreground#F4EEF8
  • quickInputList.focusBackground#74E7A935
  • quickInputList.focusForeground#FFFFFF
  • quickInputList.focusIconForeground#74E7A9
  • scrollbarSlider.activeBackground#74E7A975
  • scrollbarSlider.background#74E7A930
  • scrollbarSlider.hoverBackground#74E7A955
  • selection.background#74E7A945
  • sideBar.background#21402E
  • sideBar.border#48745A
  • sideBar.foreground#F4EEF8
  • sideBarSectionHeader.background#274A36
  • sideBarSectionHeader.border#48745A
  • sideBarSectionHeader.foreground#F7F1FA
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#35A66B
  • statusBar.border#74E7A9
  • statusBar.debuggingBackground#A4375E
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#193326
  • statusBarItem.hoverBackground#FFFFFF18
  • statusBarItem.remoteBackground#74E7A9
  • statusBarItem.remoteForeground#193326
  • tab.activeBackground#F2FFF7
  • tab.activeBorderTop#74E7A9
  • tab.activeForeground#263A2E
  • tab.border#48745A
  • tab.hoverBackground#274A36
  • tab.inactiveBackground#193326
  • tab.inactiveForeground#A89EAE
  • tab.unfocusedActiveBorderTop#74E7A999
  • terminal.ansiBlack#302A36
  • terminal.ansiBlue#79CEFF
  • terminal.ansiBrightBlack#766D7C
  • terminal.ansiBrightBlue#A9DFFF
  • terminal.ansiBrightCyan#A2EEE3
  • terminal.ansiBrightGreen#A5F1C7
  • terminal.ansiBrightMagenta#E5C5FF
  • terminal.ansiBrightRed#FFB0BD
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE2A0
  • terminal.ansiCyan#72E2D2
  • terminal.ansiGreen#84E6B1
  • terminal.ansiMagenta#D6A6FF
  • terminal.ansiRed#FF8FA3
  • terminal.ansiWhite#EDE6F1
  • terminal.ansiYellow#FFD477
  • terminal.background#274A36
  • terminal.foreground#F4EEF8
  • terminal.selectionBackground#74E7A942
  • terminalCursor.foreground#74E7A9
  • textLink.activeForeground#FFFFFF
  • textLink.foreground#74E7A9
  • titleBar.activeBackground#193326
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#193326
  • titleBar.inactiveForeground#8F8496
  • tree.indentGuidesStroke#48745A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#675E70italic
string, string.quoted, constant.other.symbol#246B4E—
constant.character.escape, constant.other.placeholder#176E64bold
constant.numeric, constant.language, constant.character#93471F—
keyword, keyword.control, storage.type, storage.modifier#623B91bold
entity.name.function, support.function, meta.function-call, variable.function#126482—
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class, support.type.primitive#795700—
variable, variable.other.readwrite, variable.other.constant, variable.language#372F40—
variable.other.property, support.variable.property, meta.object-literal.key, meta.mapping.key, entity.name.tag.yaml#8F345A—
variable.parameter, meta.function.parameters variable, meta.parameters variable#8D4425italic
entity.name.tag, support.class.component, punctuation.definition.tag#9C2D50—
entity.other.attribute-name, support.type.property-name#735100—
meta.decorator, meta.annotation, punctuation.decorator, entity.name.function.decorator#82396F—
string.regexp, constant.other.character-class, keyword.operator.quantifier.regexp#176E64—
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic#56417E—
punctuation, punctuation.separator, punctuation.terminator, meta.brace, meta.delimiter#554F5C—
support.type.property-name.json, string.json support.type.property-name#8F345A—
markup.heading, entity.name.section.markdown#623B91bold
markup.underline.link, string.other.link, meta.link.inline.markdown#126482underline
markup.inserted, meta.diff.header.to-file#246B4E—
markup.deleted, meta.diff.header.from-file#9C2D50—
invalid, invalid.illegal, invalid.deprecated#FFFFFFbold