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#0f766e
  • activityBar.background#eaecf1
  • activityBar.border#dde2ea
  • activityBar.foreground#0f766e
  • activityBar.inactiveForeground#6b7280
  • activityBarBadge.background#0f766e
  • activityBarBadge.foreground#ffffff
  • badge.background#0f766e
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#0f766e
  • breadcrumb.focusForeground#1e2a3a
  • breadcrumb.foreground#6b7280
  • breadcrumbPicker.background#f0f2f6
  • button.background#0f766e
  • button.foreground#ffffff
  • button.hoverBackground#0a6960
  • button.secondaryBackground#dde2ea
  • button.secondaryForeground#1e2a3a
  • button.secondaryHoverBackground#c5cdd8
  • commandCenter.activeBackground#e5e9f0
  • commandCenter.activeForeground#1e2a3a
  • commandCenter.background#f0f2f6
  • commandCenter.border#dde2ea
  • commandCenter.foreground#5a6a7e
  • debugToolBar.background#f0f2f6
  • debugToolBar.border#dde2ea
  • descriptionForeground#5a6a7e
  • diffEditor.diagonalFill#dde2ea
  • diffEditor.insertedLineBackground#0f6e3a10
  • diffEditor.insertedTextBackground#0f6e3a18
  • diffEditor.removedLineBackground#c7304010
  • diffEditor.removedTextBackground#c7304018
  • dropdown.background#ffffff
  • dropdown.border#dde2ea
  • dropdown.foreground#1e2a3a
  • dropdown.listBackground#ffffff
  • editor.background#f5f7fa
  • editor.findMatchBackground#d9770630
  • editor.findMatchBorder#d9770650
  • editor.findMatchHighlightBackground#d9770618
  • editor.foldBackground#edf0f580
  • editor.foreground#1e2a3a
  • editor.hoverHighlightBackground#0f766e10
  • editor.inactiveSelectionBackground#0f766e15
  • editor.lineHighlightBackground#edf0f5
  • editor.lineHighlightBorder#edf0f500
  • editor.rangeHighlightBackground#edf0f580
  • editor.selectionBackground#0f766e25
  • editor.selectionHighlightBackground#0f766e18
  • editor.snippetTabstopHighlightBackground#0f766e15
  • editor.wordHighlightBackground#0f766e15
  • editor.wordHighlightStrongBackground#0f766e20
  • editorBracketHighlight.foreground1#0f766e
  • editorBracketHighlight.foreground2#6d28d9
  • editorBracketHighlight.foreground3#d97706
  • editorBracketHighlight.foreground4#c73040
  • editorBracketHighlight.foreground5#0f6e3a
  • editorBracketHighlight.foreground6#4a6fa5
  • editorBracketHighlight.unexpectedBracket.foreground#c73040
  • editorBracketMatch.background#0f766e20
  • editorBracketMatch.border#0f766e60
  • editorCursor.foreground#0f766e
  • editorError.foreground#c73040
  • editorGroup.border#dde2ea
  • editorGroup.dropBackground#0f766e15
  • editorGroupHeader.noTabsBackground#f5f7fa
  • editorGroupHeader.tabsBackground#edf0f5
  • editorGroupHeader.tabsBorder#edf0f5
  • editorGutter.addedBackground#0f6e3a60
  • editorGutter.deletedBackground#c7304060
  • editorGutter.modifiedBackground#0f766e60
  • editorHint.foreground#6d28d9
  • editorHoverWidget.background#f0f2f6
  • editorHoverWidget.border#dde2ea
  • editorHoverWidget.foreground#1e2a3a
  • editorIndentGuide.activeBackground#c5cdd8
  • editorIndentGuide.background#dde2ea
  • editorInfo.foreground#0f766e
  • editorLineNumber.activeForeground#5a6a7e
  • editorLineNumber.foreground#b5bcc8
  • editorLink.activeForeground#0f766e
  • editorOverviewRuler.border#f5f7fa
  • editorRuler.foreground#dde2ea
  • editorSuggestWidget.background#f0f2f6
  • editorSuggestWidget.border#dde2ea
  • editorSuggestWidget.focusHighlightForeground#0f766e
  • editorSuggestWidget.foreground#1e2a3a
  • editorSuggestWidget.highlightForeground#0f766e
  • editorSuggestWidget.selectedBackground#0f766e18
  • editorWarning.foreground#d97706
  • editorWhitespace.foreground#dde2ea
  • editorWidget.background#f0f2f6
  • editorWidget.border#dde2ea
  • editorWidget.foreground#1e2a3a
  • errorForeground#c73040
  • focusBorder#0f766e30
  • foreground#1e2a3a
  • gitDecoration.addedResourceForeground#0f6e3a
  • gitDecoration.conflictingResourceForeground#d97706
  • gitDecoration.deletedResourceForeground#c73040
  • gitDecoration.ignoredResourceForeground#b5bcc8
  • gitDecoration.modifiedResourceForeground#d97706
  • gitDecoration.renamedResourceForeground#0f766e
  • gitDecoration.untrackedResourceForeground#0f6e3a
  • icon.foreground#5a6a7e
  • input.background#ffffff
  • input.border#dde2ea
  • input.foreground#1e2a3a
  • input.placeholderForeground#6b7280
  • inputOption.activeBackground#0f766e25
  • inputOption.activeBorder#0f766e60
  • inputOption.activeForeground#0f766e
  • inputValidation.errorBackground#c7304018
  • inputValidation.errorBorder#c73040
  • inputValidation.infoBackground#0f766e18
  • inputValidation.infoBorder#0f766e
  • inputValidation.warningBackground#d9770618
  • inputValidation.warningBorder#d97706
  • list.activeSelectionBackground#0f766e20
  • list.activeSelectionForeground#1e2a3a
  • list.errorForeground#c73040
  • list.focusBackground#0f766e20
  • list.focusForeground#1e2a3a
  • list.highlightForeground#0f766e
  • list.hoverBackground#e5e9f0
  • list.hoverForeground#1e2a3a
  • list.inactiveSelectionBackground#0f766e12
  • list.inactiveSelectionForeground#1e2a3a
  • list.warningForeground#d97706
  • merge.currentContentBackground#0f6e3a12
  • merge.currentHeaderBackground#0f6e3a25
  • merge.incomingContentBackground#0f766e12
  • merge.incomingHeaderBackground#0f766e25
  • minimap.findMatchHighlight#d9770640
  • minimap.selectionHighlight#0f766e25
  • minimapGutter.addedBackground#0f6e3a60
  • minimapGutter.deletedBackground#c7304060
  • minimapGutter.modifiedBackground#0f766e60
  • minimapSlider.activeBackground#6b728040
  • minimapSlider.background#6b728020
  • minimapSlider.hoverBackground#6b728030
  • notification.background#f0f2f6
  • notification.foreground#1e2a3a
  • notificationCenterHeader.background#edf0f5
  • notificationCenterHeader.foreground#1e2a3a
  • panel.background#edf0f5
  • panel.border#dde2ea
  • panelTitle.activeBorder#0f766e
  • panelTitle.activeForeground#1e2a3a
  • panelTitle.inactiveForeground#6b7280
  • peekView.border#0f766e60
  • peekViewEditor.background#f0f2f6
  • peekViewEditor.matchHighlightBackground#d9770625
  • peekViewResult.background#edf0f5
  • peekViewResult.fileForeground#1e2a3a
  • peekViewResult.lineForeground#5a6a7e
  • peekViewResult.matchHighlightBackground#d9770625
  • peekViewResult.selectionBackground#0f766e20
  • peekViewResult.selectionForeground#1e2a3a
  • peekViewTitle.background#f0f2f6
  • peekViewTitleDescription.foreground#5a6a7e
  • peekViewTitleLabel.foreground#1e2a3a
  • quickInput.background#f0f2f6
  • quickInput.foreground#1e2a3a
  • quickInputList.focusBackground#0f766e20
  • quickInputList.focusForeground#1e2a3a
  • scrollbar.shadow#00000012
  • scrollbarSlider.activeBackground#6b728070
  • scrollbarSlider.background#6b728030
  • scrollbarSlider.hoverBackground#6b728050
  • selection.background#0f766e30
  • settings.headerForeground#1e2a3a
  • settings.modifiedItemIndicator#0f766e
  • sideBar.background#edf0f5
  • sideBar.border#dde2ea
  • sideBar.foreground#4a5568
  • sideBarSectionHeader.background#edf0f5
  • sideBarSectionHeader.foreground#1e2a3a
  • sideBarTitle.foreground#1e2a3a
  • statusBar.background#eaecf1
  • statusBar.border#dde2ea
  • statusBar.debuggingBackground#d97706
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#5a6a7e
  • statusBar.noFolderBackground#eaecf1
  • statusBar.noFolderForeground#5a6a7e
  • statusBarItem.activeBackground#0f766e20
  • statusBarItem.hoverBackground#0f766e12
  • statusBarItem.prominentBackground#0f766e12
  • statusBarItem.prominentHoverBackground#0f766e20
  • statusBarItem.remoteBackground#0f766e
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#f5f7fa
  • tab.activeBorder#f5f7fa
  • tab.activeBorderTop#0f766e
  • tab.activeForeground#1e2a3a
  • tab.border#dde2ea
  • tab.hoverBackground#f5f7fa
  • tab.inactiveBackground#edf0f5
  • tab.inactiveForeground#6b7280
  • tab.unfocusedActiveBackground#f5f7fa
  • tab.unfocusedActiveBorderTop#0f766e60
  • tab.unfocusedActiveForeground#5a6a7e
  • tab.unfocusedInactiveBackground#edf0f5
  • tab.unfocusedInactiveForeground#6b7280
  • terminal.ansiBlack#1e2a3a
  • terminal.ansiBlue#4a6fa5
  • terminal.ansiBrightBlack#5a6a7e
  • terminal.ansiBrightBlue#5a82b8
  • terminal.ansiBrightCyan#16948a
  • terminal.ansiBrightGreen#3a9d68
  • terminal.ansiBrightMagenta#9055f0
  • terminal.ansiBrightRed#d94452
  • terminal.ansiBrightWhite#1e2a3a
  • terminal.ansiBrightYellow#d06830
  • terminal.ansiCyan#0f766e
  • terminal.ansiGreen#0f6e3a
  • terminal.ansiMagenta#6d28d9
  • terminal.ansiRed#c73040
  • terminal.ansiWhite#f5f7fa
  • terminal.ansiYellow#d97706
  • terminal.background#f5f7fa
  • terminal.foreground#1e2a3a
  • terminalCursor.foreground#0f766e
  • titleBar.activeBackground#eaecf1
  • titleBar.activeForeground#1e2a3a
  • titleBar.border#dde2ea
  • titleBar.inactiveBackground#edf0f5
  • titleBar.inactiveForeground#6b7280
  • tree.indentGuidesStroke#dde2ea
  • walkThrough.embeddedEditorBackground#edf0f5
  • welcomePage.background#f5f7fa
  • welcomePage.tileBackground#edf0f5
  • widget.shadow#00000012

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7280italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage, storage.type, storage.modifier#d97706
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.relational#5a6a7e
entity.name.function, meta.function-call, support.function, meta.method-call entity.name.function#0f766e
string, string.quoted, string.template#0f6e3a
constant.character.escape#0a5c2e
string.template punctuation.definition, punctuation.definition.template-expression#d97706
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#a3390d
constant.language, support.constant#a3390ditalic
constant, constant.other#a3390d
variable, variable.other, variable.other.readwrite#1e2a3a
variable.parameter#2d3d52
variable.language#d97706italic
variable.other.property, variable.other.object.property, meta.object-literal.key#1e2a3a
entity.name.type, entity.name.class, entity.name.namespace, support.type, support.class, entity.other.inherited-class#6d28d9
meta.type.annotation, meta.return.type#6d28d9
entity.name.type.interface#6d28d9
entity.name.type.enum#6d28d9
meta.decorator, meta.decorator entity.name.function#d97706italic
entity.name.tag, meta.tag#d97706
entity.other.attribute-name#0f766eitalic
support.class.component, entity.name.tag support.class.component#6d28d9
punctuation, meta.brace, punctuation.definition.block, punctuation.definition.parameters, punctuation.separator, punctuation.terminator#5a6a7e
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#d97706
string.regexp#0f766e
markup.heading, entity.name.section#0f766ebold
markup.bold#d97706bold
markup.italic#6d28d9italic
markup.underline.link#0f766e
markup.inline.raw, markup.fenced_code#a3390d
markup.list#d97706
markup.quote#6b7280italic
support.type.property-name.css, support.type.vendored.property-name.css#0f766e
support.constant.property-value.css, support.constant.color.css#a3390d
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#d97706
keyword.other.unit.css#a3390d
support.type.property-name.json#0f766e
meta.structure.dictionary.value.json string.quoted#0f6e3a
entity.name.tag.yaml#0f766e
variable.parameter.function.language.special.self.python, variable.language.special.self.python#d97706italic
entity.name.function.decorator.python#d97706italic
meta.fstring#0f6e3a
entity.name.package.go#6d28d9
storage.modifier.lifetime.rust, entity.name.lifetime.rust#d97706italic
entity.name.function.macro.rust#0f766ebold
variable.other.normal.shell, variable.other.special.shell#0f766e
markup.inserted#0f6e3a
markup.deleted#c73040
markup.changed#d97706
invalid, invalid.illegal#c73040
invalid.deprecated#a3390dstrikethrough