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.activeBackground#2f697f10
  • activityBar.activeBorder#47577e80
  • activityBar.background#0f160f
  • activityBar.foreground#5a6f5c
  • activityBar.inactiveForeground#46542a
  • activityBarBadge.background#47577e
  • activityBarBadge.foreground#0f160f
  • badge.background#112615
  • badge.foreground#5a6f5c
  • breadcrumb.activeSelectionForeground#5a6f5c
  • breadcrumb.background#0f160f
  • breadcrumb.focusForeground#5a6f5c
  • breadcrumb.foreground#46542a
  • breadcrumbPicker.background#141705
  • button.background#282f0b
  • button.foreground#5a6f5c
  • checkbox.background#282f0b
  • checkbox.border#141705
  • checkbox.foreground#5a6f5c
  • contrastBorder#141705
  • debugToolBar.background#282f0b
  • diffEditor.insertedTextBackground#2f7e2520
  • diffEditor.removedTextBackground#7f2b2650
  • dropdown.background#0f160f
  • dropdown.border#141705
  • dropdown.foreground#5a6f5c
  • editor.background#0f160f
  • editor.findMatchBackground#707f2380
  • editor.findMatchHighlightBackground#73f99040
  • editor.findRangeHighlightBackground#3c471175
  • editor.foldBackground#282f0b
  • editor.foreground#5a6f5c
  • editor.hoverHighlightBackground#141705
  • editor.lineHighlightBorder#112615
  • editor.rangeHighlightBackground#2f697f15
  • editor.selectionBackground#112615
  • editor.selectionHighlightBackground#112615
  • editor.snippetFinalTabstopHighlightBackground#0f160f
  • editor.snippetFinalTabstopHighlightBorder#2f7e25
  • editor.snippetTabstopHighlightBackground#0f160f
  • editor.snippetTabstopHighlightBorder#46542a
  • editor.wordHighlightBackground#317f7650
  • editor.wordHighlightStrongBackground#2f7e2550
  • editorCodeLens.foreground#46542a
  • editorError.foreground#7f2b26
  • editorGroup.border#2f697f
  • editorGroup.dropBackground#3c471170
  • editorGroupHeader.tabsBackground#141705
  • editorGutter.addedBackground#2f7e2580
  • editorGutter.deletedBackground#7f2b2680
  • editorGutter.modifiedBackground#317f7680
  • editorHoverWidget.background#0f160f
  • editorHoverWidget.border#46542a
  • editorIndentGuide.activeBackground#73f99045
  • editorIndentGuide.background#73f9901A
  • editorLineNumber.foreground#46542a
  • editorLink.activeForeground#317f76
  • editorMarkerNavigation.background#282f0b
  • editorOverviewRuler.addedForeground#2f7e2580
  • editorOverviewRuler.border#141705
  • editorOverviewRuler.currentContentForeground#2f7e25
  • editorOverviewRuler.deletedForeground#7f2b2680
  • editorOverviewRuler.errorForeground#7f2b2680
  • editorOverviewRuler.incomingContentForeground#2f697f
  • editorOverviewRuler.infoForeground#317f7680
  • editorOverviewRuler.modifiedForeground#317f7680
  • editorOverviewRuler.selectionHighlightForeground#707f23
  • editorOverviewRuler.warningForeground#707f2380
  • editorOverviewRuler.wordHighlightForeground#317f76
  • editorOverviewRuler.wordHighlightStrongForeground#2f7e25
  • editorRuler.foreground#73f9901A
  • editorSuggestWidget.background#282f0b
  • editorSuggestWidget.foreground#5a6f5c
  • editorSuggestWidget.selectedBackground#112615
  • editorWarning.foreground#707f23
  • editorWhitespace.foreground#73f9901A
  • editorWidget.background#282f0b
  • errorForeground#7f2b26
  • extensionButton.prominentBackground#2f7e2590
  • extensionButton.prominentForeground#5a6f5c
  • extensionButton.prominentHoverBackground#2f7e2560
  • focusBorder#46542a
  • foreground#5a6f5c
  • gitDecoration.conflictingResourceForeground#707f23
  • gitDecoration.deletedResourceForeground#7f2b26
  • gitDecoration.ignoredResourceForeground#46542a
  • gitDecoration.modifiedResourceForeground#317f76
  • gitDecoration.untrackedResourceForeground#2f7e25
  • input.background#0f160f
  • input.border#141705
  • input.foreground#5a6f5c
  • input.placeholderForeground#46542a
  • inputOption.activeBorder#2f697f
  • inputValidation.errorBackground#0f160f
  • inputValidation.errorBorder#7f2b26
  • inputValidation.errorForeground#7f2b26
  • inputValidation.infoBackground#0f160f
  • inputValidation.infoBorder#2f697f
  • inputValidation.infoForeground#2f697f
  • inputValidation.warningBackground#0f160f
  • inputValidation.warningBorder#707f23
  • inputValidation.warningForeground#707f23
  • list.activeSelectionBackground#112615
  • list.activeSelectionForeground#5a6f5c
  • list.dropBackground#112615
  • list.errorForeground#7f2b26
  • list.focusBackground#3c471175
  • list.highlightForeground#317f76
  • list.hoverBackground#3c471175
  • list.inactiveSelectionBackground#3c471175
  • list.warningForeground#707f23
  • listFilterWidget.background#0f160f
  • listFilterWidget.noMatchesOutline#7f2b26
  • listFilterWidget.outline#112615
  • merge.currentHeaderBackground#2f7e2590
  • merge.incomingHeaderBackground#2f697f90
  • notification.background#0f160f
  • notification.buttonBackground#112615
  • notification.buttonForeground#5a6f5c
  • notification.buttonHoverBackground#3c471175
  • notification.errorBackground#7f2b26
  • notification.errorForeground#0f160f
  • notification.foreground#5a6f5c
  • notification.infoBackground#2f697f
  • notification.infoForeground#0f160f
  • notification.warningBackground#707f23
  • notification.warningForeground#0f160f
  • notificationCenter.border#282f0b
  • notificationCenterHeader.background#0f160f
  • notificationCenterHeader.foreground#5a6f5c
  • notificationLink.foreground#317f76
  • notifications.background#0f160f
  • notifications.border#282f0b
  • notifications.foreground#5a6f5c
  • notificationsErrorIcon.foreground#7f2b26
  • notificationsInfoIcon.foreground#2f697f
  • notificationsWarningIcon.foreground#707f23
  • notificationToast.border#282f0b
  • panel.background#0f160f
  • panel.border#2f697f
  • panelInput.border#5a6f5c
  • panelTitle.activeBorder#47577e
  • panelTitle.activeForeground#5a6f5c
  • panelTitle.inactiveForeground#46542a
  • peekView.border#112615
  • peekViewEditor.background#0f160f
  • peekViewEditor.matchHighlightBackground#bde00080
  • peekViewResult.background#282f0b
  • peekViewResult.fileForeground#5a6f5c
  • peekViewResult.lineForeground#5a6f5c
  • peekViewResult.matchHighlightBackground#bde00080
  • peekViewResult.selectionBackground#112615
  • peekViewResult.selectionForeground#5a6f5c
  • peekViewTitle.background#141705
  • peekViewTitleDescription.foreground#46542a
  • peekViewTitleLabel.foreground#5a6f5c
  • pickerGroup.border#2f697f
  • pickerGroup.foreground#317f76
  • progressBar.background#47577e
  • scrollbar.shadow#444444
  • selection.background#2f697f
  • settings.checkboxBackground#282f0b
  • settings.checkboxBorder#141705
  • settings.checkboxForeground#5a6f5c
  • settings.dropdownBackground#282f0b
  • settings.dropdownBorder#141705
  • settings.dropdownForeground#5a6f5c
  • settings.headerForeground#5a6f5c
  • settings.modifiedItemIndicator#707f23
  • settings.numberInputBackground#282f0b
  • settings.numberInputBorder#141705
  • settings.numberInputForeground#5a6f5c
  • settings.textInputBackground#282f0b
  • settings.textInputBorder#141705
  • settings.textInputForeground#5a6f5c
  • sideBar.background#282f0b
  • sideBarSectionHeader.background#0f160f
  • sideBarSectionHeader.border#141705
  • sideBarTitle.foreground#5a6f5c
  • statusBar.background#141705
  • statusBar.debuggingBackground#7f2b26
  • statusBar.debuggingForeground#141705
  • statusBar.foreground#5a6f5c
  • statusBar.noFolderBackground#141705
  • statusBar.noFolderForeground#5a6f5c
  • statusBarItem.prominentBackground#7f2b26
  • statusBarItem.prominentHoverBackground#707f23
  • statusBarItem.remoteBackground#2f697f
  • statusBarItem.remoteForeground#0f160f
  • tab.activeBackground#0f160f
  • tab.activeBorderTop#47577e80
  • tab.activeForeground#5a6f5c
  • tab.border#141705
  • tab.inactiveBackground#282f0b
  • tab.inactiveForeground#46542a
  • terminal.ansiBlack#112615
  • terminal.ansiBlue#2f697f
  • terminal.ansiBrightBlack#3c4711
  • terminal.ansiBrightBlue#00a9df
  • terminal.ansiBrightCyan#00dfc3
  • terminal.ansiBrightGreen#18e000
  • terminal.ansiBrightMagenta#0058df
  • terminal.ansiBrightRed#df8008
  • terminal.ansiBrightWhite#73f990
  • terminal.ansiBrightYellow#bde000
  • terminal.ansiCyan#317f76
  • terminal.ansiGreen#2f7e25
  • terminal.ansiMagenta#47577e
  • terminal.ansiRed#7f2b26
  • terminal.ansiWhite#647d75
  • terminal.ansiYellow#707f23
  • terminal.background#0f160f
  • terminal.border#5a6f5c
  • terminal.foreground#5a6f5c
  • terminal.selectionBackground#11261550
  • textBlockQuote.background#282f0b
  • titleBar.activeBackground#282f0b
  • titleBar.activeForeground#5a6f5c
  • titleBar.inactiveBackground#141705
  • titleBar.inactiveForeground#46542a
  • walkThrough.embeddedEditorBackground#282f0b
  • welcomePage.buttonBackground#112615
  • welcomePage.buttonHoverBackground#3c471175
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#2f697f
source#5a6f5c
meta.diff, meta.diff.header#46542a
markup.inserted#2f7e25
markup.deleted#7f2b26
markup.changed#707f23
invalid#7f2b26underline italic
invalid.deprecated#5a6f5cunderline italic
entity.name.filename#bde000
markup.error#7f2b26
markup.underlineunderline
markup.bold#707f23bold
markup.heading#2f697fbold
markup.italic#bde000italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#317f76
markup.inline.raw, markup.raw.restructuredtext#2f7e25
markup.underline.link, markup.underline.link.image#317f76
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#47577e
entity.name.directive.restructuredtext, markup.quote#bde000italic
meta.separator.markdown#46542a
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#2f7e25
punctuation.definition.constant.restructuredtext#2f697f
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#2f697f
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#5a6f5c
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#bde000
entity.name.type.class, entity.name.class#317f76normal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#2f697fitalic
entity.other.inherited-class#317f76italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#46542a
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#47577e
comment.block.documentation entity.name.type#317f76italic
comment.block.documentation entity.name.type punctuation.definition.bracket#317f76
comment.block.documentation variable#707f23italic
constant, variable.other.constant#2f697f
constant.character.escape, constant.character.string.escape, constant.regexp#47577e
entity.name.tag#47577e
entity.other.attribute-name.parent-selector#47577e
entity.other.attribute-name#2f7e25italic
entity.name.function, meta.function-call.generic, 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#2f7e25
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#707f23italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#2f7e25italic
meta.decorator variable.other.object#2f7e25
keyword, punctuation.definition.keyword#47577e
keyword.control.new, keyword.operator.newbold
meta.selector#47577e
support#317f76italic
support.function.magic, support.variable, variable.other.predefined#2f697fregular
support.function, support.type.property-nameregular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#47577e
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#5a6f5c
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#47577e
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#317f76
constant.other.date, constant.other.timestamp#707f23
variable.other.alias.yaml#2f7e25italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#47577eregular
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#317f76italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#707f23
storage.modifier#47577e
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#bde000
punctuation.definition.group.capture.regexp#47577e
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#7f2b26
punctuation.definition.character-class.regexp#317f76
punctuation.definition.group.regexp#707f23
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#7f2b26
meta.assertion.look-ahead.regexp#2f7e25
string#bde000
punctuation.definition.string.begin, punctuation.definition.string.end#00a9df
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#2f697f
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#46542a
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#5a6f5c
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#707f23italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#5a6f5cnormal
meta.selectionset.graphql variable#bde000
meta.selectionset.graphql meta.arguments variable#5a6f5c
entity.name.fragment.graphql, variable.fragment.graphql#317f76
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#5a6f5c
source.shell variable.other#2f697f
support.constant#2f697fnormal
meta.scope.prerequisites.makefile#bde000
meta.attribute-selector.scss#bde000
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#5a6f5c
meta.preprocessor.haskell#46542a
Tinted VSCode by Tinted Theming - VS Code Theme