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#282828
  • activityBar.border#32302f
  • activityBar.dropBackground#282828
  • activityBar.foreground#dfbf8e
  • activityBarBadge.background#458588
  • activityBarBadge.foreground#dfbf8e
  • badge.background#d3869b
  • badge.foreground#282828
  • button.background#45858880
  • button.foreground#dfbf8e
  • button.hoverBackground#45858860
  • debugToolBar.background#282828
  • diffEditor.insertedTextBackground#8b955330
  • diffEditor.insertedTextBorder#a8a81c00
  • diffEditor.removedTextBackground#d75f5f30
  • diffEditor.removedTextBorder#d75f5f00
  • dropdown.background#282828
  • dropdown.border#32302f
  • dropdown.foreground#dfbf8e
  • editor.background#282828
  • editor.findMatchBackground#83a59870
  • editor.findMatchHighlightBackground#e78a4e30
  • editor.findRangeHighlightBackground#83a59870
  • editor.foreground#dfbf8e
  • editor.hoverHighlightBackground#689d6a50
  • editor.lineHighlightBackground#32302f60
  • editor.lineHighlightBorder#32302f00
  • editor.selectionBackground#689d6a20
  • editor.selectionHighlightBackground#cea64a40
  • editorBracketHighlight.foreground1#dfbf8e
  • editorBracketHighlight.foreground2#d3869b
  • editorBracketHighlight.foreground3#d69617
  • editorBracketMatch.background#92837480
  • editorBracketMatch.border#28282800
  • editorCodeLens.foreground#a8998490
  • editorCursor.foreground#dfbf8e
  • editorError.foreground#d75f5f
  • editorGroup.border#32302f
  • editorGroup.dropBackground#32302f60
  • editorGroupHeader.noTabsBackground#32302f
  • editorGroupHeader.tabsBackground#282828
  • editorGroupHeader.tabsBorder#32302f
  • editorGutter.addedBackground#8b9553
  • editorGutter.background#28282800
  • editorGutter.deletedBackground#d75f5f
  • editorGutter.modifiedBackground#83a598
  • editorHoverWidget.background#32302f
  • editorHoverWidget.border#504945
  • editorIndentGuide.activeBackground#a8998450
  • editorIndentGuide.background#a8998420
  • editorInfo.foreground#458588
  • editorLineNumber.foreground#504945
  • editorLink.activeForeground#dfbf8e
  • editorMarkerNavigation.background#32302f
  • editorOverviewRuler.addedForeground#83a598
  • editorOverviewRuler.border#28282800
  • editorOverviewRuler.commonContentForeground#928374
  • editorOverviewRuler.currentContentForeground#458588
  • editorOverviewRuler.deletedForeground#83a598
  • editorOverviewRuler.errorForeground#d75f5f
  • editorOverviewRuler.findMatchForeground#bdae93
  • editorOverviewRuler.incomingContentForeground#689d6a
  • editorOverviewRuler.infoForeground#d3869b
  • editorOverviewRuler.modifiedForeground#83a598
  • editorOverviewRuler.rangeHighlightForeground#bdae93
  • editorOverviewRuler.selectionHighlightForeground#504945
  • editorOverviewRuler.warningForeground#d69617
  • editorOverviewRuler.wordHighlightForeground#504945
  • editorOverviewRuler.wordHighlightStrongForeground#504945
  • editorRuler.foreground#a8998440
  • editorSuggestWidget.background#32302f
  • editorSuggestWidget.border#504945
  • editorSuggestWidget.foreground#dfbf8e
  • editorSuggestWidget.highlightForeground#689d6a
  • editorSuggestWidget.selectedBackground#3c3836
  • editorWarning.foreground#d69617
  • editorWhitespace.foreground#a8998420
  • editorWidget.background#32302f
  • editorWidget.border#504945
  • errorForeground#d75f5f
  • extensionButton.prominentBackground#8b955380
  • extensionButton.prominentHoverBackground#8b955330
  • focusBorder#32302f
  • foreground#dfbf8e
  • gitDecoration.conflictingResourceForeground#b16286
  • gitDecoration.deletedResourceForeground#d75f5f
  • gitDecoration.ignoredResourceForeground#7c6f64
  • gitDecoration.modifiedResourceForeground#d69617
  • gitDecoration.untrackedResourceForeground#a8a81c
  • icon.foreground#87af87
  • input.background#dfbf8e05
  • input.border#32302f
  • input.foreground#dfbf8e
  • input.placeholderForeground#dfbf8e60
  • inputValidation.errorBackground#d75f5f80
  • inputValidation.errorBorder#d75f5f
  • inputValidation.infoBackground#45858880
  • inputValidation.infoBorder#83a598
  • inputValidation.warningBackground#d6961780
  • inputValidation.warningBorder#cea64a
  • list.activeSelectionBackground#3c3836
  • list.activeSelectionForeground#87af87
  • list.dropBackground#32302f
  • list.focusForeground#dfbf8e
  • list.highlightForeground#689d6a
  • list.hoverBackground#3c3836
  • list.hoverForeground#d5c4a1
  • list.inactiveSelectionBackground#3c3836
  • list.inactiveSelectionForeground#689d6a
  • merge.border#28282800
  • merge.currentContentBackground#45858820
  • merge.currentHeaderBackground#45858840
  • merge.incomingContentBackground#689d6a20
  • merge.incomingHeaderBackground#689d6a40
  • minimap.selectionHighlight#cea64a40
  • panel.border#32302f
  • panelTitle.activeForeground#dfbf8e
  • peekView.border#83a598
  • peekViewEditor.background#32302f
  • peekViewEditor.matchHighlightBackground#83a59830
  • peekViewEditorGutter.background#32302f
  • peekViewResult.background#32302f90
  • peekViewResult.fileForeground#dfbf8e
  • peekViewResult.lineForeground#dfbf8e
  • peekViewResult.matchHighlightBackground#87af8730
  • peekViewResult.selectionBackground#83a59830
  • peekViewResult.selectionForeground#87af87
  • peekViewTitle.background#32302f
  • peekViewTitleDescription.foreground#bdae93
  • peekViewTitleLabel.foreground#dfbf8e
  • progressBar.background#689d6a
  • scrollbar.shadow#1d2021
  • scrollbarSlider.activeBackground#689d6a
  • scrollbarSlider.background#504945
  • scrollbarSlider.hoverBackground#665c54
  • selection.background#689d6a80
  • sideBar.background#282828
  • sideBar.border#32302f
  • sideBar.foreground#d5c4a1
  • sideBarSectionHeader.background#28282800
  • sideBarSectionHeader.foreground#dfbf8e
  • sideBarTitle.foreground#dfbf8e
  • statusBar.background#282828
  • statusBar.border#32302f
  • statusBar.debuggingBackground#e78a4e
  • statusBar.debuggingBorder#28282800
  • statusBar.debuggingForeground#282828
  • statusBar.foreground#dfbf8e
  • statusBar.noFolderBackground#282828
  • statusBar.noFolderBorder#28282800
  • tab.activeBackground#32302f
  • tab.activeBorder#689d6a
  • tab.activeForeground#dfbf8e
  • tab.border#32302f
  • tab.inactiveBackground#282828
  • tab.inactiveForeground#a89984
  • tab.unfocusedActiveBorder#28282800
  • tab.unfocusedActiveForeground#a89984
  • tab.unfocusedInactiveForeground#928374
  • terminal.ansiBlack#32302f
  • terminal.ansiBlue#458588
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#83a598
  • terminal.ansiBrightCyan#87af87
  • terminal.ansiBrightGreen#8b9553
  • terminal.ansiBrightMagenta#d3869b
  • terminal.ansiBrightRed#d75f5f
  • terminal.ansiBrightWhite#dfbf8e
  • terminal.ansiBrightYellow#cea64a
  • terminal.ansiCyan#689d6a
  • terminal.ansiGreen#a8a81c
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#d75f5f
  • terminal.ansiWhite#a89984
  • terminal.ansiYellow#d69617
  • terminal.background#282828
  • terminal.foreground#dfbf8e
  • textLink.activeForeground#458588
  • textLink.foreground#83a598
  • titleBar.activeBackground#282828
  • titleBar.activeForeground#dfbf8e
  • titleBar.inactiveBackground#282828
  • widget.shadow#1d2021

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant, support.constant, variable.arguments, variable.language, constant.numeric, constant.language.boolean, variable.this, variable.language.this, support.variable, prototype, variable.parameter.function.language.special.self.python, markup.underline.link, variable.scss, source.sass variable.other, source.sass variable.other, punctuation.definition.constant.ruby#d3869b—
constant.rgb-value, meta.embedded, object, keyword.operator, meta.parameter.type.variable, variable.name, variable, variable.other.readwrite, entity.name.variable, string.constant.other.placeholder, variable.other, punctuation.separator, punctuation.quoted, source.css support.constant, source.css keyword.other.unit, source.css constant, constant.numeric.css, source.sass keyword.control.unit, support.constant.property-value.css.sass, source.css meta.selector, constant.language.empty-list.haskell, source.js variable.other.constant, source.ts variable.other.constant, source.tsx variable.other.constant, source.js.jsx variable.other.constant, keyword.operator.ruby, keyword.operator.assignment.ruby, keyword.operator.comparison.ruby, keyword.operator.arithmetic.ruby, keyword.operator.assignment.augmented.ruby, keyword.operator.other.ruby, meta.function-call.ruby entity.name.function.ruby, comment.line.parameter.yard.ruby, storage.modifier.package, storage.modifier.import, entity.name.type.namespace.cs, constant.character, constant.escape, text.html.markdown, entity.name.type.package.go, punctuation.definition.attribute.rust, entity.name.namespace, support.function, variable.parameter, entity.name.type.namespace#dfbf8e—
entity.other.attribute-name, entity.other.inherited-class.python, support.function.C99, meta.scope.prerequisites, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, punctuation.definition.entity.css, entity.other.attribute-name.class, entity.other.attribute-selector.sass, entity.other.inherited-class.js, entity.other.inherited-class.ts, entity.other.inherited-class.js.jsx, entity.other.inherited-class.tsx, source.js variable.language, source.ts variable.language, source.js.jsx variable.language, source.tsx variable.language#cea64a—
entity.name.tag, punctuation.tag, meta.preprocessor, meta.header.diff, string.regexp, metatag.php, punctuation.definition.logical-expression, string.inperpolated.dollar.shell, markup.changed, source.json meta.structure.dictionary.json support.type.property-name.json, source.haskell keyword.operator#e78a4e—
invalid, invalid.illegal, storage, storage.modifier, string.escape, keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, punctuation.quasi, meta.at-rule.media.header.css keyword.control.at-rule.media.css, meta.at-rule.media.header.css punctuation.definition.keyword.css, meta.at-rule.supports.header.css keyword.control.at-rule.supports.css, meta.at-rule.supports.header.css punctuation.definition.keyword.css, meta.at-rule.document.header.css keyword.control.at-rule.document.css, meta.at-rule.document.header.css punctuation.definition.keyword.css, meta.at-rule.each.scss punctuation.definition.keyword.scss, meta.at-rule.if.scss punctuation.definition.keyword.scss, meta.at-rule.else.scss punctuation.definition.keyword.scss, punctuation.definition.keyword.scss, keyword.control.at-rule.css.sass, source.js storage.type, source.ts storage.type, source.js.jsx storage.type, source.tsx storage.type, storage.type.class.jsdoc, meta.block.begin.ruby > keyword.control.rescue.ruby, meta.block.begin.ruby > keyword.control.ensure.ruby, meta.block.do.ruby > keyword.control.rescue.ruby, meta.block.do.ruby > keyword.control.ensure.ruby, storage.type.rust, source.cs storage.type, storage.type.class.cs, storage.type.template, storage.type.modifier.access, meta.export.js keyword.control.from.js, meta.export.ts keyword.control.from.ts, meta.export.js.jsx keyword.control.from.js.jsx, meta.export.tsx keyword.control.from.tsx, storage.type.namespace, storage.type.struct, storage.type.enum, storage.type.extern#d75f5f—
entity.name.selector, meta.selector, string.quasi, storage.type.function, entity.function, entity.name.function.static, entity.name.function.function-call, storage.type.class, punctuation.definition.directive.c, storage.modifier.declaration, keyword.control.import.python, string.interpolated.dollar.shell, string.interpolated.backtick.shell, keyword.control.directive, markup.inline.raw, markup.fenced_code.block, punctuation.definition.keyword.css, meta.at-rule.import.scss punctuation.definition.keyword.scss, meta.at-rule.include.scss punctuation.definition.keyword.scss, meta.at-rule.mixin.scss punctuation.definition.keyword.scss, meta.at-rule.function.scss punctuation.definition.keyword.scss, meta.at-rule.use.scss punctuation.definition.keyword.scss, meta.at-rule.forward.scss punctuation.definition.keyword.scss, meta.at-rule.extend.scss punctuation.definition.keyword.scss, meta.at-rule.use.scss punctuation.definition.keyword.scss, meta.at-rule.at-root.scss punctuation.definition.keyword.scss, source.css keyword.control.at-rule, source.scss keyword.control.at-rule, punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, support.function.interpolation.sass, keyword.control.import.js, keyword.control.from.js, keyword.control.import.js.jsx, keyword.control.from.js.jsx, keyword.control.import.ts, keyword.control.from.ts, keyword.control.import.tsx, keyword.control.from.tsx, storage.type.interface.ts, storage.type.interface.tsx, keyword.control.as.js, keyword.control.as.js.jsx, meta.import.ts keyword.control.as.ts, meta.import.tsx keyword.control.as.tsx, keyword.control.class.begin.ruby, keyword.control.class.end.ruby, keyword.control.module.begin.ruby, keyword.control.module.end.ruby, keyword.control.def.begin.ruby, keyword.control.def.end.ruby, meta.function.method keyword.control.rescue.ruby, meta.function.method keyword.control.ensure.ruby, punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby, keyword.declaration.class.begin.rbs, keyword.declaration.class.end.rbs, keyword.declaration.module.begin.rbs, keyword.declaration.module.end.rbs, keyword.declaration.interface.begin.rbs, keyword.declaration.interface.end.rbs, keyword.control.def.rbs, keyword.hard.class.kotlin, keyword.package, keyword.import, keyword.control.import, keyword.other.fn.rust, meta.import.ts keyword.control.default.ts, meta.import.js keyword.control.default.js, meta.import.tsx keyword.control.default.tsx, meta.import.js.jsx keyword.control.default.js.jsx#87af87—
meta.preprocessor.string, meta.preprocessor.numeric, string, string.tag, string.value, string.entity, keyword.other.unit, constant.sha.git-rebase, punctuation.definition.string, markup.inserted, string.quoted.double.json, source.css string, source.css punctuation.definition.string, meta.attribute-selector.scss#8b9553—
module.node, variable.other.object.property, variable.other.readwrite.instance, variable.other.readwrite.class, variable.other.readwrite.global, variable.other.property, variable.other.constant.property, variable.other.enummember, meta.object-literal.key, source.python support.variable, markup.punctuation.list.beginning, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, support.type.property-name, constant.other.haskell, keyword.control.cucumber.table, punctuation.definition.variable.ruby, variable.other.block.ruby, entity.name.variable.property, meta.function.decorator.python support.type.python, entity.name.function.decorator, punctuation.definition.decorator.python, storage.type.annotation.java, punctuation.definition.annotation, punctuation.decorator, meta.decorator.ts entity.name.function.ts, meta.decorator.ts variable.other.readwrite.ts, meta.decorator.tsx entity.name.function.tsx, meta.decorator.tsx variable.other.readwrite.tsx#83a598—
support.function.git-rebase#689d6a—
keyword.control.less, meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, support.class, storage.type, variable.class, variable.other.constant, entity.static, entity.name.class.static.function, entity.name.class, entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, constant.other.caps.python, storage.type.haskell, entity.other.inherited-class.haskell, source.js support.constant, source.ts support.constant, source.js.jsx support.constant, source.tsx support.constant, entity.name.type.module.ruby, entity.other.inherited-class, source.cs keyword.type, keyword.other.type#d69617—
entity.name.function, support.function.magic, markup.punctuation.quote.beginning, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, meta.attribute.rust, entity.name.method, entity.name.function.member, entity.name.function.preprocessor, support.function.url.css, support.function.misc.scss, support.function.constructor#a8a81c—
comment, punctuation.definition.comment, punctuation.definition.tag, comment.block.documentation punctuation.definition.bracket, source.ocaml comment constant.regexp meta.separator, markup.other.anchor support.constant, markup.fenced_code, markup.fenced_code punctuation.definition, punctuation.definition.heading, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.strikethrough.markdown#928374italic
markup.deleted, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#d65d0e—
*url*, *link*, *uri*, markup.underline—underline
markup.bold, markup.heading#e78a4ebold
emphasis, markup.italic—italic
comment.line.string.yard.ruby, comment.line.punctuation.yard.ruby#dfbf8ecc—
comment.line.type.yard.ruby, entity.name.type.instance.jsdoc#d69617aa—
comment.line.parameter.yard.ruby, variable.other.jsdoc#dfbf8e—
comment.line.hashkey.yard.ruby#d3869baa—
comment.line.defaultvalue.yard.ruby#8b9553aa—
comment.line.keyword.yard.ruby, comment.line.keyword.punctuation.yard.ruby, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#d75f5f88—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...