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#1A1A1A
  • activityBar.foreground#7D7D7D
  • activityBarBadge.background#383838
  • badge.background#383838
  • badge.foreground#C1C1C1
  • button.background#333
  • debugIcon.breakpointCurrentStackframeForeground#79b8ff
  • debugIcon.breakpointDisabledForeground#848484
  • debugIcon.breakpointForeground#FF7A84
  • debugIcon.breakpointStackframeForeground#79b8ff
  • debugIcon.breakpointUnverifiedForeground#848484
  • debugIcon.continueForeground#FF7A84
  • debugIcon.disconnectForeground#FF7A84
  • debugIcon.pauseForeground#FF7A84
  • debugIcon.restartForeground#79b8ff
  • debugIcon.startForeground#79b8ff
  • debugIcon.stepBackForeground#FF7A84
  • debugIcon.stepIntoForeground#FF7A84
  • debugIcon.stepOutForeground#FF7A84
  • debugIcon.stepOverForeground#FF7A84
  • debugIcon.stopForeground#79b8ff
  • diffEditor.insertedTextBackground#3a632a4b
  • diffEditor.removedTextBackground#88063852
  • editor.background#1f1f1f
  • editor.lineHighlightBorder#303030
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorGroupHeader.tabsBorder#1A1A1A
  • editorIndentGuide.activeBackground#383838
  • editorIndentGuide.background#2A2A2A
  • editorLineNumber.foreground#727272
  • editorRuler.foreground#2A2A2A
  • editorSuggestWidget.background#1A1A1A
  • focusBorder#444
  • foreground#888888
  • gitDecoration.ignoredResourceForeground#444444
  • input.background#2A2A2A
  • input.foreground#E0E0E0
  • inputOption.activeBackground#3a3a3a
  • list.activeSelectionBackground#212121
  • list.activeSelectionForeground#F5F5F5
  • list.focusBackground#292929
  • list.highlightForeground#EAEAEA
  • list.hoverBackground#262626
  • list.hoverForeground#9E9E9E
  • list.inactiveSelectionBackground#212121
  • list.inactiveSelectionForeground#F5F5F5
  • panelTitle.activeBorder#1f1f1f
  • panelTitle.activeForeground#FAFAFA
  • panelTitle.inactiveForeground#484848
  • peekView.border#444
  • peekViewEditor.background#242424
  • pickerGroup.border#363636
  • pickerGroup.foreground#EAEAEA
  • progressBar.background#FAFAFA
  • scrollbar.shadow#1f1f1f
  • sideBar.background#1A1A1A
  • sideBarSectionHeader.background#202020
  • statusBar.background#1A1A1A
  • statusBar.debuggingBackground#1A1A1A
  • statusBar.foreground#7E7E7E
  • statusBar.noFolderBackground#1A1A1A
  • statusBarItem.prominentBackground#fafafa1a
  • statusBarItem.remoteBackground#1a1a1a00
  • statusBarItem.remoteForeground#7E7E7E
  • symbolIcon.classForeground#FF9800
  • symbolIcon.constructorForeground#b392f0
  • symbolIcon.enumeratorForeground#FF9800
  • symbolIcon.enumeratorMemberForeground#79b8ff
  • symbolIcon.eventForeground#FF9800
  • symbolIcon.fieldForeground#79b8ff
  • symbolIcon.functionForeground#b392f0
  • symbolIcon.interfaceForeground#79b8ff
  • symbolIcon.methodForeground#b392f0
  • symbolIcon.variableForeground#79b8ff
  • tab.activeBorder#1e1e1e
  • tab.activeForeground#FAFAFA
  • tab.border#1A1A1A
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#727272
  • terminal.ansiBrightBlack#5c5c5c
  • textLink.activeForeground#fafafa
  • textLink.foreground#CCC
  • titleBar.activeBackground#1A1A1A
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text#69676citalic
comment storage.type#69676c—
comment entity.name.type#bab6c0—
comment variable, comment variable.other#bab6c0—
comment keyword, comment entity.name.tag, entity.name.tag.documentation#bab6c0—
comment keyword.codetag.notation#948ae3—
comment.git-status.header.remote#fc618d—
comment.git-status.header.local#5ad4e6—
comment.other.git-status.head#f7f1ff—
string.quoted.docstring, string.quoted.docstring punctuation.definition#69676c—
constant#948ae3—
constant.other#f7f1ff—
constant.other.caps#948ae3—
constant.other.placeholder.c#fd9353—
constant.other.property#948ae3—
constant.other.citation.latex#948ae3—
constant.other.color#948ae3—
constant.other.character-class.escape#948ae3—
constant.other.key#948ae3—
constant.other.symbol#fd9353—
constant.other.elm#5ad4e6—
constant.numeric#948ae3—
constant.language#948ae3—
constant.character.escape#948ae3—
constant.numeric.line-number.find-in-files#525053—
constant.numeric.line-number.match.find-in-files#fce566—
entity.name.section#fce566—
entity.name.function, entity.name.function.templated, entity.name.function.member.static#7bd88f—
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace#5ad4e6—
entity.name.label#948ae3—
entity.name.function.preprocessor#5ad4e6—
entity.name#7bd88f—
entity.name.class#5ad4e6—
entity.name.constant#948ae3—
entity.name.namespace#f7f1ff—
entity.other.inherited-class#5ad4e6italic
entity.name.function#7bd88f—
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component#fc618d—
entity.name.function.operator#fc618d—
meta.brackets entity.name.function.operator, punctuation.separator entity.name.function.operator#8b888f—
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value#5ad4e6—
entity.other.attribute-name#5ad4e6italic
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css, entity.other.attribute-name.css, entity.other.animation-name.css#7bd88f—
entity.other.attribute-name.id.css#fd9353—
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css#5ad4e6italic
entity.name.function, support.function#7bd88f—
entity.other.git-status.hex#948ae3—
entity.other.jinja2.delimiter#8b888f—
entity.name.operator.custom-literal#f7f1ff—
entity.name.operator.custom-literal.string#fce566—
entity.name.operator.custom-literal.number#948ae3—
entity.name.type.rust#5ad4e6—
entity.name.lifetime.rust#fc618d—
invalid#fc618ditalic underline
invalid.deprecated#fd9353italic underline
keyword#fc618d—
keyword.control#fc618d—
keyword.control.directive#fc618d—
keyword.operator, keyword.operator.member, keyword.operator.new#fc618d—
keyword.other.substitution#8b888f—
keyword.other.template.begin, keyword.other.template.end#fc618d—
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext#8b888f—
keyword.other.parenthesis.elm#8b888f—
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust#5ad4e6—
keyword.control.rust, keyword.operator.misc.rust#fc618d—
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby#fc618d—
markup.italic—italic
markup.bold—bold
markup.heading#fce566—
markup.raw#fd9353—
markup.underline—underline
markup.underline.link#7bd88f—
markup.inserted, markup.inserted punctuation.definition.inserted#7bd88f—
markup.deleted, markup.deleted punctuation.definition.deleted#fc618d—
markup.changed, markup.changed punctuation.definition.changed#fce566—
markup.ignored, markup.ignored punctuation.definition.ignored#8b888f—
markup.untracked#8b888f—
markup.quote—italic
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js#8b888f—
meta.function-call.generic.python, support.function.builtin.python#7bd88f—
meta.function-call.python meta.function-call.arguments.python#f7f1ff—
meta.instance.constructor#7bd88f—
meta.attribute-with-value.class string, meta.attribute.class.html string#7bd88f—
meta.attribute-with-value.id string, meta.attribute.id.html string#fd9353—
source.json meta.mapping.key string#f7f1ff—
source.yaml meta.mapping.key string#fc618d—
meta.object.member#f7f1ff—
meta.property-list.css variable.other#fd9353—
entity.name.constant.preprocessor, meta.preprocessor#948ae3—
meta.diff.git-diff.header#fce566—
meta.type_params.rust#f7f1ff—
meta.attribute.rust, meta.annotation.rust, variable.language.rust, variable.annotation.rust, meta.annotation.rust string, meta.annotation.rust keyword, meta.annotation.rust keyword.operator, meta.attribute.rust string#bab6c0—
meta.type variable, meta.type variable.other.readwrite#948ae3—
punctuation#8b888f—
punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.separator.parameter, punctuation.accessor, punctuation.terminator#8b888f—
punctuation.definition.group#f7f1ff—
punctuation.definition.comment#69676c—
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css#bab6c0—
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin#fd9353—
punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#fc618d—
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown——
markup.underline.link punctuation#7bd88f—
meta.brace.round, meta.brace.square, keyword.operator.type.annotation, meta.type storage.modifier.array#8b888f—
region.redish#fc618d—
region.orangish#fd9353—
region.yellowish#fce566—
region.greenish#7bd88f—
region.bluish#5ad4e6—
region.purplish#948ae3—
region.pinkish#fc618d—
region.whitish#FFFFFF—
source#f7f1ff—
source.scss, source.sass#8b888f—
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less#fd9353italic
source.git-show.commit.sha#948ae3—
source.git-show.author, source.git-show.date, source.git-diff.command, source.git-diff.command meta.diff.git-diff.header.from-file, source.git-diff.command meta.diff.git-diff.header.to-file#8b888f—
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha#948ae3—
source.git-show meta.diff.range.unified#fd9353—
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file#8b888f—
storage#fc618d—
storage.type#5ad4e6italic
storage.type.extends#fc618dnormal
storage.type.function.arrow#fc618dnormal
storage.modifier, storage.type.modifier#fc618ditalic
storage.class.restructuredtext.ref#948ae3—
storage.modifier.visibility.rust, storage.modifier.lifetime.rust#fc618d—
storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, storage.type.rust, storage.type.core.rust, storage.class.std.rust#5ad4e6—
storage.type.rust, storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, keyword.other.rust, keyword.other.where.rust#fc618d—
storage.modifier.import.java#f7f1ff—
string#fce566—
string.unquoted.label#f7f1ff—
string source#f7f1ff—
string source punctuation.section.embedded, string punctuation.definition.string source#8b888f—
string.other.link.title, string.other.link.description#fc618d—
string.other.link.description.title#5ad4e6—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#fc618d—
string.other.ref, string.other.restructuredtext.ref#7bd88f—
string.other.git-status.help.key#bab6c0—
string.other.git-status.remote#fc618d—
support.constant#5ad4e6—
support.constant.handlebars#8b888f—
support.type.vendor-prefix.css#bab6c0—
support.function#7bd88f—
support.function.delimiter.elm#8b888f—
support.type, entity.name.type.object.console#5ad4e6italic
support.variable, support.variable.property#5ad4e6—
support.type.property-name#f7f1ffnormal
support.class#5ad4e6—
support.constant.core.rust#948ae3—
comment support, comment support.class#69676c—
text#f7f1ff—
text.find-in-files#f7f1ff—
variable, variable.other#f7f1ff—
variable.parameter, parameters variable.function#fd9353italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#bab6c0italic
variable.language.arguments#948ae3—
variable.other.class#5ad4e6—
variable.other.constant#948ae3—
variable.other.readwrite#f7f1ff—
variable.other.member#f7f1ff—
variable.other.enummember#948ae3—
variable.other.property, variable.other.property.static, variable.other.event#f7f1ff—
variable.function#7bd88f—
variable.other.substitution#fd9353—
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby#948ae3—
source.jinja2 variable.other.jinja2.block#7bd88f—
source.jinja2 variable.other.jinja2#fd9353—
Rafa-Oficial by rafaelburghausen - VS Code Theme