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#21252b
  • activityBar.foreground#abb2bf
  • activityBarBadge.background#528bff
  • badge.background#528bff
  • badge.foreground#ffffff
  • button.background#528bff
  • button.foreground#ffffff
  • button.hoverBackground#62afef
  • dropdown.background#282c34
  • dropdown.border#3b4048
  • dropdown.foreground#abb2bf
  • editor.background#1e1e1e
  • editor.findMatchBackground#3e4451
  • editor.findMatchHighlightBackground#3e4451
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#282c34
  • editor.selectionBackground#3e4451
  • editor.selectionHighlightBackground#3e4451
  • editor.wordHighlightBackground#3e4451
  • editor.wordHighlightStrongBackground#3e4451
  • editorBracketHighlight.foreground1#abb2bf
  • editorBracketHighlight.foreground2#abb2bf
  • editorBracketHighlight.foreground3#abb2bf
  • editorBracketHighlight.foreground4#abb2bf
  • editorBracketHighlight.foreground5#abb2bf
  • editorBracketHighlight.foreground6#abb2bf
  • editorBracketMatch.background#3e4451
  • editorBracketMatch.border#5c6370
  • editorBracketPairGuide.activeBackground1#abb2bf
  • editorBracketPairGuide.activeBackground2#abb2bf
  • editorBracketPairGuide.activeBackground3#abb2bf
  • editorBracketPairGuide.activeBackground4#abb2bf
  • editorBracketPairGuide.activeBackground5#abb2bf
  • editorBracketPairGuide.activeBackground6#abb2bf
  • editorBracketPairGuide.background1#5c6370
  • editorBracketPairGuide.background2#5c6370
  • editorBracketPairGuide.background3#5c6370
  • editorBracketPairGuide.background4#5c6370
  • editorBracketPairGuide.background5#5c6370
  • editorBracketPairGuide.background6#5c6370
  • editorCursor.foreground#528bff
  • editorError.foreground#e16d76
  • editorGutter.addedBackground#72c45a
  • editorGutter.background#1e1e1e
  • editorGutter.deletedBackground#e16d76
  • editorGutter.modifiedBackground#d19a66
  • editorHint.foreground#58b6c2
  • editorIndentGuide.activeBackground1#5c6370
  • editorIndentGuide.background1#3b4048
  • editorInfo.foreground#62afef
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#5c6370
  • editorWarning.foreground#d19a66
  • editorWhitespace.foreground#3b4048
  • input.background#282c34
  • input.border#3b4048
  • input.foreground#abb2bf
  • inputOption.activeBorder#528bff
  • list.activeSelectionBackground#3e4451
  • list.activeSelectionForeground#abb2bf
  • list.hoverBackground#282c34
  • list.inactiveSelectionBackground#282c34
  • panel.background#1e1e1e
  • panel.border#3b4048
  • panelTitle.activeForeground#abb2bf
  • panelTitle.inactiveForeground#5c6370
  • progressBar.background#528bff
  • scrollbarSlider.activeBackground#5c6370
  • scrollbarSlider.background#3b4048
  • scrollbarSlider.hoverBackground#5c6370
  • sideBar.background#21252b
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#21252b
  • sideBarSectionHeader.foreground#abb2bf
  • sideBarTitle.foreground#abb2bf
  • statusBar.background#282c34
  • statusBar.debuggingBackground#282c34
  • statusBar.foreground#abb2bf
  • statusBar.noFolderBackground#282c34
  • statusBarItem.prominentBackground#3e4451
  • tab.activeBackground#1e1e1e
  • tab.activeForeground#abb2bf
  • tab.border#21252b
  • tab.inactiveBackground#21252b
  • tab.inactiveForeground#5c6370
  • textBlockQuote.background#282c34
  • textBlockQuote.border#3b4048
  • textCodeBlock.background#282c34
  • textLink.activeForeground#528bff
  • textLink.foreground#62afef
  • textPreformat.background#282c34
  • textPreformat.foreground#abb2bf
  • titleBar.activeBackground#21252b
  • titleBar.activeForeground#abb2bf
  • titleBar.inactiveBackground#21252b
  • titleBar.inactiveForeground#5c6370

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c6370italic
keyword, storage.type, storage.modifier, keyword.control.import, keyword.control.from#e16d76—
string.quoted.docstring, string.quoted.triple, string.quoted.triple.single.python, string.quoted.triple.double.python, punctuation.definition.string.begin.python string.quoted.triple, punctuation.definition.string.end.python string.quoted.triple, string.quoted.triple punctuation.definition.string.begin, string.quoted.triple punctuation.definition.string.end, string.quoted.docstring punctuation.definition.string.begin, string.quoted.docstring punctuation.definition.string.end#58b6c2—
meta.function-call.arguments.python meta.mapping.key.python string.quoted.single.python, meta.function-call.arguments.python meta.mapping.key.python string.quoted.double.python, meta.function-call.arguments.python string.quoted.single.python, meta.function-call.arguments.python string.quoted.double.python#58b6c2—
meta.mapping.key.python string.quoted.double, meta.mapping.key.python string.quoted.single, meta.mapping.key.python string, meta.mapping.key.python, dictionary.key, source.python meta.mapping.key string.quoted.double, source.python meta.mapping.key string.quoted.single, meta.dictionary.key.python, meta.dictionary.key.python string, meta.structure.dictionary.key.python, meta.structure.dictionary.key.python string, meta.structure.dictionary.python string.quoted.double, meta.structure.dictionary.python string.quoted.single, source.python meta.structure.dictionary.key, source.python meta.structure.dictionary.key string#58b6c2—
meta.function-call.arguments.python meta.mapping.value.python string.quoted.single.python, meta.function-call.arguments.python meta.mapping.value.python string.quoted.double.python, meta.function-call.arguments.python meta.mapping.value.python string.template.python#62afef—
meta.mapping.value.python string.quoted.double, meta.mapping.value.python string.quoted.single, meta.mapping.value.python string.template, meta.mapping.value.python string, source.python meta.mapping.value string.quoted.double, source.python meta.mapping.value string.quoted.single, source.python meta.mapping.value string.template, meta.dictionary.value.python string, meta.dictionary.value.python string.quoted.double, meta.dictionary.value.python string.quoted.single, meta.structure.dictionary.value.python string#62afef—
string.quoted.single, string.quoted.double, string.template#d19a66—
constant.numeric, constant.language#c678de—
constant, constant.character, constant.other#c678de—
meta.function-call.arguments.python constant.character.format.placeholder.other.python, meta.function-call.arguments.python meta.format.brace.python constant.character.format.placeholder, meta.mapping.value.python constant.character.format.placeholder.other.python, meta.mapping.value.python meta.format.brace.python constant.character.format.placeholder, string.quoted.single.python constant.character.format.placeholder.other.python, string.quoted.double.python constant.character.format.placeholder.other.python, constant.character.format.placeholder.other.python#62afef—
entity.name.function.definition.python, meta.function.definition.python entity.name.function.python, meta.function.definition entity.name.function, meta.function.python entity.name.function.python, source.python meta.function.python entity.name.function.python#abb2bf—
meta.function-call entity.name.function, meta.function-call.python entity.name.function.python, meta.method-call.python entity.name.function.python, support.function#d19a66—
entity.name.type, entity.name.class, support.type, support.class#62afef—
punctuation.definition.decorator.python, entity.name.function.decorator.python#c678de—
entity.name.tag, punctuation.definition.tag#e16d76—
keyword.operator, punctuation.accessor#abb2bf—
variable, variable.other, variable.other.readwrite, variable.parameter, variable.parameter.function#62afef—
variable.other.property, variable.other.object.property, meta.member.access.python variable.other.readwrite.python, meta.attribute.python, entity.name.attribute#d19a66—
meta.import-name.python meta.member-access.python variable.other.readwrite.python, meta.import-name.python meta.member-access.python entity.name.type.module.python, meta.import.python meta.member.access.python variable.other.readwrite.python, meta.import.python meta.member.access.python entity.name.type.module.python, meta.import.python meta.member.access.python, meta.import.python meta.attribute.python#d19a66—
entity.name.type.module.python, entity.name.namespace.python, meta.import.python entity.name.type.module.python, meta.import.python entity.name.namespace.python, meta.import.python entity.name.type.class.python, meta.import.python entity.name.function.python, meta.import.python variable.other.readwrite.alias.python, variable.other.readwrite.alias.python, meta.import.python support.type.python, meta.import.python support.function.python, meta.import.python variable, source.python meta.import.python variable, source.python meta.import.python entity.name#62afef—
meta.import.tsx meta.member-access.tsx variable.other.readwrite.tsx, meta.import.tsx meta.member-access.tsx entity.name.type.module.tsx, meta.import.ts meta.member-access.ts variable.other.readwrite.ts, meta.import.ts meta.member-access.ts entity.name.type.module.ts, meta.import.jsx meta.member-access.jsx variable.other.readwrite.jsx, meta.import.jsx meta.member-access.jsx entity.name.type.module.jsx, meta.import.js meta.member-access.js variable.other.readwrite.js, meta.import.js meta.member-access.js entity.name.type.module.js, meta.import.tsx meta.member-access.tsx, meta.import.ts meta.member-access.ts, meta.import.jsx meta.member-access.jsx, meta.import.js meta.member-access.js#d19a66—
entity.name.type.module.ts, entity.name.type.module.tsx, entity.name.type.module.js, entity.name.type.module.jsx, entity.name.namespace.ts, entity.name.namespace.tsx, entity.name.namespace.js, entity.name.namespace.jsx, meta.import.ts entity.name.type.module.ts, meta.import.tsx entity.name.type.module.tsx, meta.import.js entity.name.type.module.js, meta.import.jsx entity.name.type.module.jsx, meta.import.ts entity.name.namespace.ts, meta.import.tsx entity.name.namespace.tsx, meta.import.js entity.name.namespace.js, meta.import.jsx entity.name.namespace.jsx, meta.import.ts entity.name.type.class.ts, meta.import.tsx entity.name.type.class.tsx, meta.import.ts entity.name.function.ts, meta.import.tsx entity.name.function.tsx, meta.import.js entity.name.function.js, meta.import.jsx entity.name.function.jsx, meta.import.ts variable.other.readwrite.alias.ts, meta.import.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other.readwrite.alias.js, meta.import.jsx variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.alias.js, variable.other.readwrite.alias.jsx, meta.import.ts variable, meta.import.tsx variable, meta.import.js variable, meta.import.jsx variable, source.ts meta.import.ts variable, source.tsx meta.import.tsx variable, source.js meta.import.js variable, source.jsx meta.import.jsx variable, source.ts meta.import.ts entity.name, source.tsx meta.import.tsx entity.name, source.js meta.import.js entity.name, source.jsx meta.import.jsx entity.name#62afef—
meta.type.annotation.ts entity.name.type, meta.type.annotation.tsx entity.name.type, meta.type.annotation.ts support.type, meta.type.annotation.tsx support.type, meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type, source.ts meta.type.annotation entity.name.type, source.tsx meta.type.annotation entity.name.type, source.ts meta.type.annotation support.type, source.tsx meta.type.annotation support.type#d19a66—
markup.heading#62afefbold
markup.inline.raw, markup.fenced_code.block——
source.python#62afef—
meta.import.python meta.member.access.python, meta.import.python meta.attribute.python, source.python meta.import.python, meta.import.python source.python, meta.import.python meta.member.access.python source.python, source.python meta.import.python meta.member.access.python#d19a66—
meta.import.ts meta.member.access.ts, meta.import.tsx meta.member.access.tsx, meta.import.js meta.member.access.js, meta.import.jsx meta.member.access.jsx, source.ts meta.import.ts, source.tsx meta.import.tsx, source.js meta.import.js, source.jsx meta.import.jsx, meta.import.ts source.ts, meta.import.tsx source.tsx, meta.import.js source.js, meta.import.jsx source.jsx, meta.import.ts meta.member.access.ts source.ts, meta.import.tsx meta.member.access.tsx source.tsx, source.ts meta.import.ts meta.member.access.ts, source.tsx meta.import.tsx meta.member.access.tsx#d19a66—
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition, punctuation.definition.bracket, punctuation.section, punctuation.section.brackets, punctuation.section.braces, punctuation.section.parens, punctuation.definition.list, punctuation.definition.dict, punctuation.definition.array, punctuation.definition.parameters, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.definition.dict.begin, punctuation.definition.dict.end, punctuation.definition.array.begin, punctuation.definition.array.end, punctuation.definition.parameters.begin.python, punctuation.definition.parameters.end.python, 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, punctuation.definition.array.begin.python, punctuation.definition.array.end.python, punctuation.section.brackets.begin.python, punctuation.section.brackets.end.python, punctuation.section.braces.begin.python, punctuation.section.braces.end.python, punctuation.section.parens.begin.python, punctuation.section.parens.end.python, source.python punctuation, source.python punctuation.definition, source.python punctuation.section, meta.function-call.python punctuation, meta.function-call.arguments.python punctuation, meta.mapping.python punctuation, meta.structure.dictionary.python punctuation, meta.import.python punctuation, meta.import.python meta.member.access.python punctuation, source.python meta.function-call.python punctuation, source.python meta.function-call.arguments.python punctuation, source.python meta.mapping.python punctuation, source.python meta.structure.dictionary.python punctuation#abb2bf