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.activeBackground#00000000
  • activityBar.activeBorder#00897b
  • activityBar.background#f4f7f9
  • activityBar.border#d4dde3
  • activityBar.foreground#2c3e50
  • activityBar.inactiveForeground#90a4ae
  • activityBarBadge.background#00897b
  • activityBarBadge.foreground#ffffff
  • badge.background#00897b
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#1a2733
  • breadcrumb.background#f4f7f9
  • breadcrumb.focusForeground#1a2733
  • breadcrumb.foreground#90a4ae
  • button.background#00897b
  • button.foreground#ffffff
  • button.hoverBackground#00695c
  • button.secondaryBackground#d4dde3
  • button.secondaryForeground#2c3e50
  • checkbox.background#ffffff
  • checkbox.border#b8c5cd
  • debugToolBar.background#f4f7f9
  • diffEditor.insertedTextBackground#558b2f22
  • diffEditor.removedTextBackground#c6282822
  • dropdown.background#e0e7ec
  • dropdown.border#b8c5cd
  • dropdown.foreground#2c3e50
  • editor.background#f4f7f9
  • editor.findMatchBackground#c9851a55
  • editor.findMatchBorder#c9851a
  • editor.findMatchHighlightBackground#c9851a33
  • editor.findRangeHighlightBackground#00000008
  • editor.foreground#2c3e50
  • editor.hoverHighlightBackground#00897b18
  • editor.inactiveSelectionBackground#a8d8d844
  • editor.lineHighlightBackground#e8eef2
  • editor.lineHighlightBorder#e8eef2
  • editor.rangeHighlightBackground#00000008
  • editor.selectionBackground#a8d8d8
  • editor.selectionForeground#1a2733
  • editor.selectionHighlightBackground#a8d8d855
  • editor.wordHighlightBackground#a8d8d880
  • editor.wordHighlightStrongBackground#80cbc480
  • editorBracketMatch.background#00897b22
  • editorBracketMatch.border#00897b
  • editorCodeLens.foreground#90a4ae
  • editorCursor.foreground#272727
  • editorError.foreground#b71c1c
  • editorGroup.border#d4dde3
  • editorGroup.dropBackground#00897b20
  • editorGroupHeader.noTabsBackground#f4f7f9
  • editorGroupHeader.tabsBackground#f4f7f9
  • editorGroupHeader.tabsBorder#d4dde3
  • editorGutter.addedBackground#558b2f
  • editorGutter.deletedBackground#c62828
  • editorGutter.modifiedBackground#c9851a
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#b8c5cd
  • editorIndentGuide.activeBackground#90a4ae
  • editorIndentGuide.background#e0e7ec
  • editorInfo.foreground#1976d2
  • editorLineNumber.activeForeground#90a4ae
  • editorLineNumber.foreground#c2c8cc
  • editorLink.activeForeground#1976d2
  • editorMarkerNavigation.background#ffffff
  • editorOverviewRuler.border#d4dde3
  • editorRuler.foreground#e0e7ec
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#b8c5cd
  • editorSuggestWidget.foreground#2c3e50
  • editorSuggestWidget.highlightForeground#00897b
  • editorSuggestWidget.selectedBackground#a8d8d8
  • editorWarning.foreground#c9851a
  • editorWhitespace.foreground#e0e7ec
  • editorWidget.background#ffffff
  • editorWidget.border#b8c5cd
  • errorForeground#b71c1c
  • extensionButton.prominentBackground#00897b
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#00695c
  • focusBorder#00897b
  • foreground#2c3e50
  • gitDecoration.addedResourceForeground#558b2f
  • gitDecoration.conflictingResourceForeground#7b1fa2
  • gitDecoration.deletedResourceForeground#90a4ae
  • gitDecoration.ignoredResourceForeground#90a4ae
  • gitDecoration.modifiedResourceForeground#00897b
  • gitDecoration.submoduleResourceForeground#1976d2
  • gitDecoration.untrackedResourceForeground#558b2f
  • input.background#ffffff
  • input.border#b8c5cd
  • input.foreground#2c3e50
  • input.placeholderForeground#90a4ae
  • inputOption.activeBackground#00897b33
  • inputOption.activeBorder#00897b
  • list.activeSelectionBackground#a8d8d8
  • list.activeSelectionForeground#1a2733
  • list.dropBackground#a8d8d8
  • list.errorForeground#b71c1c
  • list.focusBackground#a8d8d8
  • list.highlightForeground#00897b
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#e0e7ec
  • list.warningForeground#c9851a
  • menu.background#ffffff
  • menu.foreground#2c3e50
  • menu.selectionBackground#a8d8d8
  • menu.selectionForeground#1a2733
  • menu.separatorBackground#b8c5cd
  • menubar.selectionBackground#00000011
  • menubar.selectionForeground#2c3e50
  • notificationCenterHeader.background#ffffff
  • notifications.background#ffffff
  • notifications.border#d4dde3
  • notifications.foreground#2c3e50
  • panel.background#eef2f5
  • panel.border#d4dde3
  • panelTitle.activeBorder#00897b
  • panelTitle.activeForeground#1a2733
  • panelTitle.inactiveForeground#90a4ae
  • peekView.border#00897b
  • peekViewEditor.background#f4f7f9
  • peekViewEditorGutter.background#f4f7f9
  • peekViewResult.background#ffffff
  • peekViewTitle.background#f4f7f9
  • peekViewTitleLabel.foreground#1a2733
  • pickerGroup.border#b8c5cd
  • pickerGroup.foreground#00897b
  • progressBar.background#00897b
  • quickInput.background#ffffff
  • quickInput.foreground#2c3e50
  • scrollbar.shadow#cfd8dc
  • scrollbarSlider.activeBackground#00897baa
  • scrollbarSlider.background#b8c5cd55
  • scrollbarSlider.hoverBackground#00897baa
  • selection.background#a8d8d8
  • settings.checkboxBackground#ffffff
  • settings.checkboxBorder#b8c5cd
  • settings.dropdownBackground#ffffff
  • settings.dropdownBorder#b8c5cd
  • settings.headerForeground#1a2733
  • settings.modifiedItemIndicator#00897b
  • settings.numberInputBackground#ffffff
  • settings.textInputBackground#ffffff
  • sideBar.background#f4f7f9
  • sideBar.border#d4dde3
  • sideBar.dropBackground#a8d8d833
  • sideBar.foreground#2c3e50
  • sideBarSectionHeader.background#f4f7f9
  • sideBarSectionHeader.border#d4dde3
  • sideBarSectionHeader.foreground#90a4ae
  • sideBarTitle.foreground#90a4ae
  • statusBar.background#f4f7f9
  • statusBar.border#d4dde3
  • statusBar.debuggingBackground#c62828
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#90a4ae
  • statusBar.noFolderBackground#f4f7f9
  • statusBarItem.hoverBackground#00000011
  • statusBarItem.remoteBackground#00897b
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#f4f7f9
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00897b
  • tab.activeForeground#1a2733
  • tab.border#d4dde3
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#f4f7f9
  • tab.inactiveForeground#90a4ae
  • tab.unfocusedActiveBackground#f4f7f9
  • tab.unfocusedActiveForeground#2c3e5080
  • tab.unfocusedInactiveForeground#90a4ae80
  • terminal.ansiBlack#37474f
  • terminal.ansiBlue#1976d2
  • terminal.ansiBrightBlack#90a4ae
  • terminal.ansiBrightBlue#1976d2
  • terminal.ansiBrightCyan#0288d1
  • terminal.ansiBrightGreen#558b2f
  • terminal.ansiBrightMagenta#7b1fa2
  • terminal.ansiBrightRed#c62828
  • terminal.ansiBrightWhite#1a2733
  • terminal.ansiBrightYellow#c9851a
  • terminal.ansiCyan#0288d1
  • terminal.ansiGreen#558b2f
  • terminal.ansiMagenta#7b1fa2
  • terminal.ansiRed#b71c1c
  • terminal.ansiWhite#2c3e50
  • terminal.ansiYellow#c9851a
  • terminal.background#f4f7f9
  • terminal.foreground#2c3e50
  • terminal.selectionBackground#a8d8d8
  • terminalCursor.foreground#272727
  • textLink.activeForeground#1976d2
  • textLink.foreground#1976d2
  • titleBar.activeBackground#f4f7f9
  • titleBar.activeForeground#2c3e50
  • titleBar.border#d4dde3
  • titleBar.inactiveBackground#f4f7f9
  • titleBar.inactiveForeground#2c3e5099
  • toolbar.hoverBackground#d4dde3
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#2c3e50
comment, punctuation.definition.comment#90a4aeitalic
keyword, keyword.control, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, keyword.control.module, keyword.control.flow, keyword.control.return, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.switch, keyword.other.new, keyword.other, keyword.other.package, keyword.other.import, storage.type, storage.type.ts, storage.type.tsx, storage.type.js, storage.type.java, storage.type.function.arrow, storage.type.type, storage.type.type.ts, storage.type.type.tsx, storage.type.interface, storage.type.interface.ts, storage.type.interface.tsx, storage.type.class, storage.type.enum, storage.modifier, storage.modifier.import, storage.modifier.package#7b1fa2
entity.name.namespace, support.other.namespace, meta.import entity.name.namespace, meta.package.declaration entity.name.namespace, entity.name.module, meta.import string.quoted, variable.language.wildcard.java, storage.modifier.import.java, storage.modifier.package.java, meta.import.java, meta.package.java#c9851a
meta.import variable.other.readwrite, meta.import variable.other.readwrite.alias, meta.import variable.other, meta.export variable.other.readwrite, meta.export variable.other#c9851a
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.type, keyword.operator.spread, keyword.operator.rest, keyword.operator.expression.typeof, keyword.operator.expression.instanceof, keyword.operator.expression.keyof#0288d1
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.typeparameters, punctuation.definition.template-expression, punctuation.section.embedded, meta.brace.curly, meta.brace.round, meta.brace.square, punctuation.separator.comma, punctuation.terminator.statement, punctuation.accessor, punctuation.separator, punctuation.separator.key-value#0288d1
variable, variable.other, variable.other.readwrite, variable.other.object, variable.other.constant, variable.other.readwrite.alias, variable.other.object.property, variable.other.property, variable.other.field#1a2733
variable.parameter#d84315
variable.language.this, variable.language.super#b71c1c
string, string.quoted.single, string.quoted.double, string.quoted.backtick, string.template#558b2f
constant.character.escape#0288d1
string.regexp#558b2f
constant.numeric#d84315
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.boolean.true, constant.language.boolean.false, constant.language.boolean.true.java, constant.language.boolean.false.java, constant.language.null.java#7b1fa2
variable.other.enummember, constant.other.enum, meta.enum variable.other.readwrite#1a2733
support.type.primitive, keyword.type, support.type.builtin, storage.type.primitive, storage.type.numeric.java, storage.type.boolean.java, storage.type.object.array.java#7b1fa2italic
meta.method entity.name.function, meta.definition.method entity.name.function, entity.name.function.member#1976d2
meta.function-call.method entity.name.function, meta.method-call entity.name.function, variable.function.member, support.function.member#1976d2
meta.function entity.name.function, meta.definition.function entity.name.function, entity.name.function#1976d2
meta.function-call entity.name.function, meta.function-call.generic entity.name.function, support.function, support.function.builtin#c9851a
support.function.hook, entity.name.function.hook, variable.other.constant.hook, meta.function-call entity.name.function.hook, support.function.react, entity.name.function.use#c9851a
entity.name.class, entity.name.type.class, support.class, entity.other.inherited-class#c9851a
new.expr entity.name.type, meta.new entity.name.type, meta.instance.constructor entity.name.type, support.class.builtin, support.class.error.ts, support.class.promise.ts, support.class.console.ts, support.class.error.tsx, support.class.promise.tsx, support.class.builtin.ts#c9851a
meta.class.abstract entity.name.class, meta.class.abstract entity.name.type.class, entity.name.type.class.abstract, entity.name.class.abstract#558b2f
entity.name.type.interface#558b2f
entity.name.type.enum#c9851a
entity.name.type, entity.name.type.alias, support.type#558b2f
entity.name.type.parameter#558b2f
entity.name.function.decorator, meta.decorator, punctuation.decorator, storage.type.annotation, entity.name.type.annotation, punctuation.definition.annotation, meta.declaration.annotation, support.type.annotation#7b1fa2
constant.other.key.java, meta.declaration.annotation.java constant.other.key, meta.declaration.annotation constant.other.key, meta.declaration.annotation variable.other.readwrite, meta.declaration.annotation variable.other, meta.declaration.annotation variable.parameter, meta.annotation variable.other.readwrite, meta.annotation variable.other, meta.annotation variable.parameter, meta.annotation.identifier, meta.annotation.parameters variable.other.readwrite, meta.annotation.parameters variable.other, meta.annotation.java variable.other.readwrite, meta.annotation.java variable.other, annotation.identifier, annotation.parameter.name#d84315
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#0288d1
entity.name.tag, entity.name.tag.html, entity.name.tag.tsx, entity.name.tag.jsx, entity.name.tag.js, support.class.component, support.class.component.tsx, support.class.component.jsx#c62828
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#c9851aitalic
entity.name.tag.css#c62828
entity.other.attribute-name.class.css#c9851a
entity.other.attribute-name.id.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css#7b1fa2
support.type.property-name.css#00897b
constant.numeric.css, keyword.other.unit.css, support.constant.property-value.css#d84315
support.type.property-name.json#7b1fa2
constant.language.json#7b1fa2
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.DCL.sql, keyword.other.alias.sql, keyword.other.create.sql, keyword.other.drop.sql, keyword.other.update.sql, keyword.other.delete.sql, keyword.other.insert.sql, keyword.other.select.sql, keyword.other.from.sql, keyword.other.where.sql, keyword.other.join.sql, keyword.other.order-by.sql, keyword.other.group-by.sql, keyword.other.having.sql, keyword.other.union.sql, keyword.other.limit.sql, keyword.other.sql#7b1fa2
keyword.operator.logical.sql, keyword.operator.comparison.sql, keyword.operator.assignment.sql, keyword.operator.math.sql, keyword.operator.concatenator.sql, keyword.other.operator.sql#0288d1
storage.type.sql, support.type.sql, support.type.builtin.sql#7b1fa2italic
support.function.aggregate.sql, support.function.scalar.sql, support.function.string.sql, support.function.numeric.sql, support.function.datetime.sql, support.function.window.sql, support.function.sql, meta.function-call.sql entity.name.function, entity.name.function.sql#c9851a
string.quoted.single.sql, string.quoted.double.sql#558b2f
constant.numeric.sql#d84315
entity.name.function.table.sql, entity.name.table.sql, constant.other.table-name.sql, constant.other.database-name.sql, meta.table-name.sql, entity.name.schema.sql#c9851a
constant.other.column-name.sql, entity.name.column.sql, meta.column-name.sql, variable.other.column.sql#1a2733
entity.name.alias.sql, variable.other.alias.sql#558b2f
string.quoted.other.identifier.sql, entity.name.identifier.sql#c9851a
variable.parameter.sql, variable.other.bind.sql, constant.other.placeholder.sql#d84315
punctuation.separator.comma.sql, punctuation.definition.parameters.sql, punctuation.section.scope.sql, punctuation.terminator.statement.sql#0288d1
comment.line.double-dash.sql, comment.block.sql#90a4aeitalic
markup.heading, entity.name.section.markdown#558b2f
markup.bold#c62828bold
markup.italic#c62828italic
markup.inline.raw#7b1fa2
markup.underline.link, string.other.link#1976d2
invalid, invalid.illegal#b71c1c