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#0B0C0E
  • activityBar.foreground#C2C7CE
  • activityBar.inactiveForeground#68717C
  • activityBarBadge.background#7698EE
  • activityBarBadge.foreground#0B0C0E
  • badge.background#7698EE
  • badge.foreground#0B0C0E
  • breadcrumb.activeSelectionForeground#91AFF4
  • breadcrumb.focusForeground#DDE0E4
  • breadcrumb.foreground#68717C
  • breadcrumbPicker.background#1E2023
  • button.background#5F82D8
  • button.foreground#0B0C0E
  • button.hoverBackground#7698EE
  • commandCenter.activeBackground#7698EE2E
  • commandCenter.activeForeground#DDE0E4
  • commandCenter.background#17181A
  • commandCenter.border#2B2F34
  • commandCenter.foreground#A6ADB6
  • debugIcon.breakpointCurrentStackframeForeground#CDA65E
  • debugIcon.breakpointDisabledForeground#68717C
  • debugIcon.breakpointForeground#D55561
  • debugIcon.disconnectForeground#D55561
  • debugIcon.pauseForeground#CDA65E
  • debugIcon.restartForeground#68B8C3
  • debugIcon.startForeground#78AAA3
  • debugIcon.stopForeground#D55561
  • debugToolBar.background#1E2023
  • debugToolBar.border#2B2F34
  • descriptionForeground#68717C
  • diffEditor.border#2B2F34
  • diffEditor.diagonalFill#1E2023
  • diffEditor.insertedLineBackground#80AD871F
  • diffEditor.insertedTextBackground#80AD8730
  • diffEditor.removedLineBackground#D555611F
  • diffEditor.removedTextBackground#D5556130
  • diffEditorGutter.insertedLineBackground#78AAA3
  • diffEditorGutter.removedLineBackground#D55561
  • disabledForeground#68717C
  • dropdown.background#1E2023
  • dropdown.border#2B2F34
  • dropdown.foreground#C2C7CE
  • editor.background#17181A
  • editor.focusedStackFrameHighlightBackground#7698EE2E
  • editor.foreground#C2C7CE
  • editor.inactiveSelectionBackground#7698EE2E
  • editor.lineHighlightBackground#7698EE1A
  • editor.selectionBackground#7698EE47
  • editor.stackFrameHighlightBackground#A18BD433
  • editorBracketHighlight.foreground1#7698EE
  • editorBracketHighlight.foreground2#68B8C3
  • editorBracketHighlight.foreground3#A18BD4
  • editorBracketHighlight.foreground4#5F82D8
  • editorBracketHighlight.foreground5#4D9DA9
  • editorBracketHighlight.foreground6#8772BC
  • editorBracketHighlight.unexpectedBracket.foreground#D55561
  • editorBracketMatch.background#7698EE2E
  • editorBracketMatch.border#7698EE
  • editorCursor.foreground#7698EE
  • editorError.border#00000000
  • editorError.foreground#D55561
  • editorGhostText.foreground#68717C
  • editorGroup.border#1E2023
  • editorGroupHeader.noTabsBackground#0E0F11
  • editorGroupHeader.tabsBackground#0E0F11
  • editorGutter.addedBackground#78AAA3
  • editorGutter.deletedBackground#D55561
  • editorGutter.modifiedBackground#7698EE
  • editorHint.border#00000000
  • editorHint.foreground#68717C
  • editorHoverWidget.background#1E2023
  • editorHoverWidget.border#2B2F34
  • editorInfo.border#00000000
  • editorInfo.foreground#68B8C3
  • editorInlayHint.background#1A1B1E
  • editorInlayHint.foreground#68717C
  • editorInlayHint.parameterForeground#68717C
  • editorInlayHint.typeForeground#68B8C3
  • editorLineNumber.activeForeground#A6ADB6
  • editorLineNumber.foreground#68717C
  • editorStickyScroll.background#17181A
  • editorStickyScroll.border#1E2023
  • editorStickyScrollHover.background#7698EE1A
  • editorSuggestWidget.background#1E2023
  • editorSuggestWidget.border#2B2F34
  • editorSuggestWidget.foreground#C2C7CE
  • editorSuggestWidget.highlightForeground#91AFF4
  • editorSuggestWidget.selectedBackground#7698EE2E
  • editorWarning.border#00000000
  • editorWarning.foreground#CDA65E
  • editorWidget.background#1E2023
  • editorWidget.border#2B2F34
  • errorForeground#D55561
  • focusBorder#7698EE
  • foreground#A6ADB6
  • gitDecoration.addedResourceForeground#78AAA3
  • gitDecoration.conflictingResourceForeground#CDA65E
  • gitDecoration.deletedResourceForeground#D55561
  • gitDecoration.ignoredResourceForeground#68717C
  • gitDecoration.modifiedResourceForeground#7698EE
  • icon.foreground#A6ADB6
  • input.background#17181A
  • input.border#2B2F34
  • input.foreground#C2C7CE
  • input.placeholderForeground#68717C
  • inputOption.activeBackground#7698EE2E
  • inputOption.activeBorder#7698EE
  • list.activeSelectionBackground#7698EE2E
  • list.activeSelectionForeground#DDE0E4
  • list.focusBackground#7698EE2E
  • list.focusForeground#DDE0E4
  • list.hoverBackground#7698EE1A
  • list.hoverForeground#DDE0E4
  • list.inactiveSelectionBackground#7698EE1A
  • list.inactiveSelectionForeground#C2C7CE
  • menu.background#1E2023
  • menu.foreground#C2C7CE
  • menu.selectionBackground#7698EE2E
  • menu.selectionForeground#DDE0E4
  • menu.separatorBackground#2B2F34
  • merge.border#CDA65E
  • merge.commonContentBackground#CDA65E24
  • merge.commonHeaderBackground#CDA65E24
  • merge.currentContentBackground#7698EE2E
  • merge.currentHeaderBackground#7698EE1F
  • merge.incomingContentBackground#80AD8730
  • merge.incomingHeaderBackground#80AD871F
  • minimap.errorHighlight#D55561AA
  • minimap.findMatchHighlight#7698EE47
  • minimap.infoHighlight#68B8C3AA
  • minimap.selectionHighlight#7698EE40
  • minimap.warningHighlight#D7C66AAA
  • minimapGutter.addedBackground#78AAA3
  • minimapGutter.deletedBackground#D55561
  • minimapGutter.modifiedBackground#7698EE
  • notebook.cellBorderColor#1E2023
  • notebook.cellEditorBackground#1A1B1E
  • notebook.cellStatusBarItemHoverBackground#7698EE1A
  • notebook.editorBackground#17181A
  • notebook.focusedCellBorder#7698EE
  • notebook.inactiveFocusedCellBorder#1E2023
  • notebook.outputContainerBackgroundColor#141517
  • notebook.selectedCellBorder#2B2F34
  • notebookScrollbarSlider.activeBackground#7698EE80
  • notebookScrollbarSlider.background#68717C55
  • notebookScrollbarSlider.hoverBackground#858E9970
  • notificationCenter.border#2B2F34
  • notificationCenterHeader.background#1E2023
  • notificationCenterHeader.foreground#DDE0E4
  • notificationLink.foreground#91AFF4
  • notifications.background#1E2023
  • notifications.border#2B2F34
  • notifications.foreground#C2C7CE
  • panel.background#141517
  • panel.border#2B2F34
  • peekView.border#7698EE
  • peekViewEditor.background#17181A
  • peekViewEditor.matchHighlightBackground#7698EE47
  • peekViewResult.background#111214
  • peekViewResult.fileForeground#DDE0E4
  • peekViewResult.lineForeground#68717C
  • peekViewResult.matchHighlightBackground#7698EE2E
  • peekViewResult.selectionBackground#7698EE2E
  • peekViewResult.selectionForeground#DDE0E4
  • peekViewTitle.background#1E2023
  • peekViewTitleDescription.foreground#68717C
  • peekViewTitleLabel.foreground#DDE0E4
  • pickerGroup.border#2B2F34
  • pickerGroup.foreground#68B8C3
  • problemsErrorIcon.foreground#D55561
  • problemsInfoIcon.foreground#68B8C3
  • problemsWarningIcon.foreground#CDA65E
  • quickInput.background#1E2023
  • quickInput.foreground#C2C7CE
  • quickInputList.focusBackground#7698EE2E
  • quickInputList.focusForeground#DDE0E4
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#7698EE80
  • scrollbarSlider.background#68717C55
  • scrollbarSlider.hoverBackground#858E9970
  • selection.background#7698EE47
  • sideBar.background#111214
  • sideBar.border#2B2F34
  • sideBar.foreground#A6ADB6
  • sideBarSectionHeader.background#141517
  • sideBarSectionHeader.border#1E2023
  • sideBarSectionHeader.foreground#A6ADB6
  • statusBar.background#111214
  • statusBar.debuggingBackground#A18BD4
  • statusBar.foreground#A6ADB6
  • statusBarItem.errorBackground#D55561
  • statusBarItem.remoteBackground#68B8C3
  • statusBarItem.warningBackground#CDA65E
  • tab.activeBackground#17181A
  • tab.activeBorderTop#7698EE
  • tab.activeForeground#DDE0E4
  • tab.border#1E2023
  • tab.inactiveBackground#0E0F11
  • tab.inactiveForeground#68717C
  • tab.unfocusedActiveForeground#A6ADB6
  • 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#141517
  • terminal.border#2B2F34
  • terminal.foreground#C2C7CE
  • terminal.selectionBackground#7698EE47
  • terminalCursor.background#141517
  • terminalCursor.foreground#91AFF4
  • testing.coverCountBadgeBackground#7698EE2E
  • testing.coverCountBadgeForeground#DDE0E4
  • testing.coveredBackground#80AD8724
  • testing.iconErrored#D55561
  • testing.iconFailed#D55561
  • testing.iconPassed#78AAA3
  • testing.iconQueued#CDA65E
  • testing.iconSkipped#68717C
  • testing.iconUnset#68717C
  • testing.runAction#7698EE
  • testing.uncoveredBackground#D5556129
  • titleBar.activeBackground#0E0F11
  • titleBar.activeForeground#C2C7CE
  • titleBar.inactiveBackground#0E0F11
  • titleBar.inactiveForeground#68717C
  • widget.border#2B2F34
  • widget.shadow#000000
  • window.activeBorder#1E2023
  • window.inactiveBorder#1E2023

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type.primitive.ts, support.type.primitive.tsx#68B8C3
variable.language.special.self.python, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#A18BD4
storage.type.interface.ts, storage.type.interface.tsx#7698EE
entity.name.type.interface.ts, entity.name.type.interface.tsx#BAA7E2
support.type.builtin.ts, support.type.builtin.tsx, support.type.object.module.ts, support.type.object.module.tsx#A6ADB6
support.type.primitive.ts, support.type.primitive.tsx, storage.type.ts, storage.type.tsx#89CDD5
variable.other.property.ts, variable.other.property.tsx, meta.object-literal.key.ts, meta.object-literal.key.tsx#68B8C3
entity.name.function.magic.python#BAA7E2
support.function.builtin.python, support.type.python, support.variable.python#68B8C3
support.type.exception.python, entity.name.type.exception.python#D55561
meta.function.decorator.python, entity.name.function.decorator.python, punctuation.definition.decorator.python#CDA65E
keyword.other.package.java, keyword.control.import.java#7698EE
storage.type.class.java, storage.type.interface.java, storage.type.enum.java, storage.type.record.java#91AFF4
storage.type.primitive.java#89CDD5
storage.type.annotation.java, meta.declaration.annotation.java, entity.name.type.annotation.java#CDA65E
entity.name.function.constructor.java, meta.method.identifier.java#BAA7E2
variable.other.constant.java, constant.other.java#CDA65E
storage.type.primitive.java, storage.type.java#89CDD5
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#7698EE
entity.name.module, support.module, string.quoted.module#A6ADB6
entity.name.function.constructor, meta.function.constructor, support.class#BAA7E2
support.class, support.type, support.variable, support.constant#68B8C3
string.regexp, string.regexp.js, string.regexp.ts#A18BD4
variable.other.env, variable.other.assignment.env, entity.name.variable.env#7698EE
string.unquoted.env, string.quoted.double.env, string.quoted.single.env#78AAA3
entity.name.tag.yaml, meta.mapping.key.yaml string.unquoted.plain.out.yaml, meta.mapping.key.yaml string.unquoted.plain.in.yaml#7698EE
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#78AAA3
entity.name.type.anchor.yaml, variable.other.anchor.yaml#A18BD4
variable.other.alias.yaml#68B8C3
constant.language.yaml, constant.numeric.yaml#CDA65E
support.type.property-name.json#7698EE
meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.array.json string.quoted.double.json#78AAA3
constant.language.json#CDA65E
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#68717C
markup.heading, entity.name.section, markup.heading.markdown#91AFF4bold
punctuation.definition.heading, punctuation.definition.heading.markdown#91AFF4bold
markup.bold, markup.bold.markdown#DDE0E4bold
markup.italic, markup.italic.markdown#A18BD4italic
markup.inline.raw, markup.inline.raw.string.markdown#68B8C3
markup.fenced_code.block, markup.raw.block#68B8C3
markup.quote, markup.quote.markdown#68717Citalic
punctuation.definition.list, punctuation.definition.list.begin.markdown, punctuation.definition.list.begin#91AFF4
markup.underline.link, string.other.link, meta.link.inline#89CDD5
entity.name.tag.css#7698EE
entity.other.attribute-name.class.css#7698EE
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#A18BD4
support.type.property-name.css, meta.property-name.css#68B8C3
support.constant.property-value.css, support.constant.font-name.css, support.constant.color.css, constant.other.color.rgb-value.css#A6ADB6
comment, punctuation.definition.comment#68717Citalic
comment.block.documentation, comment.line.documentation#68717Citalic
keyword, storage.modifier, storage.type.function#7698EE
meta.package.java storage.modifier.package.java#A6ADB6
meta.import.java storage.modifier.import.java#A6ADB6
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.exception, keyword.control.import, keyword.control.return#91AFF4
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.accessor#68B8C3
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#91AFF4
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#89CDD5
storage.type.struct.rust, storage.type.enum.rust, storage.type.trait.rust, storage.type.type.rust, storage.type.union.rust#91AFF4
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#89CDD5
entity.name.function.rust, meta.function.call.rust entity.name.function.rust#BAA7E2
entity.name.function.macro.rust, support.macro.rust, meta.macro.rust#BAA7E2
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust, variable.other.lifetime.rust#CDA65E
entity.name.namespace.rust, entity.name.module.rust, meta.use.rust entity.name.namespace.rust#A6ADB6
variable.other.constant.rust, constant.other.rust#CDA65E
meta.preprocessor.c, keyword.control.directive.c, keyword.control.import.c, punctuation.definition.directive.c#7698EE
storage.type.c, storage.type.built-in.c, support.type.c#89CDD5
entity.name.function.c, meta.function.c entity.name.function.c#BAA7E2
constant.other.c, variable.other.constant.c#CDA65E
entity.name.label.c#A18BD4
string.quoted.other.lt-gt.include.c, string.quoted.double.include.c#A6ADB6
entity.name.type, entity.name.class, entity.name.interface, entity.name.struct, entity.name.enum, support.type#89CDD5
storage.type.class, storage.type.interface, storage.type.struct, storage.type.enum, storage.type.trait, storage.type.union, storage.type.record#91AFF4
entity.name.namespace, entity.name.module, support.module#68B8C3
entity.name.function, support.function, variable.function, meta.function-call entity.name.function#BAA7E2
entity.name.function.member, meta.method-call entity.name.function, support.function.method#A18BD4
variable, meta.definition.variable#C2C7CE
variable.parameter#A6ADB6
variable.other.property, support.type.property-name, meta.object-literal.key#68B8C3
string#78AAA3
constant.numeric#96C2BB
constant.language.boolean#CDA65E
constant.language.null#68717C
meta.decorator, storage.type.annotation#CDA65E
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters, punctuation.definition.typeparameters#68717C
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#89CDD5
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml#7698EE
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#68717C
punctuation.definition.template-expression, punctuation.section.embedded.begin, punctuation.section.embedded.end#91AFF4
invalid, invalid.illegal#D55561