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
Turbokiller by Murat Demirci - VS Code Theme