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#80CBC4
  • activityBar.background#090B10
  • activityBar.border#3E445D60
  • activityBar.foreground#babed8
  • activityBarBadge.background#80CBC4
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#464B5D
  • breadcrumb.activeSelectionForeground#80CBC4
  • breadcrumb.background#0F111A
  • breadcrumb.focusForeground#babed8
  • breadcrumb.foreground#4B526D
  • breadcrumbPicker.background#090B10
  • button.background#717CB450
  • button.foreground#ffffff
  • debugConsole.errorForeground#f07178
  • debugConsole.infoForeground#89DDFF
  • debugConsole.warningForeground#FFCB6B
  • debugToolBar.background#0F111A
  • diffEditor.insertedTextBackground#89DDFF20
  • diffEditor.removedTextBackground#ff9cac20
  • dropdown.background#0F111A
  • dropdown.border#FFFFFF10
  • editor.background#0F111A
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#80CBC4
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ffffff50
  • editor.findRangeHighlightBackground#FFCB6B30
  • editor.foreground#babed8
  • editor.lineHighlightBackground#00000050
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#135564
  • editor.selectionHighlightBackground#FFCC0020
  • editor.wordHighlightBackground#ff9cac30
  • editor.wordHighlightStrongBackground#C3E88D30
  • editorBracketMatch.background#0F111A
  • editorBracketMatch.border#FFCC0050
  • editorCursor.foreground#FFCC00
  • editorError.foreground#f0717870
  • editorGroup.border#00000030
  • editorGroup.dropBackground#f0717880
  • editorGroup.focusedEmptyBorder#f07178
  • editorGroupHeader.tabsBackground#0F111A
  • editorGutter.addedBackground#C3E88D60
  • editorGutter.deletedBackground#f0717860
  • editorGutter.modifiedBackground#82AAFF60
  • editorHoverWidget.background#0F111A
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground1#3B3F51
  • editorIndentGuide.background1#3B3F5170
  • editorInfo.foreground#82AAFF70
  • editorLineNumber.activeForeground#4B526D
  • editorLineNumber.foreground#3B3F5180
  • editorLink.activeForeground#babed8
  • editorMarkerNavigation.background#babed805
  • editorOverviewRuler.border#0F111A
  • editorOverviewRuler.errorForeground#f0717840
  • editorOverviewRuler.findMatchForeground#80CBC480
  • editorOverviewRuler.infoForeground#82AAFF40
  • editorOverviewRuler.warningForeground#FFCB6B40
  • editorRuler.foreground#3B3F51
  • editorSuggestWidget.background#0F111A
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#babed8
  • editorSuggestWidget.highlightForeground#80CBC4
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#FFCB6B70
  • editorWhitespace.foreground#babed840
  • editorWidget.background#090B10
  • editorWidget.border#80CBC4
  • editorWidget.resizeBorder#80CBC4
  • extensionBadge.remoteForeground#babed8
  • extensionButton.prominentBackground#C3E88D90
  • extensionButton.prominentForeground#babed8
  • extensionButton.prominentHoverBackground#C3E88D
  • focusBorder#FFFFFF00
  • foreground#babed8
  • gitDecoration.conflictingResourceForeground#FFCB6B90
  • gitDecoration.deletedResourceForeground#f0717890
  • gitDecoration.ignoredResourceForeground#4B526D90
  • gitDecoration.modifiedResourceForeground#82AAFF90
  • gitDecoration.untrackedResourceForeground#C3E88D90
  • input.background#1A1C25
  • input.border#FFFFFF10
  • input.foreground#babed8
  • input.placeholderForeground#babed860
  • inputOption.activeBackground#babed830
  • inputOption.activeBorder#babed830
  • inputValidation.errorBorder#f07178
  • inputValidation.infoBorder#82AAFF
  • inputValidation.warningBorder#FFCB6B
  • list.activeSelectionBackground#090B10
  • list.activeSelectionForeground#80CBC4
  • list.dropBackground#f0717880
  • list.focusBackground#babed820
  • list.focusForeground#babed8
  • list.highlightForeground#80CBC4
  • list.hoverBackground#090B10
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#80CBC4
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#0F111A
  • menu.foreground#babed8
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#80CBC4
  • menu.separatorBackground#babed8
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#80CBC4
  • notificationLink.foreground#80CBC4
  • notifications.background#0F111A
  • notifications.foreground#babed8
  • panel.background#090B10
  • panel.border#3E445D60
  • panelTitle.activeBorder#80CBC4
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#babed8
  • peekView.border#00000030
  • peekViewEditor.background#1A1C25
  • peekViewEditor.matchHighlightBackground#717CB450
  • peekViewEditorGutter.background#1A1C25
  • peekViewResult.background#1A1C25
  • peekViewResult.matchHighlightBackground#717CB450
  • peekViewResult.selectionBackground#4B526D70
  • peekViewTitle.background#1A1C25
  • peekViewTitleDescription.foreground#babed860
  • pickerGroup.foreground#80CBC4
  • progressBar.background#80CBC4
  • quickInput.background#0F111A
  • quickInput.foreground#4B526D
  • quickInputList.focusBackground#babed820
  • sash.hoverBorder#80cbc4
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#80CBC4
  • scrollbarSlider.background#8F93A220
  • scrollbarSlider.hoverBackground#8F93A210
  • selection.background#1c5c6a
  • settings.checkboxBackground#090B10
  • settings.checkboxForeground#babed8
  • settings.dropdownBackground#090B10
  • settings.dropdownForeground#babed8
  • settings.headerForeground#80CBC4
  • settings.modifiedItemIndicator#80CBC4
  • settings.numberInputBackground#090B10
  • settings.numberInputForeground#babed8
  • settings.textInputBackground#090B10
  • settings.textInputForeground#babed8
  • sideBar.background#090B10
  • sideBar.border#3E445D60
  • sideBar.foreground#4B526D
  • sideBarSectionHeader.background#090B10
  • sideBarSectionHeader.border#3E445D60
  • sideBarTitle.foreground#babed8
  • statusBar.background#090B10
  • statusBar.border#3E445D60
  • statusBar.debuggingBackground#C792EA
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#4B526D
  • statusBar.noFolderBackground#0F111A
  • statusBarItem.activeBackground#f0717880
  • statusBarItem.hoverBackground#464B5D20
  • statusBarItem.remoteBackground#80CBC4
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#0F111A
  • tab.activeBorder#80CBC4
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#4B526D
  • tab.border#0F111A
  • tab.inactiveBackground#0F111A
  • tab.inactiveForeground#4B526D
  • tab.inactiveModifiedBorder#904348
  • tab.unfocusedActiveBorder#464B5D
  • tab.unfocusedActiveForeground#babed8
  • tab.unfocusedActiveModifiedBorder#c05a60
  • tab.unfocusedInactiveModifiedBorder#904348
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#464B5D
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#f07178
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#FFCB6B
  • terminalCommandGuide.foreground#3B3F5180
  • terminalCursor.background#000000
  • terminalCursor.foreground#FFCB6B
  • textLink.activeForeground#babed8
  • textLink.foreground#80CBC4
  • titleBar.activeBackground#090B10
  • titleBar.activeForeground#babed8
  • titleBar.border#3E445D60
  • titleBar.inactiveBackground#090B10
  • titleBar.inactiveForeground#4B526D
  • tree.indentGuidesStroke#3B3F51
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#babed8
string#C3E88D
punctuation, constant.other.symbol#89DDFF
constant.character.escape, text.html constant.character.entity.named#babed8bold
constant.language.boolean#ff9cac
constant.numeric#F78C6C
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#babed8
keyword.control#89DDFFitalic
keyword.control.pseudo-method#89c0ffitalic
variable.parameteritalic
variable.parameter.function.language.special.self.python, variable.language.this, variable.language.self#FF9CACitalic
variable.parameter, constant.other.symbol.hashkey.parameter.function, constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standard-color-name.css, constant.other.database-name.sql, constant.other.symbol.hashkey.parameter.function.rbs#babed8italic
string.regexp#C3E88D
string.regexp.character-class, string.regexp.arbitrary-repetition#F78C6C
keyword.other.unit.em.css, keyword.other.unit.percentage.css, keyword.other.unit.rem.css, keyword.other.unit.px.css#F78C6C
entity.name.type.class.ruby, entity.other.inherited-class.ruby, entity.name.type.module, meta.module.ruby, meta.function.method.with-arguments.ruby, meta.function.method.without-arguments.ruby#ffcb6b
constant.other.symbol.ruby, constant.language.symbol, constant.other.symbol.hashkey.ruby, string.regexp.character-class#89DDFF
punctuation.definition.variable#8bdcf7
keyword.operator.type.ts, keyword.operator.type.annotation.ts, keyword.operator.assignment.ts, keyword.operator.relational.ts, keyword.operator.increment.ts, keyword.operator.bitwise.shift.ts, keyword.operator.bitwise.ts, keyword.operator.assignment.js, keyword.operator.relational.js, keyword.operator.increment.js, keyword.operator.bitwise.shift.js, keyword.operator.bitwise.js, keyword.generator.asterisk.js, storage.type.function.arrow.ts, storage.type.function.ts, storage.type.interface.ts, storage.type.enum.ts, storage.type.ts, support.type.primitive.ts, storage.type.class.ts, storage.type.class.js, storage.type.function.js, storage.type.js, storage.type.function.arrow.js, constant.language.null.js, support.type.builtin.rbs#89DDFF
keyword.other#F78C6C
keyword.other.special-method#C792EA
keyword, modifier, variable.language.this, support.type.object, constant.language#89DDFF
entity.name.function, support.function#82AAFF
storage.type, storage.modifier, storage.control#C792EA
support.module, support.node#f07178italic
support.type, constant.other.key, entity.name.type, entity.other.inherited-class, entity.other#FFCB6B
comment, string.quoted.docstring#5f6576italic
punctuation.definition.comment, comment.line.punctuation#464B5Ditalic
comment.line.parameter.yard#7A7F9Bitalic
comment.line.type#8B7B4Ditalic
punctuation#89DDFF
entity.name, entity.name.type.class, support.type, support.class, meta.use#FFCB6B
variable.object.property, meta.field.declaration entity.name.function#f07178
meta.definition.method entity.name.function#f07178
constant.other.constant, variable.other.constant#a9adc2bold
meta.function entity.name.function#82AAFF
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#89DDFF
meta.embedded, source.groovy.embedded, meta.template.expression#babed8
entity.name.tag.yaml#f07178
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#f07178
constant.language.json#89DDFF
entity.other.attribute-name.class#FFCB6B
entity.other.attribute-name.id#F78C6C
source.css entity.name.tag#FFCB6B
support.type.property-name.css#B2CCD6
meta.tag, punctuation.definition.tag#89DDFF
entity.name.tag#f07178
entity.other.attribute-name#C792EA
punctuation.definition.entity.html#babed8
markup.heading#89DDFF
text.html.markdown meta.link.inline, meta.link.reference#f07178
text.html.markdown beginning.punctuation.definition.list#89DDFF
markup.italic#f07178italic
markup.bold#f07178bold
markup.bold markup.italic, markup.italic markup.bold#f07178italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#C3E88D
markup.inline.raw.string.markdown#C3E88D
meta.structure.dictionary.json support.type.property-name.json#C792EA
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6B
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F78C6C
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f07178
comment.line.keyword.yard#84609citalic bold
meta.attribute.rust#C792EAitalic
entity.name.type.primitive.rust, entity.name.type.numeric.rust#C792EA
entity.name.namespace.rust#FFCB6B
meta.function.call.rust#82AAFF
meta.diff, meta.diff.header, punctuation.definition.to-file.diff, punctuation.definition.from-file.diff, punctuation.definition.range.diff#89DDFFitalic
markup.deleted, punctuation.definition.deleted.diff#f07178
markup.changed#F78C6C
markup.inserted, punctuation.definition.inserted.diff#C3E88D