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.activeBackground#00000000
  • activityBar.background#FDFAE4
  • activityBar.border#00000000
  • activityBar.foreground#CFC5B3
  • activityBar.inactiveForeground#CFC5B3
  • activityBarBadge.background#39A960
  • activityBarBadge.foreground#FDFAE4
  • badge.background#39A960
  • badge.foreground#FDFAE4
  • breadcrumb.background#FDF6E3
  • breadcrumb.focusForeground#394956
  • breadcrumb.foreground#394956
  • button.background#39A960
  • button.foreground#FDFAE4
  • button.hoverBackground#318A50
  • button.secondaryBackground#5F6A79
  • button.secondaryForeground#FDFAE4
  • button.secondaryHoverBackground#394956
  • debugToolBar.background#F7EDD2
  • debugToolBar.border#00000000
  • diffEditor.border#EAD9B9
  • diffEditor.insertedTextBackground#39A96050
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#F0743A
  • diffEditor.removedTextBorder#00000000
  • editor.background#FDF6E3
  • editor.findMatchBackground#F9C74FAF
  • editor.findMatchBorder#00000000
  • editor.findMatchHighlightBackground#00000000
  • editor.findMatchHighlightBorder#F9C74FAF
  • editor.findRangeHighlightBackground#EAD9B9
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#ADD6FF4D
  • editor.foreground#88734c
  • editor.hoverHighlightBackground#ADD6FF4D
  • editor.inactiveSelectionBackground#F7EDD2
  • editor.lineHighlightBackground#00000000
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#00000000
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#EAD9B9
  • editor.selectionHighlightBackground#F9C74FAF
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#EAD9B9
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#ADD6FF4D
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#F9C74F
  • editorCodeLens.foreground#CBBA9A
  • editorCursor.background#FDF6E3
  • editorCursor.foreground#39A960
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#F0743A
  • editorGroup.border#CBBA9A
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#FDFAE4
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#39A960
  • editorGutter.background#FDF6E3
  • editorGutter.deletedBackground#F0743A
  • editorGutter.foldingControlForeground#CBBA9A
  • editorGutter.modifiedBackground#0B7974
  • editorHoverWidget.background#F7EDD2
  • editorHoverWidget.border#00000000
  • editorHoverWidget.foreground#394956
  • editorIndentGuide.activeBackground#CBBA9A
  • editorIndentGuide.background#EAD9B9
  • editorInfo.background#00000000
  • editorInfo.border#00000000
  • editorInfo.foreground#0B7974
  • editorLineNumber.activeForeground#394956
  • editorLineNumber.foreground#EAD9B9
  • editorLink.activeForeground#0B7974
  • editorMarkerNavigation.background#FDF6E3
  • editorMarkerNavigationError.background#F0743A
  • editorMarkerNavigationInfo.background#0B7974
  • editorMarkerNavigationWarning.background#F9C74F
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#00000000
  • editorRuler.foreground#CBBA9A
  • editorSuggestWidget.background#F7EDD2
  • editorSuggestWidget.border#00000000
  • editorSuggestWidget.foreground#394956
  • editorSuggestWidget.highlightForeground#39A960
  • editorSuggestWidget.selectedBackground#EAD9B9
  • editorWarning.background#00000000
  • editorWarning.border#00000000
  • editorWarning.foreground#F9C74F
  • editorWhitespace.foreground#00000000
  • editorWidget.background#FDF6E3
  • editorWidget.foreground#394956
  • editorWidget.resizeBorder#CBBA9A
  • focusBorder#00000000
  • foreground#394956
  • gitDecoration.addedResourceForeground#39A960
  • gitDecoration.conflictingResourceForeground#0B7974
  • gitDecoration.deletedResourceForeground#F0743A
  • gitDecoration.ignoredResourceForeground#394960
  • gitDecoration.modifiedResourceForeground#F9C74F
  • gitDecoration.stageDeletedResourceForeground#F0743A
  • gitDecoration.stageModifiedResourceForeground#F9C74F
  • gitDecoration.submoduleResourceForeground#0B7974
  • gitDecoration.untrackedResourceForeground#39A960
  • input.background#F7EDD2
  • input.border#00000000
  • input.foreground#394956
  • input.placeholderForeground#394956
  • inputOption.activeBackground#EAD9B9
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#394956
  • list.activeSelectionBackground#FFC658
  • list.activeSelectionForeground#394956
  • list.dropBackground#EAD9B9
  • list.focusBackground#00000000
  • list.focusForeground#394956
  • list.highlightForeground#39A960
  • list.hoverBackground#EAD9B9
  • list.hoverForeground#394956
  • list.inactiveSelectionBackground#F7EDD2
  • list.inactiveSelectionForeground#394956
  • listFilterWidget.background#F9E7C5
  • listFilterWidget.noMatchesOutline#F0743A
  • listFilterWidget.outline#00000000
  • menu.background#FDFAE4
  • menu.border#EAD9B9
  • menu.foreground#394956
  • menu.selectionBackground#EAD9B9
  • menu.selectionBorder#00000000
  • menu.selectionForeground#394956
  • menu.separatorBackground#EAD9B9
  • menubar.selectionBackground#00000000
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#394956
  • notificationCenter.border#00000000
  • notificationCenterHeader.background#EAD9B9
  • notificationCenterHeader.foreground#394956
  • notifications.background#FDF6E3
  • notifications.border#00000000
  • notifications.foreground#394956
  • notificationsErrorIcon.foreground#F0743A
  • notificationsInfoIcon.foreground#0B7974
  • notificationsWarningIcon.foreground#F9C74F
  • notificationToast.border#00000000
  • panel.background#FDFAE4
  • panel.border#00000000
  • panelTitle.activeBorder#39A960
  • panelTitle.activeForeground#394956
  • panelTitle.inactiveForeground#394956
  • peekView.border#00000000
  • peekViewEditor.background#F7EDD2
  • peekViewEditor.matchHighlightBackground#F9C74FAF
  • peekViewEditor.matchHighlightBorder#00000000
  • peekViewEditorGutter.background#F7EDD2
  • peekViewResult.background#F7EDD2
  • peekViewResult.fileForeground#394956
  • peekViewResult.lineForeground#394956
  • peekViewResult.matchHighlightBackground#F0743A7C
  • peekViewResult.selectionBackground#EAD9B9
  • peekViewResult.selectionForeground#394956
  • peekViewTitle.background#EAD9B9
  • peekViewTitleDescription.foreground#394956
  • peekViewTitleLabel.foreground#394956
  • pickerGroup.border#00000000
  • pickerGroup.foreground#394956
  • progressBar.background#39A960
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#EAD9B9
  • scrollbarSlider.background#EAD9B946
  • scrollbarSlider.hoverBackground#EAD9B9
  • sideBar.background#FDFAE4
  • sideBar.border#00000000
  • sideBar.foreground#394956
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.foreground#394956
  • statusBar.background#FDFAE4
  • statusBar.border#00000000
  • statusBar.debuggingBackground#C2A83E
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#FDFAE4
  • statusBar.foreground#394956
  • statusBar.noFolderBackground#F0743A
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#FDFAE4
  • statusBarItem.hoverBackground#00000000
  • statusBarItem.remoteBackground#39A960
  • statusBarItem.remoteForeground#FDFAE4
  • tab.activeBackground#FDFAE4
  • tab.activeBorder#39A960
  • tab.activeBorderTop#00000000
  • tab.activeForeground#394956
  • tab.border#00000000
  • tab.hoverBackground#FDFAE4
  • tab.hoverBorder#00000000
  • tab.hoverForeground#394956
  • tab.inactiveBackground#FDFAE4
  • tab.inactiveForeground#394956
  • terminal.border#80808059
  • terminal.selectionBackground#EAD9B946
  • terminalCursor.background#FDFAE4
  • terminalCursor.foreground#39A960
  • textLink.foreground#39A960
  • titleBar.activeBackground#FDFAE4
  • titleBar.activeForeground#394956
  • titleBar.border#00000000
  • titleBar.inactiveBackground#F0743A
  • titleBar.inactiveForeground#FDFAE4
  • tree.indentGuidesStroke#CBBA9A
  • widget.shadow#EAD9B974

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#CBBA9Aitalic
string#98971A
string.quoted#98971A
string.unquoted#7A7FDB
support.constant.math#F9C74F
constant.numeric, constant.character.numeric, keyword.other.unit#F0743A
constant.language, punctuation.definition.constant, variable.other.constant#B16286
constant.character, constant.other#C2A83E
constant.character.escape#F0743A
string.regexp, string.regexp keyword.other#48B1AB
meta.function punctuation.separator.comma#0B7974
variable#F9C74Fitalic
punctuation.accessor, keyword#689D6A
storage, storage.type, meta.var.expr storage.type, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, meta.class meta.method.declaration meta.var.expr storage.type.js#689D6A
entity.name.class, meta.class entity.name.type.class#F9C74F
entity.other.inherited-class#4CC977
entity.name.function#B16286
variable.parameter#689D6A
punctuation.definition.tag, meta.tag#0B7974
entity.name.tag support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#F0743A
entity.other.attribute-name#F9C74F
entity.name.tag.custom#F9C74F
support.function, support.constant#B16286
support.constant.meta.property-value#55B6BB
support.type, support.class#F9C74F
support.variable.dom#F9C74F
invalid#0B7974
invalid.deprecated#0B7974
keyword.operator#55B6BB
keyword.operator.relational#689D6A
keyword.operator.assignment#689D6A
comment.line.double-slash#CBBA9A
object#C2A83E
constant.language.null#F1563A
meta.brace#0B7974
meta.delimiter.period#689D6A
punctuation.definition.string#C2A83E
constant.language.boolean#F1563A
object.comma#0B7974
variable.parameter.function#55B6BB
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#48B1AB
meta.property-list entity.name.tag.reference#F1563A
constant.other.color, constant.other.color.rgb-value punctuation.definition.constant#C2A83E
meta.selector#689D6A
entity.other.attribute-name.id#F9C74F
meta.property-name#48B1AB
entity.name.tag.doctype, meta.tag.sgml.doctype#689D6Aitalic
punctuation.definition.parameters#C2A83E
keyword.control.operator#55B6BB
keyword.operator.logical#689D6A
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#F1563A
variable.other.property, variable.other.object.property#55B6BB
entity.name.function#B16286
keyword.operator.comparison#689D6A
support.constant, keyword.other.special-method, keyword.other.new#55B6BB
support.function#55B6BB
invalid.broken#394956
invalid.unimplemented#0B7974
invalid.illegal#0B7974
variable.language#F1563A
support.variable.property#55B6BB
variable.function#B16286
variable.interpolation#F1563A
meta.function-call#B16286
punctuation.section.embedded#D63B3B
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#0B7974
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#C2A83E
string.template meta.template.expression#D63B3B
string.template punctuation.definition.string#0B7974
italic#689D6Aitalic
bold#F9C74Fbold
quote#689D6Aitalic
raw#48B1AB
variable.assignment.coffee#55B6BB
variable.parameter.function.coffee#0B7974
variable.assignment.coffee#55B6BB
variable.other.readwrite.cs#0B7974
entity.name.type.class.cs, storage.type.cs#B16286
entity.name.type.namespace.cs#B16286
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#F1563A
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#F1563A
keyword.other.unit.css, constant.length.units.css, keyword.other.unit.less, constant.length.units.less, keyword.other.unit.scss, constant.length.units.scss, keyword.other.unit.sass, constant.length.units.sass#C2A83E
meta.attribute-selector.css entity.other.attribute-name.attribute#F0743A
source.js source.css meta.property-list, source.js source.css punctuation.section, source.js source.css punctuation.terminator.rule, source.js source.css punctuation.definition.entity.end.bracket, source.js source.css punctuation.definition.entity.begin.bracket, source.js source.css punctuation.separator.key-value, source.js source.css punctuation.definition.attribute-selector, source.js source.css meta.property-list, source.js source.css meta.property-list punctuation.separator.comma, source.ts source.css punctuation.section, source.ts source.css punctuation.terminator.rule, source.ts source.css punctuation.definition.entity.end.bracket, source.ts source.css punctuation.definition.entity.begin.bracket, source.ts source.css punctuation.separator.key-value, source.ts source.css punctuation.definition.attribute-selector, source.ts source.css meta.property-list, source.ts source.css meta.property-list punctuation.separator.comma#0B7974
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#B16286
source.elixir entity.name.function#F9C74F
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#B16286
source.elixir punctuation.definition.string#4CC977
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#F9C74F
source.elixir .punctuation.binary.elixir#689D6A
source.go meta.function-call.go#0B7974
variable.qraphql#0B7974
entity.other.attribute-name.id.html#F9C74F
punctuation.definition.tag.html#0B7974
meta.tag.sgml.doctype.html#689D6Aitalic
meta.class entity.name.type.class.js#F57D7D
meta.method.declaration storage.type.js#B16286normal
terminator.js#0B7974
meta.js punctuation.definition.js#0B7974
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#0B7974
variable.other.jsdoc, variable.other.phpdoc#55B6BB
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#F0743A
variable.parameter.function.js#689D6A
variable.other.readwrite.js#0B7974
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#0B7974
variable.other.object.js, variable.other.object.jsx, meta.object-literal.key.js, meta.object-literal.key.jsx, variable.object.property.js, variable.object.property.jsx#0B7974
variable.js, variable.other.js#0B7974
entity.name.type.js, entity.name.type.module.js#F57D7D
support.class.js#0B7974
support.type.property-name.json#98971A
support.constant.json#F9C74F
meta.structure.dictionary.value.json string.quoted.double#48B1ABnormal
string.quoted.double.json punctuation.definition.string.json#48B1ABnormal
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#F1563A
variable.other.ruby#0B7974
constant.language.symbol.hashkey.ruby#55B6BB
entity.name.tag.less#F1563A
meta.attribute-selector.less entity.other.attribute-name.attribute#F0743A
markup.heading#55B6BB
markup.italic#689D6Aitalic
markup.bold#F9C74Fbold
markup.quote#689D6Aitalic
markup.inline.raw#48B1AB
markup.underline.link, markup.underline.link.image#F1563A
markup.meta.attribute-list#4CC977
markup.admonitionbold
markup.list.bullet#C2A83E
markup.superscript, markup.subscriptitalic
string.other.link.title.markdown, string.other.link.description.markdown#0B7974
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#55B6BB
punctuation.definition.metadata.markdown#F1563A
beginning.punctuation.definition.list.markdown#55B6BB
entity.name.function.asciidoc#F0743A
variable.other.php#B16286
support.class.php#F57D7D
meta.function-call.php punctuation#0B7974
variable.other.global.php#F9C74F
variable.other.global.php punctuation.definition.variable#F9C74F
constant.language.python#F1563A
variable.parameter.function.python, meta.function-call.arguments.python#689D6A
meta.function-call.python, meta.function-call.generic.python#B16286
punctuation.python#0B7974
entity.name.function.decorator.python#F9C74F
source.python variable.language.special#B16286
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#0B7974
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#B16286
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#B16286
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F0743A
entity.name.tag.scss, entity.name.tag.sass#F1563A
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#0B7974
entity.name.type.ts, entity.name.type.tsx#55B6BB
support.class.node.ts, support.class.node.tsx#B16286
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#0B7974
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#0B7974
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#B16286
meta.tag.js meta.jsx.children.tsx#B16286
entity.name.tag.yaml#55B6BB
variable.parameter.handlebars#B16286
entity.other.attribute-name.handlebars variable.parameter.handlebars#F9C74F
entity.other.attribute-name.handlebars#55B6BB
entity.other.attribute-value.handlebars variable.parameter.handlebars#689D6A
meta.tag.js meta.embedded.expression.js punctuation.section.embedded.begin.js, meta.tag.js meta.embedded.expression.js punctuation.section.embedded.end.js, meta.property-list.css meta.property-value.css variable.other.less, punctuation.section.embedded.begin.js.jsx, punctuation.section.embedded.end.js.jsx, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.type, punctuation.section.embedded.js, punctuation.definintion.string, punctuationnormal
keyword.other.unit, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.other.attribute-name, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, variable.assignment.coffee, support.function.basic_functions, keyword.operator.type.annotation, punctuation.section.embedded, assignment.coffee, entity.name.type.ts, italic, quote, type .function, type.function, storage.type.class, keyword.control, modifier, thisitalic

Shiki preview

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

Loading...