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#FFB454
  • activityBar.background#0A0E15
  • activityBar.border#1A1F28
  • activityBar.dropBorder#FFB45455
  • activityBar.foreground#FFB454
  • activityBar.inactiveForeground#7F8C9D
  • activityBarBadge.background#FFB454
  • activityBarBadge.foreground#0D1117
  • breadcrumb.background#0D1117
  • breadcrumb.focusForeground#FFB454
  • button.background#FFB454CC
  • button.border#FFB45433
  • button.foreground#0D1117
  • button.hoverBackground#FFB454
  • button.secondaryBackground#2E5C8A66
  • button.secondaryHoverBackground#2E5C8A99
  • checkbox.background#141922
  • checkbox.border#5C6370
  • debugIcon.startForeground#98C379
  • debugToolBar.background#0A0E15
  • diffEditor.insertedLineBackground#98C37915
  • diffEditor.insertedTextBackground#98C37925
  • diffEditor.removedLineBackground#F4474715
  • diffEditor.removedTextBackground#F4474725
  • disabledForeground#6B7280AA
  • dropdown.background#10151DF2
  • dropdown.border#1A1F28
  • dropdown.foreground#E6EDF3
  • dropdown.listBackground#141922F2
  • editor.background#0D1117
  • editor.findMatchBackground#FFB45466
  • editor.findMatchBorder#FFB45499
  • editor.findMatchHighlightBackground#2E5C8A55
  • editor.findMatchHighlightBorder#2E5C8A88
  • editor.foreground#D7E1ED
  • editor.inactiveSelectionBackground#2E5C8A33
  • editor.lineHighlightBackground#161B22DD
  • editor.lineHighlightBorder#1A1F2888
  • editor.rangeHighlightBackground#2E5C8A22
  • editor.selectionBackground#2E5C8A66
  • editor.selectionHighlightBackground#FFB45420
  • editor.selectionHighlightBorder#FFB45440
  • editor.snippetFinalTabstopHighlightBorder#98C379
  • editor.snippetTabstopHighlightBackground#2E5C8A33
  • editor.wordHighlightBackground#FFB45418
  • editor.wordHighlightBorder#FFB45440
  • editor.wordHighlightStrongBackground#FFB45428
  • editorBracketHighlight.foreground1#FFB454
  • editorBracketHighlight.foreground2#98C379
  • editorBracketHighlight.foreground3#C17AD8
  • editorBracketHighlight.foreground4#6AD4FF
  • editorBracketHighlight.foreground5#FFD580
  • editorBracketHighlight.foreground6#D8A166
  • editorBracketHighlight.unexpectedBracket.foreground#F44747
  • editorBracketMatch.background#2E5C8A40
  • editorBracketMatch.border#2E5C8A80
  • editorCursor.background#0D1117
  • editorCursor.foreground#FFB454
  • editorError.foreground#FF5555
  • editorGhostText.foreground#5C6370AA
  • editorGroup.border#1A1F28
  • editorGroup.dropBackground#2E5C8A33
  • editorGroup.emptyBackground#0D1117
  • editorGroupHeader.tabsBackground#10151D
  • editorGroupHeader.tabsBorder#0F131A
  • editorGutter.addedBackground#98C379CC
  • editorGutter.background#0D111700
  • editorGutter.deletedBackground#F44747CC
  • editorGutter.modifiedBackground#FFB454CC
  • editorHint.foreground#98C379
  • editorIndentGuide.activeBackground#5C637066
  • editorIndentGuide.background#4A4F5733
  • editorInfo.foreground#6AD4FF
  • editorLineNumber.activeForeground#FFB454
  • editorLineNumber.foreground#757C88
  • editorUnnecessaryCode.opacity#5C637090
  • editorWarning.foreground#FFD580
  • editorWhitespace.foreground#4A4F5744
  • editorWidget.background#10151DF2
  • editorWidget.border#1A1F28
  • editorWidget.resizeBorder#FFB45440
  • focusBorder#FFB45480
  • focusBorder.active#FFB454
  • gitDecoration.addedResourceForeground#98C379
  • gitDecoration.conflictingResourceForeground#C17AD8
  • gitDecoration.ignoredResourceForeground#5C6370CC
  • gitDecoration.modifiedResourceForeground#FFB454
  • gitDecoration.submoduleResourceForeground#7F8C9D
  • gitDecoration.untrackedResourceForeground#6AD4FF
  • input.background#141922
  • input.border#1A1F28
  • input.foreground#FFD580
  • input.placeholderForeground#7F8C9D
  • inputOption.activeBackground#FFB45420
  • inputOption.activeBorder#FFB454
  • list.activeSelectionBackground#2E5C8A80
  • list.activeSelectionForeground#FFB454
  • list.focusBackground#2E5C8A66
  • list.focusForeground#FFB454
  • list.highlightForeground#FFB454
  • list.hoverBackground#2E5C8A40
  • list.hoverForeground#FFB454
  • list.inactiveSelectionBackground#2E5C8A33
  • list.inactiveSelectionForeground#FFB45499
  • menu.background#10151DF2
  • menu.foreground#E6EDF3
  • menu.selectionBackground#2E5C8A80
  • menu.selectionBorder#FFB45440
  • menu.selectionForeground#FFB454
  • menubar.selectionBackground#2E5C8AB3
  • menubar.selectionForeground#FFB454
  • merge.commonContentBackground#2E5C8A22
  • merge.commonHeaderBackground#2E5C8A44
  • merge.currentHeaderBackground#2E5C8A33
  • merge.incomingHeaderBackground#98C37933
  • minimap.background#0D111700
  • minimap.errorHighlight#F44747AA
  • minimap.selectionHighlight#2E5C8A66
  • minimap.warningHighlight#E5C07BAA
  • minimapGutter.addedBackground#98C37966
  • minimapGutter.deletedBackground#F4474766
  • minimapGutter.modifiedBackground#FFB45466
  • minimapSlider.activeBackground#FFB45466
  • minimapSlider.background#3B404833
  • minimapSlider.hoverBackground#FFB45444
  • notebook.cellBorderColor#1A1F28
  • notebook.cellStatusBarItemHoverBackground#2E5C8A55
  • notebook.focusedCellBorder#2E5C8A
  • notebook.focusedEditorBorder#FFB45440
  • notificationToast.border#2E5C8A
  • panel.border#1A1F28
  • panelSection.dropBackground#2E5C8A33
  • panelSectionHeader.background#141922
  • panelSectionHeader.border#1A1F28
  • panelSectionHeader.foreground#FFB454
  • panelTitle.activeBorder#FFB454
  • panelTitle.activeForeground#FFB454
  • panelTitle.inactiveForeground#7F8C9D
  • peekView.border#2E5C8A
  • peekViewEditor.background#10151D
  • peekViewResult.background#141922
  • peekViewTitle.background#10151D
  • quickInput.background#141922F2
  • quickInput.foreground#FFD580
  • quickInputList.focusBackground#2E5C8A80
  • quickInputList.focusForeground#FFD580
  • quickInputTitle.background#10151D
  • scrollbarSlider.activeBackground#FFB454AA
  • scrollbarSlider.background#3B404844
  • scrollbarSlider.hoverBackground#FFB45480
  • settings.dropdownBackground#141922
  • settings.dropdownBorder#1A1F28
  • settings.headerForeground#FFB454
  • settings.modifiedItemIndicator#2E5C8A
  • settings.numberInputBackground#141922
  • settings.numberInputBorder#1A1F28
  • settings.textInputBackground#141922
  • settings.textInputBorder#1A1F28
  • sideBar.background#10151DF0
  • sideBar.border#1A1F28
  • sideBar.dropBackground#1A1F2888
  • sideBar.foreground#E6EDF3
  • sideBarSectionHeader.background#141922
  • sideBarSectionHeader.border#1A1F28
  • sideBarSectionHeader.foreground#FFB454
  • sideBarTitle.foreground#FFB454
  • statusBar.background#0A0E15
  • statusBar.border#1A1F28
  • statusBar.debuggingBackground#D8A166
  • statusBar.debuggingForeground#0D1117
  • statusBar.foreground#FFB454
  • statusBar.noFolderBackground#141922
  • statusBarItem.activeBackground#2E5C8A66
  • statusBarItem.hoverBackground#2E5C8A33
  • statusBarItem.prominentBackground#FFB45420
  • statusBarItem.prominentHoverBackground#FFB45433
  • symbolIcon.arrayForeground#FFB454
  • symbolIcon.classForeground#4DC4FF
  • symbolIcon.colorForeground#D8A166
  • tab.activeBackground#161B22
  • tab.activeBorder#FFB454
  • tab.activeBorderTop#FFB454
  • tab.activeForeground#FFB454
  • tab.border#0D1117
  • tab.hoverBackground#141922
  • tab.hoverBorder#FFB45420
  • tab.inactiveBackground#10151D
  • tab.inactiveForeground#7F8C9D
  • tab.unfocusedActiveBorder#FFB45440
  • tab.unfocusedHoverBackground#10151D
  • tab.unfocusedHoverBorder#FFB45410
  • terminal.ansiBlack#0E1320
  • terminal.ansiBlue#2E5C8A
  • terminal.ansiBrightBlack#3B4048
  • terminal.ansiBrightBlue#6A9BEE
  • terminal.ansiBrightCyan#6AD4FF
  • terminal.ansiBrightGreen#8AFF80
  • terminal.ansiBrightMagenta#C678DD
  • terminal.ansiBrightRed#FF6B6B
  • terminal.ansiBrightWhite#E6EDF3
  • terminal.ansiBrightYellow#FFD580
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#C17AD8
  • terminal.ansiRed#F44747
  • terminal.ansiWhite#C0CDDC
  • terminal.ansiYellow#E5C07B
  • terminal.background#0D1117
  • terminal.border#1A1F28
  • terminal.dropBackground#2E5C8A33
  • terminal.foreground#D7E1ED
  • terminal.hoverBackground#161B22
  • terminal.tab.activeBorder#FFB454
  • terminalCommandDecoration.defaultBackground#2E5C8A
  • terminalCommandDecoration.errorBackground#F44747
  • terminalCommandDecoration.successBackground#98C379
  • terminalCursor.background#0D1117
  • terminalCursor.foreground#FFB454
  • titleBar.activeBackground#141922
  • titleBar.activeForeground#FFB454
  • titleBar.border#1A1F28
  • titleBar.inactiveBackground#0D1117
  • titleBar.inactiveForeground#7F8C9D
  • vedaccent.air#98C379
  • vedaccent.earth#D8A166
  • vedaccent.fire#F44747
  • vedaccent.water#56B6C2
  • vedic.glow#FFB45420
  • vedic.highlight#1A1F28
  • vedic.primary#FFB454
  • vedic.secondary#2E5C8A
  • vedic.shadow#0A0E15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#F44747bold underline
