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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#707070italic
variable, string constant.other.placeholder#e8e8e8—
meta.block variable.other#e8e8e8—
variable.language#ff637eitalic
constant, constant.numeric, constant.language, constant.character, constant.other#ffb3cc—
constant.other.color#e8e8e8—
invalid, invalid.illegal#ff3333—
keyword, keyword.control, keyword.control.conditional, keyword.control.flow, keyword.control.return, keyword.control.loop, storage.type, storage.modifier#ff637e—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, punctuation.separator, punctuation.terminator#c5c5c5—
keyword.other.substitution, meta.brace.round, meta.brace.square, punctuation.definition.parameters, punctuation.definition.array#c5c5c5—
entity.name.function, meta.function-call, support.function, keyword.other.special-method#8fd460—
entity.name.class, entity.name.type.class, support.class, entity.other.inherited-class#ff637e—
support.type, entity.name.type, entity.name.type.interface, entity.name.type.alias#b8e986—
string, string.quoted, string.template, punctuation.definition.string#ffcc66—
string.other.link#4d9fff—
string.regexp#ffb3cc—
constant.character.escape#ff637e—
entity.name.tag, punctuation.definition.tag#ff637e—
entity.other.attribute-name#b8e986italic
meta.decorator, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ff637eitalic
markup.underline.link, meta.link—underline
markup.inserted#50fa7b—
markup.deleted#ff3333—
markup.changed#ffaa33—
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#8fd460—
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#ff637e—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.class.less#b8e986—
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, entity.other.attribute-name.id.less#ffcc66—
entity.other.attribute-name.attribute.css, meta.attribute-selector.css#ffcc66—
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#ff79c6—
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#ffb3cc—
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#ffb3cc—
support.function.css, support.function.scss, support.function.less, support.function.calc.css, support.function.var.css#8fd460—
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#ff637eitalic
keyword.other.important.css, keyword.other.important.scss#ff637ebold
keyword.operator.combinator.css#c5c5c5—
support.class.component.tsx, support.class.component.jsx, entity.name.tag.tsx, entity.name.tag.jsx#ff637ebold
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#b8e986—
entity.name.type.parameter.ts, entity.name.type.parameter.tsx#8fd460—
storage.type.ts, storage.type.tsx, keyword.control.as.ts, keyword.control.as.tsx#ff637e—
keyword.control.import.ts, keyword.control.import.tsx, keyword.control.export.ts, keyword.control.export.tsx, keyword.control.from.ts, keyword.control.from.tsx#ff637eitalic
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#b8e986italic
punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx#8fd460—
punctuation.definition.tag.end.tsx, punctuation.definition.tag.end.jsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.begin.jsx#c5c5c5—
string.template.ts, string.template.tsx, string.template.js, string.template.jsx#ffcc66—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#8fd460—
storage.type.function.arrow.ts, storage.type.function.arrow.tsx, storage.type.function.arrow.js, storage.type.function.arrow.jsx#ff637e—
meta.object-literal.key.ts, meta.object-literal.key.tsx, meta.object-literal.key.js, meta.object-literal.key.jsx#e8e8e8—
entity.name.method.js, entity.name.method.ts, meta.class-method.js entity.name.function.js, variable.function.constructor#8fd460italic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff637e—
source.js constant.other.object.key.js string.unquoted.label.js#ff637eitalic
entity.name.function.python, meta.function.python entity.name.function, support.function.python#8fd460—
meta.function-call.python, meta.function-call.generic.python#8fd460—
support.function.magic.python, entity.name.function.magic.python#ff79c6italic
support.function.builtin.python, meta.function-call.python support.function.builtin#8fd460—
entity.name.type.class.python, meta.class.python entity.name.type.class#ff637ebold
entity.other.inherited-class.python#b8e986italic
keyword.control.python, keyword.control.flow.python, keyword.control.conditional.python, keyword.control.loop.python, keyword.control.exception.python#ff637ebold
keyword.control.import.python, keyword.control.import.from.python#ff79c6italic
storage.type.function.python, storage.modifier.declaration.python, storage.type.class.python#ff637ebold
keyword.operator.python, keyword.operator.logical.python, keyword.operator.comparison.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python#c5c5c5—
keyword.operator.wordlike.python#ff637eitalic
entity.name.function.decorator.python, meta.function.decorator.python, punctuation.definition.decorator.python#ff79c6italic
string.quoted.single.python, string.quoted.double.python#ffcc66—
string.quoted.docstring.multi.python, string.quoted.docstring.raw.python#707070italic
meta.fstring.python, string.interpolated.python, string.quoted.single.python.fstring, string.quoted.double.python.fstring#ffcc66—
meta.embedded.line.python, meta.fstring.python source.python.embedded, meta.interpolation.python#e8e8e8—
punctuation.definition.interpolation.begin.python, punctuation.definition.interpolation.end.python#ff637e—
string.quoted.raw.python, storage.type.string.python#ffcc66—
meta.function.parameters.python support.type.python, meta.function.return-type.python support.type.python, meta.type.annotation.python#b8e986—
support.type.python, support.type.metaclass.python#b8e986—
keyword.operator.type.python, punctuation.separator.annotation.python, punctuation.separator.parameters.python#c5c5c5—
variable.parameter.function.python, variable.parameter.function.language.python, meta.function.parameters.python variable.parameter#ffb3ccitalic
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python, variable.language.special.cls.python#ff637eitalic
variable.other.python, meta.indexed-name.python#e8e8e8—
constant.language.boolean.python#ffb3ccbold
constant.language.python#ffb3ccitalic
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#ffb3cc—
constant.character.escape.python, constant.character.escape.newline.python#ff79c6—
meta.import.python entity.name.namespace, meta.import-from.python entity.name.namespace, meta.qualified-name.python#8fd460—
meta.import.python variable.other, meta.import-from.python variable.other, meta.import-name.python, meta.generic-name.python#b8e986—
meta.import.python meta.generic-name.python, meta.import-from.python meta.generic-name.python, variable.other.readwrite.alias.python#e8e8e8italic
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#c5c5c5—
punctuation.separator.colon.python, punctuation.separator.element.python, punctuation.separator.arguments.python#c5c5c5—
keyword.declaration.function.lambda.python, storage.type.function.lambda.python#ff637eitalic
keyword.control.flow.python.comprehension#ff637eitalic
storage.type.format.python, constant.character.format.placeholder.other.python#ff79c6—
text.html.markdown, punctuation.definition.list_item.markdown#e8e8e8—
markup.heading, entity.name.section.markdown, markup.heading.markdown punctuation.definition.heading.markdown#ff637e—
markup.bold, markup.bold string#ffcc66bold
markup.italic#ff79c6italic
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#ffcc66bold italic
markup.underline#ffcc66underline
markup.strikethrough#b0b0b0strikethrough
markup.quote punctuation.definition.blockquote.markdown#707070—
markup.quote—italic
string.other.link.title.markdown#4d9fff—
string.other.link.description.title.markdown#4d9fff—
constant.other.reference.link.markdown#ffcc66—
text.html.markdown markup.inline.raw.markdown#8fd460—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#707070—
markup.fenced_code.block.markdown, punctuation.definition.markdown#ffcc66—
fenced_code.block.language.markdown#8fd460—
meta.separator#707070bold
source.json meta.structure.dictionary.json support.type.property-name.json#ff637e—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffb3cc—
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#b0b0b0—
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#ff637e—
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#ffb3cc—
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#b0b0b0—
Pittaya Theme by pittaya-org - VS Code Theme