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#6B728088
  • 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#FF5555bold underline
comment#6A717Citalic
comment.annotation#FFB454italic
keyword, storage.type, storage.modifier#C17AD8
entity.name.function, support.function#FFD580
string, punctuation.definition.string#8DC48A
variable#B3C7D8
parameter#80D160
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#8AFF80
entity.name.type.class.python, variable.parameter.jupyter#4DC4FF
meta.embedded.inline.markdown#98F598
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#9ABBD6
meta.tag.void.html#FF8A7A
text.html.basic#F0F3F6
entity.other.attribute-name.class.css#FABD2F
entity.other.attribute-name.id.css#56B6C2
entity.name.tag.css#C678DD
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#7FD962
meta.declaration-id.css#F44747
entity.other.attribute-name.class.css.tailwind#FABD2F
support.type.property-name.transition.css#6AD4FF
support.class.component.jsx, meta.class.component.jsx#FF80BF
meta.tag.jsx entity.name.tag.jsx#EF7C85
meta.tag.jsx entity.other.attribute-name.jsx#D8A166
meta.jsx.children.js#E6EDF3
meta.jsx.children#E6EDF3
entity.name.tag.styled.jsx#C678DD
variable.other.readwrite.jsx#C3A6FF
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#FABD2F
support.class.promise.js#00E0FF
support.type.object.console.js#98F598
entity.name.tag.template.js#7FD962
punctuation.definition.interpolation.js#FFD580
comment.block.documentation.js#9AFF8Fitalic
meta.type.annotation.ts#56B6C2
support.type.primitive.ts#C678DD
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#6A9BEEunderline
markup.list.numbered.markdown#FFD580
markup.underline.link.markdown:visited#C17AD8
entity.other.attribute-name.svelte#FF80BF
meta.selectionset.graphql#C678DD
entity.other.attribute-name.class.tailwind#7FD962
entity.other.inherited-class#98C379
meta.tag.sgml.doctype#7F8C9D
storage.type.annotation.java#C17AD8
entity.other.attribute-name.vue, meta.tag.astro#8AFF80
meta.arbitrary-value.tailwindcss#7FD962
entity.name.tag.yaml, punctuation.separator.key-value.yaml, meta.tag.table.toml#6A9BEE
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#8DC48A
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#8AFF80
constant, variable.other.constant#6AD4FFbold
support.type, support.class#4DC4FF
entity.name.type, entity.name.class#4DC4FF