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#F3F6FB10
  • activityBar.activeBorder#24242480
  • activityBar.background#32393F
  • activityBar.border#242424
  • activityBar.foreground#F3F6FB
  • activityBar.inactiveForeground#888888
  • activityBarBadge.background#F4721C
  • activityBarBadge.foreground#F3F6FB
  • badge.background#32393F
  • badge.foreground#F3F6FB
  • breadcrumb.activeSelectionForeground#F3F6FB
  • breadcrumb.background#242424
  • breadcrumb.focusForeground#F3F6FB
  • breadcrumb.foreground#888888
  • breadcrumbPicker.background#191919
  • button.background#F2AA00
  • button.foreground#242424
  • button.secondaryBackground#242424
  • button.secondaryForeground#F3F6FB
  • button.secondaryHoverBackground#C61471
  • debugToolBar.background#242424
  • diffEditor.insertedTextBackground#6BE13D20
  • diffEditor.removedTextBackground#BC390850
  • dropdown.background#242424
  • dropdown.border#191919
  • dropdown.foreground#F3F6FB
  • editor.background#242424
  • editor.findMatchBackground#BCED0980
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#24242480
  • editor.foreground#F3F6FB
  • editor.hoverHighlightBackground#32C2D850
  • editor.lineHighlightBorder#32393F
  • editor.rangeHighlightBackground#BD93F915
  • editor.selectionBackground#32393F
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#242424
  • editor.snippetFinalTabstopHighlightBorder#6BE13D
  • editor.snippetTabstopHighlightBackground#242424
  • editor.snippetTabstopHighlightBorder#888888
  • editor.wordHighlightBackground#32C2D850
  • editor.wordHighlightStrongBackground#6BE13D50
  • editorBracketHighlight.foreground1#F3F6FB
  • editorBracketHighlight.foreground2#E4B7E5
  • editorBracketHighlight.foreground3#32C2D8
  • editorBracketHighlight.foreground4#6BE13D
  • editorBracketHighlight.foreground5#bf9eee
  • editorBracketHighlight.foreground6#BCED09
  • editorBracketHighlight.unexpectedBracket.foreground#BC3908
  • editorCodeLens.foreground#888888
  • editorCursor.foreground#F2AA00
  • editorError.foreground#BC3908
  • editorGroup.border#bf9eee
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#191919
  • editorGutter.addedBackground#6BE13D80
  • editorGutter.deletedBackground#BC390880
  • editorGutter.modifiedBackground#32C2D880
  • editorHoverWidget.background#242424
  • editorHoverWidget.border#888888
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#888888
  • editorLink.activeForeground#32C2D8
  • editorMarkerNavigation.background#242424
  • editorOverviewRuler.addedForeground#6BE13D80
  • editorOverviewRuler.border#191919
  • editorOverviewRuler.currentContentForeground#6BE13D
  • editorOverviewRuler.deletedForeground#BC390880
  • editorOverviewRuler.errorForeground#BC390880
  • editorOverviewRuler.incomingContentForeground#bf9eee
  • editorOverviewRuler.infoForeground#32C2D880
  • editorOverviewRuler.modifiedForeground#32C2D880
  • editorOverviewRuler.selectionHighlightForeground#BCED09
  • editorOverviewRuler.warningForeground#BCED0980
  • editorOverviewRuler.wordHighlightForeground#32C2D8
  • editorOverviewRuler.wordHighlightStrongForeground#6BE13D
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#242424
  • editorSuggestWidget.foreground#F3F6FB
  • editorSuggestWidget.selectedBackground#32393F
  • editorWarning.foreground#32C2D8
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#242424
  • errorForeground#BC3908
  • extensionButton.prominentBackground#6BE13D90
  • extensionButton.prominentForeground#F3F6FB
  • extensionButton.prominentHoverBackground#6BE13D60
  • focusBorder#32393F
  • foreground#F3F6FB
  • gitDecoration.conflictingResourceForeground#BCED09
  • gitDecoration.deletedResourceForeground#BC3908
  • gitDecoration.ignoredResourceForeground#888888
  • gitDecoration.modifiedResourceForeground#32C2D8
  • gitDecoration.untrackedResourceForeground#6BE13D
  • input.background#242424
  • input.border#191919
  • input.foreground#F3F6FB
  • input.placeholderForeground#888888
  • inputOption.activeBorder#bf9eee
  • inputValidation.errorBorder#BC3908
  • inputValidation.infoBorder#E4B7E5
  • inputValidation.warningBorder#BCED09
  • list.activeSelectionBackground#32393F
  • list.activeSelectionForeground#F3F6FB
  • list.dropBackground#32393F
  • list.errorForeground#BC3908
  • list.focusBackground#44475A75
  • list.highlightForeground#32C2D8
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#BCED09
  • listFilterWidget.background#242424
  • listFilterWidget.noMatchesOutline#BC3908
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#6BE13D90
  • merge.incomingHeaderBackground#BD93F990
  • panel.background#242424
  • panel.border#bf9eee
  • panelTitle.activeBorder#E4B7E5
  • panelTitle.activeForeground#F3F6FB
  • panelTitle.inactiveForeground#888888
  • peekView.border#32393F
  • peekViewEditor.background#242424
  • peekViewEditor.matchHighlightBackground#F2AA0080
  • peekViewResult.background#242424
  • peekViewResult.fileForeground#F3F6FB
  • peekViewResult.lineForeground#F3F6FB
  • peekViewResult.matchHighlightBackground#F2AA0080
  • peekViewResult.selectionBackground#32393F
  • peekViewResult.selectionForeground#F3F6FB
  • peekViewTitle.background#191919
  • peekViewTitleDescription.foreground#888888
  • peekViewTitleLabel.foreground#F3F6FB
  • pickerGroup.border#bf9eee
  • pickerGroup.foreground#32C2D8
  • progressBar.background#F2AA00
  • selection.background#C61471
  • settings.checkboxBackground#242424
  • settings.checkboxBorder#191919
  • settings.checkboxForeground#F3F6FB
  • settings.dropdownBackground#242424
  • settings.dropdownBorder#191919
  • settings.dropdownForeground#F3F6FB
  • settings.headerForeground#F3F6FB
  • settings.modifiedItemIndicator#BCED09
  • settings.numberInputBackground#242424
  • settings.numberInputBorder#191919
  • settings.numberInputForeground#F3F6FB
  • settings.textInputBackground#242424
  • settings.textInputBorder#191919
  • settings.textInputForeground#F3F6FB
  • sideBar.background#32393F
  • sideBarSectionHeader.background#32393F
  • sideBarSectionHeader.border#242424
  • sideBarTitle.foreground#F3F6FB
  • statusBar.background#191919
  • statusBar.debuggingBackground#BC3908
  • statusBar.debuggingForeground#191919
  • statusBar.foreground#F3F6FB
  • statusBar.noFolderBackground#191919
  • statusBar.noFolderForeground#F3F6FB
  • statusBarItem.prominentBackground#BC3908
  • statusBarItem.prominentHoverBackground#BCED09
  • statusBarItem.remoteBackground#bf9eee
  • statusBarItem.remoteForeground#242424
  • tab.activeBackground#242424
  • tab.activeBorderTop#E4B7E580
  • tab.activeForeground#F3F6FB
  • tab.border#191919
  • tab.inactiveBackground#242424
  • tab.inactiveForeground#888888
  • terminal.ansiBlack#262626
  • terminal.ansiBlue#bf9eee
  • terminal.ansiBrightBlack#7b7f8b
  • terminal.ansiBrightBlue#d6b4f7
  • terminal.ansiBrightCyan#adf6f6
  • terminal.ansiBrightGreen#78f09a
  • terminal.ansiBrightMagenta#f49dda
  • terminal.ansiBrightRed#f07c7c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f6f6ae
  • terminal.ansiCyan#97e1f1
  • terminal.ansiGreen#62e884
  • terminal.ansiMagenta#f286c4
  • terminal.ansiRed#ee6666
  • terminal.ansiWhite#f6f6f4
  • terminal.ansiYellow#e7ee98
  • terminal.background#242424
  • terminal.foreground#F3F6FB
  • textLink.activeForeground#F2AA00
  • textLink.foreground#32C2D8
  • titleBar.activeBackground#32C2D8
  • titleBar.activeForeground#242424
  • titleBar.inactiveBackground#191919
  • titleBar.inactiveForeground#888888
  • walkThrough.embeddedEditorBackground#242424

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#bf9eee
meta.diff, meta.diff.header#888888
markup.inserted#6BE13D
markup.deleted#BC3908
markup.changed#BCED09
invalid#BC3908underline italic
invalid.deprecated#F3F6FBunderline italic
entity.name.filename#F2AA00
markup.error#BC3908
markup.underlineunderline
markup.bold#BCED09bold
markup.heading#bf9eeebold
markup.italic#F2AA00italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#32C2D8
markup.inline.raw, markup.raw.restructuredtext#6BE13D
markup.underline.link, markup.underline.link.image#32C2D8
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#E4B7E5
entity.name.directive.restructuredtext, markup.quote#F2AA00italic
meta.separator.markdown#888888
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#6BE13D
punctuation.definition.constant.restructuredtext#bf9eee
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#bf9eee
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F3F6FB
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#F2AA00
entity.name.type.class, entity.name.class#32C2D8normal
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#bf9eeeitalic
entity.other.inherited-class#32C2D8italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#888888
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#E4B7E5
comment.block.documentation entity.name.type#32C2D8italic
comment.block.documentation entity.name.type punctuation.definition.bracket#32C2D8
comment.block.documentation variable#BCED09italic
constant, variable.other.constant#bf9eee
constant.character.escape, constant.character.string.escape, constant.regexp#E4B7E5
entity.name.tag#E4B7E5
entity.other.attribute-name.parent-selector#E4B7E5
entity.other.attribute-name#6BE13Ditalic
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#6BE13D
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#BCED09italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#6BE13Ditalic
meta.decorator variable.other.object#6BE13D
keyword, punctuation.definition.keyword#E4B7E5
keyword.control.new, keyword.operator.newbold
meta.selector#E4B7E5
support#32C2D8italic
support.function.magic, support.variable, variable.other.predefined#bf9eeeregular
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#E4B7E5
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#F3F6FB
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#E4B7E5
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#32C2D8
constant.other.date, constant.other.timestamp#BCED09
variable.other.alias.yaml#6BE13Ditalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#E4B7E5regular
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#32C2D8italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#BCED09
storage.modifier#E4B7E5
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F2AA00
punctuation.definition.group.capture.regexp#E4B7E5
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#BC3908
punctuation.definition.character-class.regexp#32C2D8
punctuation.definition.group.regexp#BCED09
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#BC3908
meta.assertion.look-ahead.regexp#6BE13D
string#F2AA00
punctuation.definition.string.begin, punctuation.definition.string.end#dee492
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#97e2f2
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#888888
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#F3F6FB
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#BCED09italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#F3F6FBnormal
meta.selectionset.graphql variable#F2AA00
meta.selectionset.graphql meta.arguments variable#F3F6FB
entity.name.fragment.graphql, variable.fragment.graphql#32C2D8
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#F3F6FB
source.shell variable.other#bf9eee
support.constant#bf9eeenormal
meta.scope.prerequisites.makefile#F2AA00
meta.attribute-selector.scss#F2AA00
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F3F6FB
meta.preprocessor.haskell#888888
log.error#BC3908bold
log.warning#F2AA00bold
Tromb Branded Theme by Tromb - VS Code Theme