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.background#020304
  • activityBar.foreground#D8E1EA
  • activityBar.inactiveForeground#778899
  • activityBarBadge.background#72A7FF
  • activityBarBadge.foreground#020304
  • badge.background#72A7FF
  • badge.foreground#020304
  • breadcrumb.activeSelectionForeground#9BC2FF
  • breadcrumb.focusForeground#DDE0E4
  • breadcrumb.foreground#778899
  • breadcrumbPicker.background#11161C
  • button.background#72A7FF
  • button.foreground#020304
  • button.hoverBackground#9BC2FF
  • commandCenter.activeBackground#72A7FF24
  • commandCenter.activeForeground#DDE0E4
  • commandCenter.background#0B0E12
  • commandCenter.border#20262E
  • commandCenter.foreground#A9B7C6
  • debugIcon.breakpointCurrentStackframeForeground#E8BD63
  • debugIcon.breakpointDisabledForeground#5E6D7B
  • debugIcon.breakpointForeground#F07878
  • debugIcon.disconnectForeground#F07878
  • debugIcon.pauseForeground#E8BD63
  • debugIcon.restartForeground#58D3E0
  • debugIcon.startForeground#91D89D
  • debugIcon.stopForeground#F07878
  • debugToolBar.background#11161C
  • debugToolBar.border#20262E
  • descriptionForeground#778899
  • diffEditor.border#20262E
  • diffEditor.diagonalFill#11161C
  • diffEditor.insertedLineBackground#80AD871F
  • diffEditor.insertedTextBackground#80AD8730
  • diffEditor.removedLineBackground#D555611F
  • diffEditor.removedTextBackground#D5556130
  • diffEditorGutter.insertedLineBackground#91D89D
  • diffEditorGutter.removedLineBackground#F07878
  • disabledForeground#5E6D7B
  • dropdown.background#11161C
  • dropdown.border#20262E
  • dropdown.foreground#D8E1EA
  • editor.background#020304
  • editor.focusedStackFrameHighlightBackground#72A7FF26
  • editor.foreground#D8E1EA
  • editor.inactiveSelectionBackground#72A7FF26
  • editor.lineHighlightBackground#FFFFFF0A
  • editor.selectionBackground#72A7FF3D
  • editor.stackFrameHighlightBackground#A18BD433
  • editorBracketHighlight.foreground1#7698EE
  • editorBracketHighlight.foreground2#68B8C3
  • editorBracketHighlight.foreground3#A18BD4
  • editorBracketHighlight.foreground4#5F82D8
  • editorBracketHighlight.foreground5#4D9DA9
  • editorBracketHighlight.foreground6#8772BC
  • editorBracketHighlight.unexpectedBracket.foreground#F07878
  • editorBracketMatch.background#72A7FF26
  • editorBracketMatch.border#72A7FF
  • editorCursor.foreground#72A7FF
  • editorError.border#00000000
  • editorError.foreground#F07878
  • editorGhostText.foreground#5E6D7B
  • editorGroup.border#11161C
  • editorGroupHeader.noTabsBackground#020304
  • editorGroupHeader.tabsBackground#020304
  • editorGutter.addedBackground#91D89D
  • editorGutter.deletedBackground#F07878
  • editorGutter.modifiedBackground#72A7FF
  • editorHint.border#00000000
  • editorHint.foreground#778899
  • editorHoverWidget.background#11161C
  • editorHoverWidget.border#20262E
  • editorInfo.border#00000000
  • editorInfo.foreground#58D3E0
  • editorInlayHint.background#07090C
  • editorInlayHint.foreground#778899
  • editorInlayHint.parameterForeground#778899
  • editorInlayHint.typeForeground#58D3E0
  • editorLineNumber.activeForeground#A9B7C6
  • editorLineNumber.foreground#5E6D7B
  • editorStickyScroll.background#020304
  • editorStickyScroll.border#11161C
  • editorStickyScrollHover.background#FFFFFF0C
  • editorSuggestWidget.background#11161C
  • editorSuggestWidget.border#20262E
  • editorSuggestWidget.foreground#D8E1EA
  • editorSuggestWidget.highlightForeground#9BC2FF
  • editorSuggestWidget.selectedBackground#72A7FF24
  • editorWarning.border#00000000
  • editorWarning.foreground#E8BD63
  • editorWidget.background#11161C
  • editorWidget.border#20262E
  • errorForeground#F07878
  • focusBorder#84EAF3
  • foreground#A9B7C6
  • gitDecoration.addedResourceForeground#91D89D
  • gitDecoration.conflictingResourceForeground#E8BD63
  • gitDecoration.deletedResourceForeground#F07878
  • gitDecoration.ignoredResourceForeground#5E6D7B
  • gitDecoration.modifiedResourceForeground#72A7FF
  • icon.foreground#A9B7C6
  • input.background#0B0E12
  • input.border#20262E
  • input.foreground#D8E1EA
  • input.placeholderForeground#778899
  • inputOption.activeBackground#72A7FF24
  • inputOption.activeBorder#72A7FF
  • list.activeSelectionBackground#72A7FF24
  • list.activeSelectionForeground#DDE0E4
  • list.focusBackground#72A7FF24
  • list.focusForeground#DDE0E4
  • list.hoverBackground#FFFFFF0C
  • list.hoverForeground#DDE0E4
  • list.inactiveSelectionBackground#FFFFFF0C
  • list.inactiveSelectionForeground#D8E1EA
  • menu.background#11161C
  • menu.foreground#D8E1EA
  • menu.selectionBackground#72A7FF24
  • menu.selectionForeground#DDE0E4
  • menu.separatorBackground#20262E
  • merge.border#E8BD63
  • merge.commonContentBackground#CDA65E24
  • merge.commonHeaderBackground#CDA65E24
  • merge.currentContentBackground#72A7FF26
  • merge.currentHeaderBackground#7698EE1F
  • merge.incomingContentBackground#80AD8730
  • merge.incomingHeaderBackground#80AD871F
  • minimap.errorHighlight#D55561AA
  • minimap.findMatchHighlight#72A7FF3D
  • minimap.infoHighlight#68B8C3AA
  • minimap.selectionHighlight#7698EE40
  • minimap.warningHighlight#D7C66AAA
  • minimapGutter.addedBackground#91D89D
  • minimapGutter.deletedBackground#F07878
  • minimapGutter.modifiedBackground#72A7FF
  • notebook.cellBorderColor#11161C
  • notebook.cellEditorBackground#07090C
  • notebook.cellStatusBarItemHoverBackground#FFFFFF0C
  • notebook.editorBackground#020304
  • notebook.focusedCellBorder#72A7FF
  • notebook.inactiveFocusedCellBorder#11161C
  • notebook.outputContainerBackgroundColor#07090C
  • notebook.selectedCellBorder#20262E
  • notebookScrollbarSlider.activeBackground#7698EE80
  • notebookScrollbarSlider.background#68717C55
  • notebookScrollbarSlider.hoverBackground#858E9970
  • notificationCenter.border#20262E
  • notificationCenterHeader.background#11161C
  • notificationCenterHeader.foreground#DDE0E4
  • notificationLink.foreground#9BC2FF
  • notifications.background#11161C
  • notifications.border#20262E
  • notifications.foreground#D8E1EA
  • panel.background#07090C
  • panel.border#20262E
  • peekView.border#72A7FF
  • peekViewEditor.background#020304
  • peekViewEditor.matchHighlightBackground#72A7FF3D
  • peekViewResult.background#07090C
  • peekViewResult.fileForeground#DDE0E4
  • peekViewResult.lineForeground#778899
  • peekViewResult.matchHighlightBackground#72A7FF26
  • peekViewResult.selectionBackground#72A7FF24
  • peekViewResult.selectionForeground#DDE0E4
  • peekViewTitle.background#11161C
  • peekViewTitleDescription.foreground#778899
  • peekViewTitleLabel.foreground#DDE0E4
  • pickerGroup.border#20262E
  • pickerGroup.foreground#58D3E0
  • problemsErrorIcon.foreground#F07878
  • problemsInfoIcon.foreground#58D3E0
  • problemsWarningIcon.foreground#E8BD63
  • quickInput.background#11161C
  • quickInput.foreground#D8E1EA
  • quickInputList.focusBackground#72A7FF24
  • quickInputList.focusForeground#DDE0E4
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#7698EE80
  • scrollbarSlider.background#68717C55
  • scrollbarSlider.hoverBackground#858E9970
  • selection.background#72A7FF3D
  • sideBar.background#07090C
  • sideBar.border#20262E
  • sideBar.foreground#A9B7C6
  • sideBarSectionHeader.background#0B0E12
  • sideBarSectionHeader.border#11161C
  • sideBarSectionHeader.foreground#A9B7C6
  • statusBar.background#07090C
  • statusBar.debuggingBackground#B58AF2
  • statusBar.foreground#A9B7C6
  • statusBarItem.errorBackground#F07878
  • statusBarItem.remoteBackground#58D3E0
  • statusBarItem.warningBackground#E8BD63
  • tab.activeBackground#020304
  • tab.activeBorderTop#72A7FF
  • tab.activeForeground#DDE0E4
  • tab.border#11161C
  • tab.inactiveBackground#020304
  • tab.inactiveForeground#778899
  • tab.unfocusedActiveForeground#A9B7C6
  • terminal.ansiBlack#121315
  • terminal.ansiBlue#7698EE
  • terminal.ansiBrightBlack#68717C
  • terminal.ansiBrightBlue#91AFF4
  • terminal.ansiBrightCyan#89CDD5
  • terminal.ansiBrightGreen#96C2BB
  • terminal.ansiBrightMagenta#BAA7E2
  • terminal.ansiBrightRed#E06B75
  • terminal.ansiBrightWhite#F0F1F3
  • terminal.ansiBrightYellow#F0DE7A
  • terminal.ansiCyan#68B8C3
  • terminal.ansiGreen#78AAA3
  • terminal.ansiMagenta#A18BD4
  • terminal.ansiRed#D55561
  • terminal.ansiWhite#C2C7CE
  • terminal.ansiYellow#D7C66A
  • terminal.background#07090C
  • terminal.border#20262E
  • terminal.foreground#D8E1EA
  • terminal.selectionBackground#72A7FF3D
  • terminalCursor.background#07090C
  • terminalCursor.foreground#9BC2FF
  • testing.coverCountBadgeBackground#72A7FF24
  • testing.coverCountBadgeForeground#DDE0E4
  • testing.coveredBackground#80AD8724
  • testing.iconErrored#F07878
  • testing.iconFailed#F07878
  • testing.iconPassed#91D89D
  • testing.iconQueued#E8BD63
  • testing.iconSkipped#778899
  • testing.iconUnset#778899
  • testing.runAction#72A7FF
  • testing.uncoveredBackground#D5556129
  • titleBar.activeBackground#020304
  • titleBar.activeForeground#D8E1EA
  • titleBar.inactiveBackground#020304
  • titleBar.inactiveForeground#778899
  • widget.border#20262E
  • widget.shadow#000000
  • window.activeBorder#11161C
  • window.inactiveBorder#11161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type.primitive.ts, support.type.primitive.tsx#58D3E0
