Skip to main content
Coding Theme

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#36394700
  • activityBar.background#181818
  • activityBar.border#181818
  • activityBar.dropBorder#ffffff
  • activityBar.foreground#ceef49
  • activityBar.inactiveForeground#7d7d7d
  • activityBarBadge.background#ceef49
  • activityBarBadge.foreground#101010
  • badge.background#ceef49
  • badge.foreground#101010
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#212121
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#a6adad
  • breadcrumbPicker.background#212121
  • button.background#ceef49
  • button.foreground#101010
  • button.hoverBackground#ceef49aa
  • button.secondaryBackground#363947
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#343e44
  • checkbox.background#313131
  • checkbox.border#00000000
  • checkbox.foreground#ffffff
  • debugExceptionWidget.background#363947
  • debugExceptionWidget.border#343e44
  • debugToolBar.background#181818
  • debugToolBar.border#363947
  • diffEditor.border#00000000
  • diffEditor.insertedTextBackground#57fdaf26
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#fd577e26
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#313131
  • dropdown.border#00000000
  • dropdown.foreground#ffffff
  • dropdown.listBackground#313131
  • editor.background#212121
  • editor.findMatchBackground#ea5e0077
  • editor.findMatchBorder#00000000
  • editor.findMatchHighlightBackground#ffffff20
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#00000000
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#264f78a1
  • editor.inactiveSelectionBackground#ffffff10
  • editor.lineHighlightBackground#ffffff20
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#00000000
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#ffffff20
  • editor.selectionHighlightBackground#ffffff20
  • editor.selectionHighlightBorder#495f7700
  • editor.wordHighlightBackground#5757578b
  • editor.wordHighlightStrongBackground#004972b7
  • editorBracketHighlight.foreground1#d5e82a
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#343e44
  • editorCodeLens.foreground#a6adad
  • editorCursor.background#000000
  • editorCursor.foreground#ffffff
  • editorError.background#f9215d1a
  • editorError.border#00000000
  • editorError.foreground#f9215d
  • editorGroup.border#363947
  • editorGroup.emptyBackground#181818
  • editorGroupHeader.border#ff005400
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#57fdaf
  • editorGutter.background#212121
  • editorGutter.commentRangeForeground#a6adad
  • editorGutter.deletedBackground#ceef49
  • editorGutter.foldingControlForeground#a6adad
  • editorGutter.modifiedBackground#57a0fd
  • editorHoverWidget.background#212121
  • editorHoverWidget.border#363947
  • editorHoverWidget.foreground#a6adad
  • editorIndentGuide.activeBackground1#343e44
  • editorIndentGuide.background1#363947
  • editorInfo.background#4490bf1a
  • editorInfo.border#4490bf00
  • editorInfo.foreground#75beff
  • editorInlayHint.background#4d4d4d99
  • editorInlayHint.foreground#ffffffae
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#656a6a
  • editorLink.activeForeground#57a0fd
  • editorMarkerNavigation.background#181c21
  • editorMarkerNavigationError.background#f9215d80
  • editorMarkerNavigationInfo.background#21b2f980
  • editorMarkerNavigationWarning.background#f9b92180
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#7f7f7f00
  • editorPane.background#212121
  • editorRuler.foreground#363947
  • editorSuggestWidget.background#212121
  • editorSuggestWidget.border#363947
  • editorSuggestWidget.foreground#a6adad
  • editorSuggestWidget.highlightForeground#ceef49
  • editorSuggestWidget.selectedBackground#ffffff20
  • editorWarning.background#cba8381a
  • editorWarning.border#00000000
  • editorWarning.foreground#d9b823
  • editorWhitespace.foreground#ffffff29
  • editorWidget.background#212121
  • editorWidget.foreground#a6adad
  • editorWidget.resizeBorder#ceef49
  • focusBorder#ceef49
  • foreground#a6adad
  • gitDecoration.addedResourceForeground#94d6a0
  • gitDecoration.conflictingResourceForeground#8282ee
  • gitDecoration.deletedResourceForeground#e45c44
  • gitDecoration.ignoredResourceForeground#5d627a
  • gitDecoration.modifiedResourceForeground#f3cc92
  • gitDecoration.stageDeletedResourceForeground#e65d45
  • gitDecoration.stageModifiedResourceForeground#f1cb92
  • gitDecoration.submoduleResourceForeground#8ec8ff
  • gitDecoration.untrackedResourceForeground#81eea7
  • icon.foreground#ceef49
  • inlineChat.shadow#ceef49
  • input.background#313131
  • input.border#00000000
  • input.foreground#ffffff
  • input.placeholderForeground#a6adad
  • inputOption.activeBackground#343e44
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#ffffff10
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#36394780
  • list.focusBackground#363947
  • list.focusForeground#ffffff
  • list.highlightForeground#ceef49
  • list.hoverBackground#ffffff10
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#ffffff10
  • list.inactiveSelectionForeground#ffffff
  • listFilterWidget.background#431b24
  • listFilterWidget.noMatchesOutline#00000000
  • listFilterWidget.outline#00000000
  • listFilterWidget.shadow#ceef49
  • menu.background#181818
  • menu.border#00000000
  • menu.foreground#a6adad
  • menu.selectionBackground#ffffff10
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#363947
  • menubar.selectionBackground#ffffff10
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#ffffff
  • merge.commonContentBackground#282828ea
  • merge.commonHeaderBackground#4f3434f5
  • merge.currentContentBackground#264137e8
  • merge.currentHeaderBackground#215a45f4
  • merge.incomingContentBackground#263241f2
  • merge.incomingHeaderBackground#213a5af3
  • minimap.background#212121
  • minimap.errorHighlight#f9215d
  • minimap.findMatchHighlight#515c6aea
  • minimap.selectionHighlight#5d627a4e
  • minimap.warningHighlight#d9b823
  • minimapGutter.addedBackground#57fdaf
  • minimapGutter.deletedBackground#f9215d
  • minimapGutter.modifiedBackground#57a0fd
  • notificationCenter.border#363947
  • notificationCenterHeader.background#181818
  • notificationCenterHeader.foreground#ffffff
  • notifications.background#181818
  • notifications.border#363947
  • notifications.foreground#a6adad
  • notificationsErrorIcon.foreground#f9215d
  • notificationsInfoIcon.foreground#21a3f9
  • notificationsWarningIcon.foreground#f9cd21
  • notificationToast.border#363947
  • panel.background#181818
  • panel.border#ceef49
  • panelSection.border#964d4d59
  • panelTitle.activeBorder#ceef49
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#a6adad
  • peekView.border#007acc
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditor.matchHighlightBorder#ee931e
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#252526
  • peekViewResult.fileForeground#a6adad
  • peekViewResult.lineForeground#a6adad
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#363947
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#252526
  • peekViewTitleDescription.foreground#a6adad
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#30306b00
  • pickerGroup.foreground#ceef49
  • progressBar.background#ceef49
  • quickInput.background#212121
  • scrollbar.shadow#1a1a1a
  • scrollbarSlider.activeBackground#ffffff40
  • scrollbarSlider.background#ffffff20
  • scrollbarSlider.hoverBackground#ffffff30
  • selection.background#ffffff20
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#ceef49
  • sideBar.background#1b1b1b
  • sideBar.border#1a1a1a
  • sideBar.dropBackground#36394780
  • sideBar.foreground#a6adad
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ceef49
  • statusBar.background#181818
  • statusBar.border#363947
  • statusBar.debuggingBackground#ceef49
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#101010
  • statusBar.foreground#a6adad
  • statusBar.noFolderBackground#181818
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#a6adad
  • statusBarItem.activeBackground#ffffff25
  • statusBarItem.hoverBackground#00000000
  • statusBarItem.remoteBackground#ceef49
  • statusBarItem.remoteForeground#101010
  • symbolIcon.constantForeground#BD93F9
  • symbolIcon.keywordForeground#f9507f
  • symbolIcon.moduleForeground#66daff
  • symbolIcon.snippetForeground#ceef49
  • symbolIcon.structForeground#13FBA7
  • symbolIcon.typeParameterForeground#ff9960
  • tab.activeBackground#212121
  • tab.activeBorder#00000000
  • tab.activeBorderTop#ceef49
  • tab.activeForeground#ffffff
  • tab.border#00000000
  • tab.hoverBackground#212121
  • tab.hoverBorder#00000000
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#a6adad
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#21d3ff
  • terminal.ansiGreen#13FBA7
  • terminal.ansiMagenta#f93778
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#e5e510
  • terminal.border#363947
  • terminal.foreground#a6adad
  • terminal.selectionBackground#ffffff20
  • terminalCursor.background#13161b
  • terminalCursor.foreground#ffffff
  • textLink.foreground#2e7ff8
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#a6adad
  • titleBar.border#363947
  • titleBar.inactiveBackground#181818
  • titleBar.inactiveForeground#343e44
  • tree.indentGuidesStroke#363947
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#ceef49

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#7E8392
comment storage.type#7E8392
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#BD93F9
comment.git-status.header.remote#FC618D
comment.git-status.header.local#66DAFF
comment.other.git-status.head#FFFFFF
punctuation.definition.string.begin, punctuation.definition.string.end#E3EC79
string.quoted.docstring, string.quoted.docstring punctuation.definition#7E8392
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#7E8392
constant#BD93F9
constant.other#FFFFFF
constant.other.caps#BD93F9
constant.other.placeholder#BD93F9
constant.other.property#BD93F9
constant.other.citation.latex#BD93F9
constant.other.color#BD93F9
constant.other.character-class.escape#BD93F9
constant.other.key#BD93F9
constant.other.symbol#FD9353
constant.other.elm#66DAFF
constant.numeric#BD93F9
constant.language#BD93F9
constant.character.escape#BD93F9
constant.numeric.line-number.find-in-files#525053
constant.numeric.line-number.match.find-in-files#FFEB81
entity.name.section#FFEB81
entity.name.module.rust#13FBA7
entity.name.function, entity.name.function.templated, entity.name.function.member.static#13FBA7
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace, entity.name.function.support.builtin.go#66DAFF
entity.name.label#BD93F9
entity.name.directive.restructuredtext, markup.quote#FFEB81italic
entity.name.filename#FFEB81
entity.name.class#66DAFF
entity.name.constant#BD93F9
entity.other.inherited-class#66DAFF
entity.name.function#13FBA7
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.other.attribute-name#66DAFF
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#13FBA7
entity.other.attribute-name.id.css#FD9353
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css#66DAFFitalic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#13FBA7
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#66DAFF
entity.other.git-status.hex#BD93F9
entity.other.jinja2.delimiter#8B888F
entity.name.operator.custom-literal#FFFFFF
entity.name.operator.custom-literal.string#FFEB81
entity.name.operator.custom-literal.number#BD93F9
entity.name.type.rust#66DAFF
invalid#FC618Ditalic underline
invalid.deprecated#FD9353italic underline
keyword#FC618D
keyword.control#FC618D
keyword.control.directive#FC618D
keyword.operator, keyword.operator.member, keyword.operator.new, keyword.operator.new.cpp, keyword.operator.delete.cpp, keyword.other.operator.overload.cpp, entity.name.operator.cpp, entity.name.operator.type.reference.cpp, entity.name.operator.type.pointer.cpp#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.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby#FC618D
markup.italicitalic
markup.boldbold
markup.heading#FFEB81
markup.raw#FD9353
markup.underlineunderline
markup.underline.link#13FBA7
markup.inserted, markup.inserted punctuation.definition.inserted#13FBA7
markup.deleted, markup.deleted punctuation.definition.deleted#FC618D
markup.changed, markup.changed punctuation.definition.changed#FFEB81
markup.ignored, markup.ignored punctuation.definition.ignored#8B888F
markup.untracked#8B888F
markup.quoteitalic
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.instance.constructor#13FBA7
meta.attribute-with-value.class string, meta.attribute.class.html string#13FBA7
meta.attribute-with-value.id string, meta.attribute.id.html string#FD9353
source.json meta.mapping.key string#FFFFFF
source.yaml meta.mapping.key string#FC618D
meta.object.member#FFFFFF
meta.property-list.css variable.other#FD9353
entity.name.constant.preprocessor, meta.preprocessor#BD93F9
meta.diff.git-diff.header#FFEB81
meta.type variable, meta.type variable.other.readwrite#BD93F9
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#7E8392
punctuation.brackets.angle.rust#FFFFFF
punctuation.other.colon.go#FFFFFF
punctuation.definition.directive.cpp#FC618D
source.cpp punctuation.section, source.cpp punctuation.separator.scope-resolution, source.cpp punctuation.separator.pointer-access, source.cpp storage.modifier.pointer, source.cpp storage.modifier.reference, source.cpp keyword.operator, source.cpp entity.name.function.operator, keyword.other.operator.overload.cpp, entity.name.operator.cpp, entity.name.operator.type.reference.cpp, entity.name.operator.type.pointer.cpp#FC618D
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#8B888F
punctuation.terminator#FFFFFF
punctuation.definition.group#FFFFFF
punctuation.definition.comment#7E8392
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#13FBA7
meta.brace.round, meta.brace.square, keyword.operator.type.annotation, meta.type storage.modifier.array#8B888F
region.redish#FC618D
region.orangish#FD9353
region.yellowish#FFEB81
region.greenish#13FBA7
region.bluish#66DAFF
region.purplish#BD93F9
region.pinkish#FC618D
region.whitish#FFFFFF
source#FFFFFF
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#BD93F9
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#BD93F9
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#66DAFF
storage.type.extends#FC618Dnormal
storage.type.function.arrow#FC618Dnormal
storage.modifier, storage.type.modifier#FC618D
storage.class.restructuredtext.ref#BD93F9
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#66DAFF
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#FFFFFF
string#FFEB81
punctuation.definition.string.begin.cpp, punctuation.definition.string.end.cpp#FFEB81
string.unquoted.label#FFFFFF
string source#FFFFFF
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#66DAFF
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FC618D
string.other.ref, string.other.restructuredtext.ref#13FBA7
string.other.git-status.help.key#BAB6C0
string.other.git-status.remote#FC618D
support.constant#66DAFF
support.constant.handlebars#8B888F
support.type.vendor-prefix.css#BAB6C0
support.function.delimiter.elm#8B888F
support.type, entity.name.type.object.console#66DAFFitalic
support.variable, support.variable.property#66DAFF
support.function, support.type.property-nameregular
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#66DAFF
support.class#66DAFF
support.constant.core.rust#BD93F9
comment support, comment support.class#7E8392
text#FFFFFF
text.find-in-files#FFFFFF
variable, variable.other#FFFFFF
variable.parameter, parameters variable.function#FD9353italic
variable.language#BAB6C0italic
variable.language.arguments#BD93F9
variable.language.this.cpp#BD93F9
variable.other.class#66DAFF
variable.other.constant#BD93F9
variable.other.readwrite#FFFFFF
variable.other.member#FFFFFF
variable.other.enummember#BD93F9
variable.other.property, variable.other.property.static, variable.other.event#FFFFFF
variable.function#13FBA7
variable.other.substitution#FD9353
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby#BD93F9
source.jinja2 variable.other.jinja2.block#13FBA7
source.jinja2 variable.other.jinja2#FD9353
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
TomTheme by tomcn0803 - VS Code Theme