comment#7C8494italic
comment.annotation#FFB454italic
keyword, storage.type, storage.modifier#C17AD8
entity.name.function, support.function#FFD580
string, punctuation.definition.string#98C379—
variable#B3C7D8
parameter#FF9166
variable.parameter#FF9166
keyword.control.flow.async#FF6B6B
invalid.deprecated#F44747strikethrough
storage.modifier.lifetime.rust, keyword.operator.arrow.cpp#98C379
meta.type.annotation.python, support.type.python#61AFEF
keyword.operator.channel.go#FF9166
meta.type.parameters.ts#FF9166
entity.name.tag.custom, entity.name.tag.svelte, entity.name.tag.astro#98C379
entity.name.type.class.python, variable.parameter.jupyter#4DC4FF
meta.embedded.inline.markdown#98C379—
markup.inline.raw.markdown#98C379—
entity.name.tag.html, meta.tag.block.html entity.name.tag, meta.tag.inline.html entity.name.tag, meta.tag.other.html entity.name.tag#F07178
meta.tag.structure.any.html entity.name.tag.html#F07178
entity.other.attribute-name.html#E5C07B
entity.other.attribute-name.data.html#56B6C2
punctuation.definition.tag.html#7F8C9D
string.quoted.double.html#98C379—
meta.tag.void.html#F07178—
text.html.basic#F0F3F6—
entity.other.attribute-name.class.css#E5C07B
entity.other.attribute-name.id.css#56B6C2
entity.name.tag.css#C17AD8—
support.type.property-name.css#6AD4FF
support.type.vendored.property-name.css#7F8C9D
entity.name.type#4DC4FF
meta.attribute-selector.css#FF9166—
storage.type.generic.java#C17AD8—
meta.property-value.css#E5C07B—
meta.property-value.numeric.css#E5C07B—
entity.other.attribute-name.pseudo-class.css#C17AD8
entity.other.attribute-name.pseudo-element.css#FF6B6B
meta.at-rule.media.css#FF9166
meta.property-list.css meta.property-name#4DC4FF
support.type.property-name.animation.css#FF80BF
meta.function.css#98C379
meta.declaration-id.css#F44747
entity.other.attribute-name.class.css.tailwind#E5C07B
support.type.property-name.transition.css#6AD4FF
support.class.component.jsx, meta.class.component.jsx#FF80BF
meta.tag.jsx entity.name.tag.jsx#F07178
meta.tag.jsx entity.other.attribute-name.jsx#D8A166
meta.jsx.children.js#E6EDF3—
meta.jsx.children#E6EDF3—
entity.name.tag.styled.jsx#C17AD8
variable.other.readwrite.jsx#C792EA
storage.type.function.arrow.js#FFD580
support.function.hook.js#4DC4FF
meta.function-call.js#FFD580
keyword.operator.spread.js, keyword.operator.optional.js#FF9166
keyword.control.flow.js#FF6B6B
meta.import.js, meta.export.js#C792EA
meta.object-literal.js#B3C7D8—
variable.other.property.js#E5C07B—
support.class.promise.js#6AD4FF
support.type.object.console.js#98C379—
entity.name.tag.template.js#98C379—
punctuation.definition.interpolation.js#FFD580—
comment.block.documentation.js#98C379italic
meta.type.annotation.ts#56B6C2
support.type.primitive.ts#C17AD8—
meta.type.parameters.ts#E5C07B—
support.type.utility.ts#56B6C2—
entity.name.type.interface.ts#98C379
entity.name.type.enum.ts#61AFEF—
markup.heading, markup.bold, markup.italic, markup.quote, markup.list, markup.underline.link, markup.underline.link.markdown#FFD580—
markup.heading.1.markdown, markup.heading.2.markdown, markup.heading.3.markdown#FFD580—
markup.quote.markdown#98C379—
markup.underline.link.markdown#61AFEFunderline
markup.list.numbered.markdown#FFD580—
markup.underline.link.markdown:visited#C17AD8—
entity.other.attribute-name.svelte#FF80BF—
meta.selectionset.graphql#C17AD8—
entity.other.attribute-name.class.tailwind#98C379—
entity.other.inherited-class#98C379
meta.tag.sgml.doctype#7F8C9D—
storage.type.annotation.java#C17AD8—
entity.other.attribute-name.vue, meta.tag.astro#98C379
meta.arbitrary-value.tailwindcss#98C379—
entity.name.tag.yaml, punctuation.separator.key-value.yaml, meta.tag.table.toml#61AFEF—
entity.name.function.decorator.python, meta.function.decorator.python#C17AD8
support.type.exception.python#F44747—
string.quoted.docstring.python#98C379AA
variable.parameter.python#FF9166—
keyword.control.import.python, keyword.control.from.python, punctuation.separator.period.python#C17AD8—
meta.fstring.python, string.interpolated.python, punctuation.definition.interpolation.python#98C379—
variable.parameter.self.python#FFB454
support.function.magic.python#56B6C2
meta.function.parameters.python#B3C7D8—
storage.modifier.annotation.python#6AD4FF—
entity.name.type.annotation.python#61AFEF
meta.typehint.python#7F8C9D—
support.function.hook.js, support.function.hook.ts, support.function.hook.jsx#4DC4FFbold
keyword.directive.tailwindcss, entity.name.function.tailwindcss#6AD4FF—
support.function.vue, support.type.vue#98C379—
constant, variable.other.constant#6AD4FFbold
support.type, support.class#4DC4FF—
entity.name.type, entity.name.class#4DC4FF—