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#C06D2A
  • activityBar.background#F0EEE6
  • activityBar.dropBorder#C06D2A55
  • activityBar.foreground#C06D2A
  • activityBar.inactiveForeground#A8A59A
  • activityBarBadge.background#9D4EA6
  • activityBarBadge.foreground#F5F3E7
  • breadcrumb.background#E8E5D8
  • breadcrumb.focusForeground#C06D2A
  • button.background#D67F2E80
  • button.border#D67F2E33
  • button.foreground#2A3038
  • button.hoverBackground#D67F2E99
  • checkbox.background#E0DDD0
  • checkbox.border#B8B5A8
  • debugIcon.startForeground#87B26A
  • debugToolBar.background#E0DDD0
  • diffEditor.insertedLineBackground#87B26A15
  • diffEditor.insertedTextBackground#87B26A25
  • diffEditor.removedLineBackground#D3424215
  • diffEditor.removedTextBackground#D3424225
  • disabledForeground#908C82AA
  • dropdown.background#E8E5D8F2
  • dropdown.border#DCD9CC
  • dropdown.foreground#3E444D
  • dropdown.listBackground#E0DDD0F2
  • editor.background#F8F7F2
  • editor.findMatchBackground#E1B28588
  • editor.findMatchBorder#D67F2E99
  • editor.findMatchHighlightBackground#A3C1D955
  • editor.findMatchHighlightBorder#A3C1D988
  • editor.foreground#2A3038
  • editor.inactiveSelectionBackground#A3C1D933
  • editor.lineHighlightBackground#F0EEE6DD
  • editor.lineHighlightBorder#E8E5D888
  • editor.linkedEditingBackground#D67F2E15
  • editor.rangeHighlightBackground#A3C1D922
  • editor.selectionBackground#A3C1D9AA
  • editor.selectionHighlightBackground#D67F2E20
  • editor.selectionHighlightBorder#D67F2E40
  • editor.snippetFinalTabstopHighlightBorder#87B26A
  • editor.snippetTabstopHighlightBackground#A3C1D933
  • editor.wordHighlightBackground#D67F2E18
  • editor.wordHighlightBorder#D67F2E40
  • editor.wordHighlightStrongBackground#D67F2E28
  • editorBracketHighlight.foreground1#C06D2A
  • editorBracketHighlight.foreground2#87B26A
  • editorBracketHighlight.foreground3#B06AB8
  • editorBracketHighlight.foreground4#4E9DA8
  • editorBracketHighlight.foreground5#B18E50
  • editorBracketHighlight.foreground6#9D4EA6
  • editorBracketHighlight.unexpectedBracket.foreground#C15252
  • editorBracketMatch.background#D4E4F199
  • editorBracketMatch.border#A3C1D966
  • editorCursor.background#F8F7F2
  • editorCursor.foreground#C06D2A
  • editorError.foreground#C15252
  • editorGhostText.foreground#B8B5A8AA
  • editorGroup.border#DCD9CC
  • editorGroup.dropBackground#A3C1D933
  • editorGroup.emptyBackground#F8F7F2
  • editorGroupHeader.tabsBackground#F0EEE6
  • editorGroupHeader.tabsBorder#E4E2DA
  • editorGutter.addedBackground#87B26ACC
  • editorGutter.background#F8F7F200
  • editorGutter.deletedBackground#C15252CC
  • editorGutter.modifiedBackground#C06D2ACC
  • editorHint.foreground#87B26A
  • editorIndentGuide.activeBackground#D8D6CABB
  • editorIndentGuide.background#D8D6CA33
  • editorInfo.foreground#4E9DA8
  • editorLineNumber.activeForeground#C06D2A
  • editorLineNumber.foreground#9D9A9088
  • editorUnnecessaryCode.opacity#B8B5A855
  • editorWarning.foreground#B18E50
  • editorWhitespace.foreground#C7C5BAAA
  • editorWidget.background#E8E5D8F2
  • editorWidget.border#DCD9CC
  • editorWidget.resizeBorder#C06D2A40
  • focusBorder#C06D2A80
  • focusBorder.active#C06D2A
  • gitDecoration.addedResourceForeground#87B26A
  • gitDecoration.conflictingResourceForeground#B06AB8
  • gitDecoration.ignoredResourceForeground#B8B5A8CC
  • gitDecoration.modifiedResourceForeground#D67F2E
  • gitDecoration.submoduleResourceForeground#A8A59A
  • gitDecoration.untrackedResourceForeground#6AC4D4
  • input.background#E0DDD0
  • input.border#DCD9CC
  • input.foreground#7A6C54
  • input.placeholderForeground#908C82
  • inputOption.activeBackground#C06D2A20
  • inputOption.activeBorder#C06D2A
  • list.activeSelectionBackground#C8D8E8AA
  • list.activeSelectionForeground#D67F2E
  • list.focusBackground#A3C1D966
  • list.focusForeground#D67F2E
  • list.highlightForeground#C06D2A
  • list.hoverBackground#D4E4F155
  • list.hoverForeground#D67F2E
  • list.inactiveSelectionBackground#A3C1D933
  • list.inactiveSelectionForeground#D67F2E99
  • menu.background#E8E5D8F2
  • menu.foreground#3E444D
  • menu.selectionBackground#A3C1D980
  • menu.selectionBorder#C06D2A40
  • menu.selectionForeground#D67F2E
  • menubar.selectionBackground#A3C1D9B3
  • menubar.selectionForeground#D67F2E
  • merge.commonContentBackground#A3C1D922
  • merge.commonHeaderBackground#A3C1D944
  • merge.currentHeaderBackground#A3C1D933
  • merge.incomingHeaderBackground#87B26A33
  • minimap.background#F8F7F200
  • minimap.errorHighlight#D34242AA
  • minimap.selectionHighlight#A3C1D966
  • minimap.warningHighlight#C7A45CAA
  • minimapGutter.addedBackground#87B26A66
  • minimapGutter.deletedBackground#D3424266
  • minimapGutter.modifiedBackground#D67F2E66
  • minimapSlider.activeBackground#D67F2E66
  • minimapSlider.background#C7C4B833
  • minimapSlider.hoverBackground#D67F2E44
  • notebook.cellBorderColor#DCD9CC
  • notebook.cellStatusBarItemHoverBackground#A3C1D955
  • notebook.focusedCellBorder#A3C1D9
  • notebook.focusedEditorBorder#C06D2A40
  • notificationToast.border#A3C1D9
  • panel.border#DCD9CC
  • panelSection.dropBackground#A3C1D933
  • panelSectionHeader.background#E0DDD0
  • panelSectionHeader.border#DCD9CC
  • panelSectionHeader.foreground#C06D2A
  • panelTitle.activeBorder#C06D2A
  • panelTitle.activeForeground#C06D2A
  • panelTitle.inactiveForeground#A8A59A
  • peekView.border#A3C1D9
  • peekViewEditor.background#E8E5D8
  • peekViewResult.background#F0EEE6
  • peekViewTitle.background#E8E5D8
  • quickInput.background#F4F3ECF2
  • quickInput.foreground#7A6C54
  • quickInputList.focusBackground#A3C1D980
  • quickInputList.focusForeground#7A6C54
  • scrollbarSlider.activeBackground#D67F2EAA
  • scrollbarSlider.background#C7C4B844
  • scrollbarSlider.hoverBackground#D67F2E80
  • settings.dropdownBackground#E0DDD0
  • settings.dropdownBorder#DCD9CC
  • settings.headerForeground#D67F2E
  • settings.modifiedItemIndicator#A3C1D9
  • settings.numberInputBackground#E0DDD0
  • settings.numberInputBorder#DCD9CC
  • settings.textInputBackground#E0DDD0
  • settings.textInputBorder#DCD9CC
  • sideBar.background#F0EEE6F0
  • sideBar.border#DCD9CC
  • sideBar.dropBackground#DCD9CC88
  • sideBar.foreground#363D46
  • sideBarSectionHeader.background#D4D1C5
  • sideBarSectionHeader.border#DCD9CC
  • sideBarSectionHeader.foreground#C06D2A
  • sideBarTitle.foreground#C06D2A
  • statusBar.background#E0DDD0
  • statusBar.border#DCD9CC
  • statusBar.debuggingBackground#B18E50
  • statusBar.debuggingForeground#2A3038
  • statusBar.foreground#3A7595
  • statusBar.noFolderBackground#E8E5D8
  • statusBarItem.activeBackground#A3C1D966
  • statusBarItem.hoverBackground#A3C1D933
  • statusBarItem.prominentBackground#C06D2A20
  • statusBarItem.prominentHoverBackground#C06D2A33
  • symbolIcon.arrayForeground#D67F2E
  • symbolIcon.classForeground#4D9CB8
  • symbolIcon.colorForeground#B18E50
  • tab.activeBackground#F8F7F2
  • tab.activeBorder#C06D2A
  • tab.activeBorderTop#C06D2A
  • tab.activeForeground#C06D2A
  • tab.hoverBackground#F4F3EC
  • tab.hoverForeground#C06D2A
  • tab.inactiveBackground#F0EEE6
  • tab.inactiveForeground#A8A59A
  • tab.unfocusedActiveBorder#C06D2A40
  • tab.unfocusedHoverBackground#F0EEE6
  • terminal.ansiBlack#E3E0D4
  • terminal.ansiBlue#7BA5C5
  • terminal.ansiBrightBlack#C7C4B8
  • terminal.ansiBrightBlue#9AC6F0
  • terminal.ansiBrightCyan#6AC4D4
  • terminal.ansiBrightGreen#8ED180
  • terminal.ansiBrightMagenta#B86AC8
  • terminal.ansiBrightRed#E56A6A
  • terminal.ansiBrightWhite#2A3038
  • terminal.ansiBrightYellow#D6A040
  • terminal.ansiCyan#4E9DA8
  • terminal.ansiGreen#5A8C52
  • terminal.ansiMagenta#B06AB8
  • terminal.ansiRed#C15252
  • terminal.ansiWhite#363D46
  • terminal.ansiYellow#B18E50
  • terminal.background#F8F7F2
  • terminal.border#DCD9CC
  • terminal.dropBackground#A3C1D933
  • terminal.foreground#2A3038
  • terminal.hoverBackground#F0EEE6
  • terminal.inactiveSelectionBackground#A3C1D933
  • terminal.selectionBackground#A3C1D966
  • terminal.selectionForeground#2A3038
  • terminal.tab.activeBorder#C06D2A
  • terminalCommandDecoration.defaultBackground#7BA5C5
  • terminalCommandDecoration.errorBackground#C15252
  • terminalCommandDecoration.successBackground#87B26A
  • terminalCursor.background#F8F7F2
  • terminalCursor.foreground#C06D2A
  • titleBar.activeBackground#E0DDD0
  • titleBar.activeForeground#D67F2E
  • titleBar.border#DCD9CC
  • titleBar.inactiveBackground#E8E5D8
  • titleBar.inactiveForeground#A8A59A
  • toolbar.activeBackground#A3C1D980
  • toolbar.hoverBackground#A3C1D955
  • toolbar.hoverOutline#C06D2A40
  • vedicLight.accentAir#5A8C52
  • vedicLight.accentEarth#B18E50
  • vedicLight.accentFire#C15252
  • vedicLight.accentWater#5A9DA9
  • vedicLight.glow#C06D2A20
  • vedicLight.highlight#F5F3E7
  • vedicLight.primary#C06D2A
  • vedicLight.secondary#7BA5C5
  • vedicLight.shadow#E0DDD0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#C15252bold underline