variable.language.special.self.python, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#B58AF2
storage.type.interface.ts, storage.type.interface.tsx#72A7FF
entity.name.type.interface.ts, entity.name.type.interface.tsx#D0A6FF
support.type.builtin.ts, support.type.builtin.tsx, support.type.object.module.ts, support.type.object.module.tsx#A9B7C6
support.type.primitive.ts, support.type.primitive.tsx, storage.type.ts, storage.type.tsx#84EAF3
variable.other.property.ts, variable.other.property.tsx, meta.object-literal.key.ts, meta.object-literal.key.tsx#58D3E0
entity.name.function.magic.python#D0A6FF
support.function.builtin.python, support.type.python, support.variable.python#58D3E0
support.type.exception.python, entity.name.type.exception.python#FF9797
meta.function.decorator.python, entity.name.function.decorator.python, punctuation.definition.decorator.python#E8BD63
keyword.other.package.java, keyword.control.import.java#72A7FF
storage.type.class.java, storage.type.interface.java, storage.type.enum.java, storage.type.record.java#9BC2FF
storage.type.primitive.java#84EAF3
storage.type.annotation.java, meta.declaration.annotation.java, entity.name.type.annotation.java#E8BD63
entity.name.function.constructor.java, meta.method.identifier.java#D0A6FF
variable.other.constant.java, constant.other.java#FFD47B
storage.type.primitive.java, storage.type.java#84EAF3
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#72A7FF
entity.name.module, support.module, string.quoted.module#A9B7C6
entity.name.function.constructor, meta.function.constructor, support.class#D0A6FF
support.class, support.type, support.variable, support.constant#58D3E0
string.regexp, string.regexp.js, string.regexp.ts#B58AF2
variable.other.env, variable.other.assignment.env, entity.name.variable.env#72A7FF
string.unquoted.env, string.quoted.double.env, string.quoted.single.env#B0EDB8
entity.name.tag.yaml, meta.mapping.key.yaml string.unquoted.plain.out.yaml, meta.mapping.key.yaml string.unquoted.plain.in.yaml#72A7FF
meta.mapping.value.yaml string.unquoted.plain.out.yaml, meta.mapping.value.yaml string.unquoted.plain.in.yaml, meta.block.mapping.value.yaml string.unquoted.plain.out.yaml#B0EDB8
entity.name.type.anchor.yaml, variable.other.anchor.yaml#B58AF2
variable.other.alias.yaml#58D3E0
constant.language.yaml, constant.numeric.yaml#FFD47B
support.type.property-name.json#72A7FF
meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.array.json string.quoted.double.json#B0EDB8
constant.language.json#FFD47B
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json#778899
markup.heading, entity.name.section, markup.heading.markdown#9BC2FFbold
punctuation.definition.heading, punctuation.definition.heading.markdown#9BC2FFbold
markup.bold, markup.bold.markdown#DDE0E4bold
markup.italic, markup.italic.markdown#B58AF2italic
markup.inline.raw, markup.inline.raw.string.markdown#58D3E0
markup.fenced_code.block, markup.raw.block#58D3E0
markup.quote, markup.quote.markdown#778899italic
punctuation.definition.list, punctuation.definition.list.begin.markdown, punctuation.definition.list.begin#9BC2FF
markup.underline.link, string.other.link, meta.link.inline#84EAF3
entity.name.tag.css#72A7FF
entity.other.attribute-name.class.css#72A7FF
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#B58AF2
support.type.property-name.css, meta.property-name.css#58D3E0
support.constant.property-value.css, support.constant.font-name.css, support.constant.color.css, constant.other.color.rgb-value.css#A9B7C6
comment, punctuation.definition.comment#5E6D7Bitalic
comment.block.documentation, comment.line.documentation#778899italic
keyword, storage.modifier, storage.type.function#72A7FF
meta.package.java storage.modifier.package.java#A9B7C6
meta.import.java storage.modifier.import.java#A9B7C6
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.exception, keyword.control.import, keyword.control.return#9BC2FF
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.accessor#58D3E0
storage.type.interface.ts, storage.type.class.ts, storage.type.enum.ts, storage.type.type.ts, storage.type.namespace.ts, storage.type.interface.tsx, storage.type.class.tsx#9BC2FF
entity.name.type.interface.ts, entity.name.type.class.ts, entity.name.type.alias.ts, entity.name.type.enum.ts, entity.name.type.interface.tsx, entity.name.type.class.tsx#84EAF3
storage.type.struct.rust, storage.type.enum.rust, storage.type.trait.rust, storage.type.type.rust, storage.type.union.rust#9BC2FF
entity.name.type.struct.rust, entity.name.type.enum.rust, entity.name.type.trait.rust, entity.name.type.rust, support.type.rust, storage.type.numeric.rust, storage.type.primitive.rust#84EAF3
entity.name.function.rust, meta.function.call.rust entity.name.function.rust#D0A6FF
entity.name.function.macro.rust, support.macro.rust, meta.macro.rust#D0A6FF
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust, variable.other.lifetime.rust#E8BD63
entity.name.namespace.rust, entity.name.module.rust, meta.use.rust entity.name.namespace.rust#A9B7C6
variable.other.constant.rust, constant.other.rust#FFD47B
meta.preprocessor.c, keyword.control.directive.c, keyword.control.import.c, punctuation.definition.directive.c#72A7FF
storage.type.c, storage.type.built-in.c, support.type.c#84EAF3
entity.name.function.c, meta.function.c entity.name.function.c#D0A6FF
constant.other.c, variable.other.constant.c#FFD47B
entity.name.label.c#B58AF2
string.quoted.other.lt-gt.include.c, string.quoted.double.include.c#A9B7C6
entity.name.type, entity.name.class, entity.name.interface, entity.name.struct, entity.name.enum, support.type#84EAF3
storage.type.class, storage.type.interface, storage.type.struct, storage.type.enum, storage.type.trait, storage.type.union, storage.type.record#9BC2FF
entity.name.namespace, entity.name.module, support.module#58D3E0
entity.name.function, support.function, variable.function, meta.function-call entity.name.function#D0A6FF
entity.name.function.member, meta.method-call entity.name.function, support.function.method#B58AF2
variable, meta.definition.variable#D8E1EA
variable.parameter#A9B7C6
variable.other.property, support.type.property-name, meta.object-literal.key#58D3E0
string#B0EDB8
constant.numeric#FFD47B
constant.language.boolean#E8BD63
constant.language.null#778899
meta.decorator, storage.type.annotation#E8BD63
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters, punctuation.definition.typeparameters#778899
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#84EAF3
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml#72A7FF
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#778899
punctuation.definition.template-expression, punctuation.section.embedded.begin, punctuation.section.embedded.end#9BC2FF
invalid, invalid.illegal#FF9797
Eliejesresce K2 Themes by Archimango - VS Code Theme