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#f0f0f0
  • activityBar.foreground#d91656
  • activityBar.inactiveForeground#909090
  • activityBarBadge.background#d91656
  • activityBarBadge.foreground#ffffff
  • badge.background#d91656
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#d91656
  • breadcrumb.focusForeground#d91656
  • breadcrumb.foreground#606060
  • button.background#d91656
  • button.foreground#ffffff
  • button.hoverBackground#ff4d67
  • dropdown.background#ffffff
  • dropdown.border#d0d0d0
  • dropdown.foreground#2a2a2a
  • editor.background#fafafa
  • editor.findMatchBackground#ff637e45
  • editor.findMatchHighlightBackground#ff637e25
  • editor.foreground#2a2a2a
  • editor.inactiveSelectionBackground#ff637e18
  • editor.lineHighlightBackground#ffffff
  • editor.selectionBackground#ff637e35
  • editor.wordHighlightBackground#ff637e25
  • editor.wordHighlightStrongBackground#ff637e35
  • editorBracketMatch.background#8fd46025
  • editorBracketMatch.border#2f9e44
  • editorCursor.foreground#d91656
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#d0d0d0
  • editorIndentGuide.activeBackground1#8fd46040
  • editorIndentGuide.background1#e0e0e0
  • editorLineNumber.activeForeground#d91656
  • editorLineNumber.foreground#909090
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#d0d0d0
  • editorSuggestWidget.highlightForeground#d91656
  • editorSuggestWidget.selectedBackground#ff637e20
  • editorWhitespace.foreground#e0e0e0
  • editorWidget.background#ffffff
  • editorWidget.border#d0d0d0
  • gitDecoration.conflictingResourceForeground#ff9900
  • gitDecoration.deletedResourceForeground#ff3333
  • gitDecoration.ignoredResourceForeground#909090
  • gitDecoration.modifiedResourceForeground#d91656
  • gitDecoration.untrackedResourceForeground#2f9e44
  • input.background#ffffff
  • input.border#d0d0d0
  • input.foreground#2a2a2a
  • input.placeholderForeground#909090
  • inputOption.activeBorder#d91656
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBorder#4d9fff
  • inputValidation.warningBorder#ff9900
  • list.activeSelectionBackground#ff637e20
  • list.activeSelectionForeground#d91656
  • list.focusBackground#ff637e20
  • list.highlightForeground#d91656
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ff637e15
  • notificationCenter.border#d0d0d0
  • notificationCenterHeader.background#ffffff
  • notificationLink.foreground#d91656
  • notifications.background#ffffff
  • notifications.border#d0d0d0
  • panel.background#f0f0f0
  • panel.border#d0d0d0
  • panelTitle.activeBorder#d91656
  • panelTitle.activeForeground#d91656
  • panelTitle.inactiveForeground#606060
  • peekView.border#d91656
  • peekViewEditor.background#fafafa
  • peekViewResult.background#f0f0f0
  • peekViewTitle.background#f0f0f0
  • peekViewTitleLabel.foreground#d91656
  • progressBar.background#d91656
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#60606080
  • scrollbarSlider.background#40404050
  • scrollbarSlider.hoverBackground#50505070
  • sideBar.background#f0f0f0
  • sideBar.foreground#606060
  • sideBarSectionHeader.background#fafafa
  • sideBarSectionHeader.foreground#d91656
  • sideBarTitle.foreground#d91656
  • statusBar.background#f0f0f0
  • statusBar.debuggingBackground#d91656
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#606060
  • statusBar.noFolderBackground#f0f0f0
  • statusBarItem.prominentBackground#d91656
  • statusBarItem.prominentHoverBackground#ff4d67
  • tab.activeBackground#fafafa
  • tab.activeBorder#d91656
  • tab.activeBorderTop#00000000
  • tab.activeForeground#d91656
  • tab.border#f0f0f0
  • tab.inactiveBackground#f0f0f0
  • tab.inactiveForeground#606060
  • tab.unfocusedActiveBorder#d91656
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#1864ab
  • terminal.ansiBrightBlack#606060
  • terminal.ansiBrightBlue#4d9fff
  • terminal.ansiBrightCyan#15aabf
  • terminal.ansiBrightGreen#50c878
  • terminal.ansiBrightMagenta#da77f2
  • terminal.ansiBrightRed#ff637e
  • terminal.ansiBrightWhite#1a1a1a
  • terminal.ansiBrightYellow#ffaa00
  • terminal.ansiCyan#0c8599
  • terminal.ansiGreen#2f9e44
  • terminal.ansiMagenta#ae3ec9
  • terminal.ansiRed#d91656
  • terminal.ansiWhite#2a2a2a
  • terminal.ansiYellow#d97900
  • terminal.foreground#2a2a2a
  • titleBar.activeBackground#f0f0f0
  • titleBar.activeForeground#2a2a2a
  • titleBar.inactiveBackground#f0f0f0
  • titleBar.inactiveForeground#909090

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#909090italic
variable, string constant.other.placeholder#2a2a2a—
meta.block variable.other#2a2a2a—
variable.language#d91656italic
constant, constant.numeric, constant.language, constant.character, constant.other#c2255c—
constant.other.color#2a2a2a—
invalid, invalid.illegal#ff3333—
keyword, keyword.control, keyword.control.conditional, keyword.control.flow, keyword.control.return, keyword.control.loop, storage.type, storage.modifier#d91656—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, punctuation.separator, punctuation.terminator#4a4a4a—
keyword.other.substitution, meta.brace.round, meta.brace.square, punctuation.definition.parameters, punctuation.definition.array#4a4a4a—
entity.name.function, meta.function-call, support.function, keyword.other.special-method#2f9e44—
entity.name.class, entity.name.type.class, support.class, entity.other.inherited-class#d91656—
support.type, entity.name.type, entity.name.type.interface, entity.name.type.alias#2b8a3e—
string, string.quoted, string.template, punctuation.definition.string#d97900—
string.other.link#4d9fff—
string.regexp#c2255c—
constant.character.escape#d91656—
entity.name.tag, punctuation.definition.tag#d91656—
entity.other.attribute-name#2b8a3eitalic
meta.decorator, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#d91656italic
markup.underline.link, meta.link—underline
markup.inserted#2f9e44—
markup.deleted#ff3333—
markup.changed#ff9900—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#2f9e44—
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#d91656—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.class.less#2b8a3e—
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, entity.other.attribute-name.id.less#d97900—
entity.other.attribute-name.attribute.css, meta.attribute-selector.css#d97900—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-element.scss#ae3ec9—
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#c2255c—
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.less, keyword.other.unit.percentage.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.rem.css#c2255c—
support.function.css, support.function.scss, support.function.less, support.function.calc.css, support.function.var.css#2f9e44—
variable.css, variable.scss, variable.argument.css, variable.parameter.css#4d9fff—
keyword.control.at-rule.css, keyword.control.at-rule.scss, keyword.control.at-rule.less, keyword.control.at-rule.media.css, keyword.control.at-rule.keyframes.css, keyword.control.at-rule.import.css, keyword.control.at-rule.fontface.css, keyword.control.at-rule.font-face.css, keyword.control.at-rule.supports.css, keyword.control.at-rule.container.css, keyword.control.at-rule.charset.css, keyword.control.at-rule.namespace.css, keyword.control.at-rule.page.css, keyword.control.at-rule.layer.css#d91656italic
keyword.other.important.css, keyword.other.important.scss#d91656bold
keyword.operator.combinator.css#4a4a4a—
support.class.component.tsx, support.class.component.jsx, entity.name.tag.tsx, entity.name.tag.jsx#d91656bold
entity.name.type.ts, entity.name.type.tsx, entity.name.type.interface.ts, entity.name.type.interface.tsx, support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx#2b8a3e—
entity.name.type.parameter.ts, entity.name.type.parameter.tsx#2f9e44—
storage.type.ts, storage.type.tsx, keyword.control.as.ts, keyword.control.as.tsx#d91656—
keyword.control.import.ts, keyword.control.import.tsx, keyword.control.export.ts, keyword.control.export.tsx, keyword.control.from.ts, keyword.control.from.tsx#d91656italic
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#2b8a3eitalic
punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx#2f9e44—
punctuation.definition.tag.end.tsx, punctuation.definition.tag.end.jsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.begin.jsx#4a4a4a—
string.template.ts, string.template.tsx, string.template.js, string.template.jsx#d97900—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#2f9e44—
storage.type.function.arrow.ts, storage.type.function.arrow.tsx, storage.type.function.arrow.js, storage.type.function.arrow.jsx#d91656—
meta.object-literal.key.ts, meta.object-literal.key.tsx, meta.object-literal.key.js, meta.object-literal.key.jsx#2a2a2a—
entity.name.method.js, entity.name.method.ts, meta.class-method.js entity.name.function.js, variable.function.constructor#2f9e44italic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#d91656—
source.js constant.other.object.key.js string.unquoted.label.js#d91656italic
entity.name.function.python, meta.function.python entity.name.function, support.function.python#2f9e44—
meta.function-call.python, meta.function-call.generic.python#2f9e44—
support.function.magic.python, entity.name.function.magic.python#ae3ec9italic
support.function.builtin.python, meta.function-call.python support.function.builtin#2f9e44—
entity.name.type.class.python, meta.class.python entity.name.type.class#d91656bold
entity.other.inherited-class.python#2b8a3eitalic
keyword.control.python, keyword.control.flow.python, keyword.control.conditional.python, keyword.control.loop.python, keyword.control.exception.python#d91656bold
keyword.control.import.python, keyword.control.import.from.python#ae3ec9italic
storage.type.function.python, storage.modifier.declaration.python, storage.type.class.python#d91656bold
keyword.operator.python, keyword.operator.logical.python, keyword.operator.comparison.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python#4a4a4a—
keyword.operator.wordlike.python#d91656italic
entity.name.function.decorator.python, meta.function.decorator.python, punctuation.definition.decorator.python#ae3ec9italic
string.quoted.single.python, string.quoted.double.python#d97900—
string.quoted.docstring.multi.python, string.quoted.docstring.raw.python#909090italic
meta.fstring.python, string.interpolated.python, string.quoted.single.python.fstring, string.quoted.double.python.fstring#d97900—
meta.embedded.line.python, meta.fstring.python source.python.embedded, meta.interpolation.python#2a2a2a—
punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python#d91656—
string.quoted.raw.python, storage.type.string.python#d97900—
meta.function.parameters.python support.type.python, meta.function.return-type.python support.type.python, meta.type.annotation.python#2b8a3e—
support.type.python, support.type.metaclass.python#2b8a3e—
keyword.operator.type.python, punctuation.separator.annotation.python, punctuation.separator.parameters.python#4a4a4a—
variable.parameter.function.python, variable.parameter.function.language.python, meta.function.parameters.python variable.parameter#c2255citalic
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python, variable.language.special.cls.python#d91656italic
variable.other.python, meta.indexed-name.python#2a2a2a—
constant.language.boolean.python#c2255cbold
constant.language.python#c2255citalic
constant.numeric.python, constant.numeric.integer.python, constant.numeric.float.python, constant.numeric.complex.python, constant.numeric.bin.python, constant.numeric.oct.python, constant.numeric.hex.python#c2255c—
constant.character.escape.python, constant.character.escape.newline.python#ae3ec9—
meta.import.python entity.name.namespace, meta.import-from.python entity.name.namespace, meta.qualified-name.python#2f9e44—
meta.import.python variable.other, meta.import-from.python variable.other, meta.import-name.python, meta.generic-name.python#2b8a3e—
meta.import.python meta.generic-name.python, meta.import-from.python meta.generic-name.python, variable.other.readwrite.alias.python#2a2a2aitalic
punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.definition.dict.begin.python, punctuation.definition.dict.end.python#4a4a4a—
punctuation.separator.colon.python, punctuation.separator.element.python, punctuation.separator.arguments.python#4a4a4a—
keyword.declaration.function.lambda.python, storage.type.function.lambda.python#d91656italic
keyword.control.flow.python.comprehension#d91656italic
storage.type.format.python, constant.character.format.placeholder.other.python#ae3ec9—
text.html.markdown, punctuation.definition.list_item.markdown#2a2a2a—
markup.heading, entity.name.section.markdown, markup.heading.markdown punctuation.definition.heading.markdown#d91656—
markup.bold, markup.bold string#d97900bold
markup.italic#ae3ec9italic
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#d97900bold italic
markup.underline#d97900underline
markup.strikethrough#606060strikethrough
markup.quote punctuation.definition.blockquote.markdown#909090—
markup.quote—italic
string.other.link.title.markdown#4d9fff—
string.other.link.description.title.markdown#4d9fff—
constant.other.reference.link.markdown#d97900—
text.html.markdown markup.inline.raw.markdown#2f9e44—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#909090—
markup.fenced_code.block.markdown, punctuation.definition.markdown#d97900—
fenced_code.block.language.markdown#2f9e44—
meta.separator#909090bold
source.json meta.structure.dictionary.json support.type.property-name.json#d91656—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c2255c—
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#606060—
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#d91656—
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c2255c—
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#606060—
Pittaya Theme by pittaya-org - VS Code Theme