comment#7A766Citalic
comment.annotation#C76A28italic
keyword, storage.type, storage.modifier#9D4EA6
entity.name.function, support.function#B78A4A
string, punctuation.definition.string#6F8F5E
variable#4A6378
parameter#6F8F5E
variable.parameter#C76A28
keyword.control.flow.async#C74C4C
invalid.deprecated#C74C4Cstrikethrough
storage.modifier.lifetime.rust, keyword.operator.arrow.cpp#6F8F5E
meta.type.annotation.python, support.type.python#3E7D9D
keyword.operator.channel.go#C76A28
meta.type.parameters.ts#C76A28
entity.name.tag.custom, entity.name.tag.svelte, entity.name.tag.astro#6F8F5E
entity.name.type.class.python, variable.parameter.jupyter#3E7D9D
meta.embedded.inline.markdown#6F8F5E
markup.inline.raw.markdown#6F8F5E
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#C74C4C
meta.tag.structure.any.html entity.name.tag.html#C74C4C
entity.other.attribute-name.html#B78A4A
entity.other.attribute-name.data.html#3E7D9D
punctuation.definition.tag.html#908C82
string.quoted.double.html#6F8F5E
meta.tag.void.html#D0676A
text.html.basic#4A5560
entity.other.attribute-name.class.css#B78A4A
entity.other.attribute-name.id.css#3E7D9D
entity.name.tag.css#9D4EA6
support.type.property-name.css#3E7D9D
support.type.vendored.property-name.css#908C82
entity.name.type#3E7D9D
meta.attribute-selector.css#C76A28
storage.type.generic.java#9D4EA6
meta.property-value.css#B78A4A
meta.property-value.numeric.css#B78A4A
entity.other.attribute-name.pseudo-class.css#9D4EA6
entity.other.attribute-name.pseudo-element.css#C74C4C
meta.at-rule.media.css#C76A28
meta.property-list.css meta.property-name#3E7D9D
support.type.property-name.animation.css#D0676A
meta.function.css#6F8F5E
meta.declaration-id.css#C74C4C
entity.other.attribute-name.class.css.tailwind#B78A4A
support.type.property-name.transition.css#3E7D9D
support.class.component.jsx, meta.class.component.jsx#D0676A
meta.tag.jsx entity.name.tag.jsx#C74C4C
meta.tag.jsx entity.other.attribute-name.jsx#B78A4A
meta.jsx.children.js#4A5560
meta.jsx.children#4A5560
entity.name.tag.styled.jsx#9D4EA6
variable.other.readwrite.jsx#9D4EA6
storage.type.function.arrow.js#B78A4A
support.function.hook.js#3E7D9D
meta.function-call.js#B78A4A
keyword.operator.spread.js, keyword.operator.optional.js#C76A28
keyword.control.flow.js#C74C4C
meta.import.js, meta.export.js#9D4EA6
meta.object-literal.js#4A6378
variable.other.property.js#B78A4A
support.class.promise.js#3E7D9D
support.type.object.console.js#6F8F5E
entity.name.tag.template.js#6F8F5E
punctuation.definition.interpolation.js#B78A4A
comment.block.documentation.js#6F8F5Eitalic
meta.type.annotation.ts#3E7D9D
support.type.primitive.ts#9D4EA6
meta.type.parameters.ts#B78A4A
support.type.utility.ts#3E7D9D
entity.name.type.interface.ts#6F8F5E
entity.name.type.enum.ts#3E7D9D
markup.heading, markup.bold, markup.italic, markup.quote, markup.list, markup.underline.link, markup.underline.link.markdown#C76A28
markup.heading.1.markdown, markup.heading.2.markdown, markup.heading.3.markdown#C76A28
markup.quote.markdown#6F8F5E
markup.underline.link.markdown#3E7D9Dunderline
markup.list.numbered.markdown#C76A28
markup.underline.link.markdown:visited#9D4EA6
entity.other.attribute-name.svelte#D0676A
meta.selectionset.graphql#9D4EA6
entity.other.attribute-name.class.tailwind#6F8F5E
entity.other.inherited-class#6F8F5E
meta.tag.sgml.doctype#908C82
storage.type.annotation.java#9D4EA6
entity.other.attribute-name.vue, meta.tag.astro#6F8F5E
meta.arbitrary-value.tailwindcss#6F8F5E
entity.name.tag.yaml, punctuation.separator.key-value.yaml, meta.tag.table.toml#3E7D9D
entity.name.function.decorator.python, meta.function.decorator.python#9D4EA6
support.type.exception.python#C74C4C
string.quoted.docstring.python#6F8F5EAA
variable.parameter.python#C76A28
keyword.control.import.python, keyword.control.from.python, punctuation.separator.period.python#9D4EA6
meta.fstring.python, string.interpolated.python, punctuation.definition.interpolation.python#6F8F5E
variable.parameter.self.python#B06AB8
support.function.magic.python#3E7D9D
meta.function.parameters.python#4A6378
storage.modifier.annotation.python#3E7D9D
entity.name.type.annotation.python#3E7D9D
meta.typehint.python#908C82
support.function.hook.js, support.function.hook.ts, support.function.hook.jsx#3E7D9Dbold
keyword.directive.tailwindcss, entity.name.function.tailwindcss#4E9DA8
support.function.vue, support.type.vue#6F8F5E
constant, variable.other.constant#4E9DA8bold
support.type, support.class#4A8CA9
entity.name.type, entity.name.class#4A8CA9